// Relay.jsx — contact form styled as a transmission panel.
function Relay() {
  const [form, setForm] = React.useState({ handle: '', origin: '', payload: '', band: 'S-band · partnership' });
  const [sent, setSent] = React.useState(false);

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.handle || !form.payload) return;
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  const bands = [
    'S-band · partnership',
    'X-band · mission proposal',
    'L-band · press & editorial',
    'UHF · just saying hi',
  ];

  return (
    <section id="relay" style={{ background: 'var(--void)', color: 'var(--fg)' }}>
      <div style={{ padding: '140px 80px 120px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, borderBottom: '1px solid var(--line)' }}>
        {/* Left: header */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            <span style={{ color: 'var(--electric-2)' }}>§ 03</span>&nbsp;&nbsp;—&nbsp;&nbsp;Relay
          </div>
          <h2 className="display" style={{ margin: 0 }}>
            Open a<br/>
            <span style={{ color: 'var(--electric)' }}>channel</span>.
          </h2>
          <p className="lede" style={{ marginTop: 32, maxWidth: 480, color: 'var(--dust-200)' }}>
            If you have a mission worth running, a technology worth betting on,
            or a question that keeps you up — we're listening on every frequency.
          </p>

          <div style={{ marginTop: 56, display: 'flex', flexDirection: 'column', gap: 18, borderTop: '1px solid var(--line)', paddingTop: 32 }}>
            <InfoRow label="Ground station" value="hello@moonshot.studio" />
            <InfoRow label="Signal boost"   value="+1 (202) 555–0180" />
            <InfoRow label="Coordinates"    value="38.8977°N, 77.0365°W · DC" />
            <InfoRow label="Response" value="within 2 orbits / ~3 business days" />
          </div>
        </div>

        {/* Right: the form */}
        <form onSubmit={onSubmit} style={{
          border: '1px solid var(--line-strong)',
          padding: 40,
          position: 'relative',
          background: 'var(--void-2)',
        }}>
          {/* Terminal chrome */}
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            borderBottom: '1px solid var(--line)', paddingBottom: 14, marginBottom: 28,
          }}>
            <div className="mono" style={{ color: 'var(--fg-muted)', fontSize: 11 }}>
              TX&nbsp;&nbsp;→&nbsp;&nbsp;MOONSHOT.RELAY.v2
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--electric)', boxShadow: '0 0 10px var(--electric)' }}/>
              <span className="mono" style={{ fontSize: 11, color: 'var(--electric)' }}>UPLINK STABLE</span>
            </div>
          </div>

          <Field label="01 · Handle" placeholder="Who is transmitting?" value={form.handle} onChange={set('handle')} />
          <Field label="02 · Origin" placeholder="Company, city, or nothing at all" value={form.origin} onChange={set('origin')} />
          <BandField label="03 · Band" options={bands} value={form.band} onChange={set('band')} />
          <Field label="04 · Payload" placeholder="What's the message? Be specific. Be honest. Don't pitch."
            value={form.payload} onChange={set('payload')} multiline />

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 32 }}>
            <div className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11 }}>
              Encrypted · payload limit 2400 chars · {form.payload.length}/2400
            </div>
            <button type="submit" className="btn btn--electric" style={{ height: 44 }}>
              {sent ? 'Transmitted ✓' : 'Transmit'}
              {!sent && (
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
                  <path d="M3 8h10M9 4l4 4-4 4" />
                </svg>
              )}
            </button>
          </div>

          {/* Corner tick marks — construction-line feel */}
          <CornerTick pos="tl" /><CornerTick pos="tr" /><CornerTick pos="bl" /><CornerTick pos="br" />
        </form>
      </div>
    </section>
  );
}

function Field({ label, placeholder, value, onChange, multiline }) {
  const Tag = multiline ? 'textarea' : 'input';
  return (
    <div style={{ marginBottom: 22 }}>
      <label className="eyebrow" style={{ display: 'block', color: 'var(--electric-2)', fontSize: 11, marginBottom: 8 }}>
        {label}
      </label>
      <Tag
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        rows={multiline ? 5 : undefined}
        style={{
          width: '100%',
          background: 'transparent',
          border: 'none',
          borderBottom: '1px solid var(--line-strong)',
          padding: '10px 0',
          color: 'var(--fg-strong)',
          fontFamily: 'var(--font-body)',
          fontSize: 18,
          letterSpacing: '-0.01em',
          outline: 'none',
          resize: multiline ? 'vertical' : 'none',
          transition: 'border-color .2s ease',
        }}
        onFocus={e => e.target.style.borderBottomColor = 'var(--electric)'}
        onBlur={e => e.target.style.borderBottomColor = 'var(--line-strong)'}
      />
    </div>
  );
}

function BandField({ label, options, value, onChange }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <label className="eyebrow" style={{ display: 'block', color: 'var(--electric-2)', fontSize: 11, marginBottom: 10 }}>
        {label}
      </label>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {options.map(o => (
          <button key={o} type="button" onClick={() => onChange({ target: { value: o } })}
            style={{
              padding: '8px 14px',
              border: `1px solid ${value === o ? 'var(--electric)' : 'var(--line-strong)'}`,
              background: value === o ? 'rgba(209,244,140,0.08)' : 'transparent',
              color: value === o ? 'var(--electric)' : 'var(--dust-200)',
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '.03em',
              borderRadius: 999,
              cursor: 'pointer',
              transition: 'all .15s ease',
            }}>
            {o}
          </button>
        ))}
      </div>
    </div>
  );
}

function InfoRow({ label, value }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 24 }}>
      <span className="mono" style={{ color: 'var(--fg-faint)', minWidth: 140, fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em' }}>{label}</span>
      <span style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--fg-strong)' }}>{value}</span>
    </div>
  );
}

function CornerTick({ pos }) {
  const s = { position: 'absolute', width: 12, height: 12 };
  const map = {
    tl: { top: -1, left: -1, borderTop: '1px solid var(--electric)', borderLeft: '1px solid var(--electric)' },
    tr: { top: -1, right: -1, borderTop: '1px solid var(--electric)', borderRight: '1px solid var(--electric)' },
    bl: { bottom: -1, left: -1, borderBottom: '1px solid var(--electric)', borderLeft: '1px solid var(--electric)' },
    br: { bottom: -1, right: -1, borderBottom: '1px solid var(--electric)', borderRight: '1px solid var(--electric)' },
  };
  return <span style={{ ...s, ...map[pos] }} />;
}

Object.assign(window, { Relay });