// Contact page — "Talk to our team" form scene.
// Two-column layout: pitch + channels + HQ on left, form panel on right.
// Visual language matches the dashboard tiles (gradient-overlay surface,
// purple-tinted borders, mono numeric / id text). No external nav / footer
// — those are rendered by the page-level wrapper.

function ContactPage() {
  const [state, setState] = React.useState({
    firstName: '',
    lastName: '',
    email: '',
    company: '',
    role: '',
    size: '',
    country: '',
    cc: '+1',
    phone: '',
    use: '',
    message: '',
    consent: true,
  });
  const [submitted, setSubmitted] = React.useState(false);

  const set = (k) => (e) => setState({ ...state, [k]: e.target.value });
  const toggle = (k) => () => setState({ ...state, [k]: !state[k] });

  function onSubmit(e) {
    e.preventDefault();
    setSubmitted(true);
  }

  // Stable mono "ticket id" used only inside the success state.
  const ticketId = React.useMemo(() => {
    const hex = '0123456789abcdef';
    let s = '';
    for (let i = 0; i < 12; i++) s += hex[Math.floor(Math.random() * 16)];
    return `INTK-${s.slice(0, 4)}-${s.slice(4, 12)}`;
  }, []);

  return (
    <main className="contact-wrap">
      <div className="container">
        <div className="contact-grid">
          {/* ─── LEFT ─── */}
          <div className="contact-left">
            <span className="contact-eyebrow">
              <span className="dot"></span>CONTACT · SALES
            </span>
            <h1 className="contact-h1">
              Talk to our <span className="grad">team</span>.
            </h1>
            <p className="contact-sub">
              Set up a 30-day shadow-mode pilot. We score your real traffic,
              block nothing, and hand back a report on signals and
              false-positive rate before you decide on rollout.
            </p>

            <div className="contact-divider"></div>

            <div className="channels">
              <div className="channel-row">
                <span className="lbl">Sales</span>
                <a href="mailto:sales@dipoli.io">sales@dipoli.io</a>
              </div>
              <div className="channel-row">
                <span className="lbl">Support</span>
                <a href="mailto:support@dipoli.io">support@dipoli.io</a>
              </div>
              <div className="channel-row">
                <span className="lbl">Schedule</span>
                <a href="#">cal.dipoli.io/intro</a>
              </div>
            </div>

            <div className="hq-card">
              <div className="orb"></div>
              <div className="hq-tag">HQ · EU</div>
              <h3 className="hq-name">Dipoli OÜ</h3>
              <p className="hq-addr">
                Tornimäe 5<br />
                10145 Tallinn, Estonia<br />
                +372 880 5178
              </p>
            </div>

          </div>

          {/* ─── RIGHT: form panel ─── */}
          <div className="form-panel">
            <div className="orb-tl"></div>
            <div className="orb-br"></div>

            {submitted ? (
              <div className="form-success">
                <div className="check">
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                </div>
                <h3>Thanks — we've received your request.</h3>
                <p>
                  A senior solutions engineer will reach out within one
                  business day with pilot scoping and a SOC 2 packet.
                </p>
                <span className="ref">REF · {ticketId}</span>
              </div>
            ) : (
              <form className="form-grid" onSubmit={onSubmit}>
                <div className="field">
                  <label>First name <span className="req">*</span></label>
                  <div className="ipt-wrap">
                    <input className="ipt" required placeholder="Alex" value={state.firstName} onChange={set('firstName')} />
                  </div>
                </div>
                <div className="field">
                  <label>Last name <span className="req">*</span></label>
                  <div className="ipt-wrap">
                    <input className="ipt" required placeholder="Morozova" value={state.lastName} onChange={set('lastName')} />
                  </div>
                </div>

                <div className="field">
                  <label>Work email <span className="req">*</span></label>
                  <div className="ipt-wrap">
                    <svg className="lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
                    <input className="ipt with-icon" type="email" required placeholder="alex@company.com" value={state.email} onChange={set('email')} />
                  </div>
                </div>
                <div className="field">
                  <label>Company <span className="req">*</span></label>
                  <div className="ipt-wrap">
                    <svg className="lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21V7l9-4 9 4v14"/><path d="M9 22V12h6v10"/></svg>
                    <input className="ipt with-icon" required placeholder="Acme Payments" value={state.company} onChange={set('company')} />
                  </div>
                </div>

                <div className="field">
                  <label>Job role <span className="req">*</span></label>
                  <div className="ipt-wrap">
                    <select required value={state.role} onChange={set('role')}>
                      <option value="" disabled>Select…</option>
                      <option>Head of Risk / Fraud</option>
                      <option>Head of Compliance</option>
                      <option>CISO / Security Lead</option>
                      <option>VP / Director of Payments</option>
                      <option>Founder / CEO</option>
                      <option>Engineering Lead</option>
                      <option>Other</option>
                    </select>
                    <svg className="trail" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                  </div>
                </div>
                <div className="field">
                  <label>Monthly TX volume</label>
                  <div className="ipt-wrap">
                    <select value={state.size} onChange={set('size')}>
                      <option value="" disabled>Select…</option>
                      <option>&lt; 100k / month</option>
                      <option>100k – 1M / month</option>
                      <option>1M – 10M / month</option>
                      <option>10M – 100M / month</option>
                      <option>100M+ / month</option>
                    </select>
                    <svg className="trail" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                  </div>
                </div>

                <div className="field">
                  <label>Country / region <span className="req">*</span></label>
                  <div className="ipt-wrap">
                    <select required value={state.country} onChange={set('country')}>
                      <option value="" disabled>Select…</option>
                      <option>United States</option>
                      <option>United Kingdom</option>
                      <option>Germany</option>
                      <option>Estonia</option>
                      <option>Singapore</option>
                      <option>UAE</option>
                      <option>Canada</option>
                      <option>Australia</option>
                      <option>Other EU</option>
                      <option>Other</option>
                    </select>
                    <svg className="trail" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                  </div>
                </div>
                <div className="field">
                  <label>Phone</label>
                  <div className="ipt-wrap">
                    <svg className="lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/></svg>
                    <input className="ipt with-icon" placeholder="+1 555 0118 999" value={state.phone} onChange={set('phone')} />
                  </div>
                </div>

                <div className="field full">
                  <label>What are you trying to solve? <span className="req">*</span></label>
                  <div className="ipt-wrap">
                    <select required value={state.use} onChange={set('use')}>
                      <option value="" disabled>Select…</option>
                      <option>Card-testing / BIN attacks</option>
                      <option>Account takeover (ATO)</option>
                      <option>Synthetic identity at onboarding</option>
                      <option>Stablecoin off-ramp abuse</option>
                      <option>Chargeback / friendly-fraud reduction</option>
                      <option>Replacing an existing vendor</option>
                      <option>Evaluating the market — early discovery</option>
                    </select>
                    <svg className="trail" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                  </div>
                </div>

                <div className="field full">
                  <label>Message</label>
                  <textarea
                    rows="5"
                    placeholder="Anything else worth knowing — current stack, traffic patterns, the specific attack you're seeing this week…"
                    value={state.message}
                    onChange={set('message')}
                  ></textarea>
                </div>

                <div className="form-foot full" style={{ gridColumn: '1 / -1' }}>
                  <div className="consent">
                    <input id="consent" type="checkbox" checked={state.consent} onChange={toggle('consent')} />
                    <span className="cb" onClick={toggle('consent')}></span>
                    <label htmlFor="consent">
                      I agree to the processing and international transfer of my
                      personal data by Dipoli as described in the <a href="#">Privacy Policy</a>.
                    </label>
                  </div>
                  <button type="submit" className="submit-btn" disabled={!state.consent}>
                    Request pilot
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
                  </button>
                </div>

                <div className="form-meta full" style={{ gridColumn: '1 / -1' }}>
                  <span><span className="pulse"></span>SECURE · TLS 1.3</span>
                  <span>GDPR · CCPA compliant</span>
                  <span>Typical response · &lt; 4h business</span>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}