/* Combined Request-a-Demo designs (DC01–DC06):
   DF05 copy + contact · the form box · DF09 "what happens next" · DF14 trust rail.
   Reuses Field, Sel, Row, Submit, DemoNav from demo-forms-1.jsx. */

const HEAD5 = "Let's get you activated.";
const SUB5 = 'Tell us the plan you want and how to reach you. We will follow up by email with a live walkthrough, payment instructions, and account activation. We currently accept Bitcoin and UPI.';

const ContactLines = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 11, fontFamily: L.mono, fontSize: 13, color: L.textMute }}>
    <div>✉ support@thirdeyescan.io</div>
    <div>𝕏 x.com/thirdeyescan</div>
  </div>
);

const WhyUs = ({ title = 'WHY TEAMS PICK US' }) => (
  <div style={{ borderRadius: 12, border: `1px solid ${L.border}`, background: L.surface, padding: 18 }}>
    <div style={{ fontSize: 10, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.12em', fontWeight: 700, marginBottom: 12 }}>{title}</div>
    {['Evidence-backed findings', 'Up to 5,000 subdomains / sweep', 'Predator scanners that actively hunt where generic tools stop'].map(b => (
      <div key={b} style={{ display: 'flex', gap: 9, alignItems: 'center', fontSize: 12.5, color: L.textDim, marginBottom: 9 }}><span style={{ color: L.accent, display: 'flex' }}>{I.check}</span>{b}</div>
    ))}
  </div>
);

const STEPS = [['Submit', 'We get your request instantly'], ['Email', 'Payment and activation details by email'], ['Pay', 'Bitcoin or UPI — your choice'], ['Activate', 'Account live, demo scheduled']];

const WhatNextV = () => (
  <div>
    <div style={{ fontSize: 10, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.14em', fontWeight: 700, marginBottom: 18 }}>WHAT HAPPENS NEXT</div>
    {STEPS.map(([t, d], i) => (
      <div key={t} style={{ display: 'flex', gap: 14, marginBottom: i < 3 ? 18 : 0 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: L.accentDim, border: `1px solid ${L.borderAmber}`, color: L.accent, display: 'grid', placeItems: 'center', fontFamily: L.mono, fontWeight: 700, fontSize: 12 }}>{i + 1}</div>
          {i < 3 && <div style={{ width: 1, flex: 1, minHeight: 22, background: L.border, marginTop: 4 }} />}
        </div>
        <div style={{ paddingTop: 3 }}><div style={{ fontSize: 14, fontWeight: 700, color: L.text }}>{t}</div><div style={{ fontSize: 12.5, color: L.textMute, marginTop: 3 }}>{d}</div></div>
      </div>
    ))}
  </div>
);

const WhatNextH = () => (
  <div>
    <div style={{ fontSize: 10, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.14em', fontWeight: 700, marginBottom: 16 }}>WHAT HAPPENS NEXT</div>
    <div style={{ display: 'flex', gap: 0 }}>
      {STEPS.map(([t, d], i) => (
        <div key={t} style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ width: 28, height: 28, borderRadius: 14, background: L.accentDim, border: `1px solid ${L.borderAmber}`, color: L.accent, display: 'grid', placeItems: 'center', fontFamily: L.mono, fontWeight: 700, fontSize: 12, flexShrink: 0 }}>{i + 1}</div>
            {i < 3 && <div style={{ flex: 1, height: 1, background: L.border, margin: '0 8px' }} />}
          </div>
          <div style={{ paddingTop: 12, paddingRight: 16 }}><div style={{ fontSize: 13.5, fontWeight: 700, color: L.text }}>{t}</div><div style={{ fontSize: 12, color: L.textMute, marginTop: 3 }}>{d}</div></div>
        </div>
      ))}
    </div>
  </div>
);

const PackageSummary = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, padding: '2px 0 4px' }}>
    {[
      ['Basic', 'For Solo Researchers', '$15 / 15 days', '$30'],
      ['Plus', 'For Active Researchers', '$50 / 3 months', '$100'],
      ['Pro', 'For Professional Researchers', '$250 / 1 year', '$500'],
    ].map(([name, detail, price, was]) => (
      <div key={name} style={{ minWidth: 0 }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: L.text }}>{name}</div>
        <div style={{ fontSize: 10.5, color: L.textMute, marginTop: 2, whiteSpace: 'normal' }}>{detail}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 11.5, fontFamily: L.mono, color: L.textFaint, textDecoration: 'line-through' }}>{was}</span>
          <span style={{ fontSize: 12, fontFamily: L.mono, color: L.accent, fontWeight: 700 }}>{price}</span>
        </div>
      </div>
    ))}
  </div>
);

const FormBox = ({ pad = 28, bg = L.bgAlt }) => {
  const [status, setStatus] = React.useState('');
  const [sending, setSending] = React.useState(false);
  const submit = async (event) => {
    event.preventDefault();
    const fd = new FormData(event.currentTarget);
    const payload = {
      full_name: String(fd.get('full_name') || '').trim(),
      email: String(fd.get('email') || '').trim(),
      phone: String(fd.get('phone') || '').trim(),
      location: String(fd.get('location') || '').trim(),
      plan: String(fd.get('plan') || '').trim(),
      payment: String(fd.get('payment') || '').trim(),
      message: String(fd.get('message') || '').trim(),
    };
    setSending(true);
    setStatus('');
    try {
      const res = await fetch('/api/demo_request', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      setStatus(data.message || data.error || (res.ok ? 'Demo request received.' : 'Unable to send request.'));
      if (res.ok) event.currentTarget.reset();
    } catch (e) {
      setStatus('Unable to send request right now. Email support@thirdeyescan.io.');
    } finally {
      setSending(false);
    }
  };
  return (
  <form onSubmit={submit} style={{ borderRadius: 14, border: `1px solid ${L.border}`, background: bg, padding: pad, display: 'flex', flexDirection: 'column', gap: 15 }}>
    <h2 style={{ fontSize: 20, fontWeight: 700, color: L.text, margin: 0, letterSpacing: '-0.01em' }}>Book your demo &amp; activation</h2>
    <Row><Field name="full_name" required label="FULL NAME" ph="Jane Doe" /><Field name="email" type="email" required label="CONTACT EMAIL" ph="jane@company.com" /></Row>
    <Row><Field name="phone" label="PHONE" ph="+1 555 000 0000" /><Field name="location" label="WHERE ARE YOU BASED?" ph="Country" /></Row>
    <Row><Sel name="plan" required label="PACKAGE" opts={['Basic — $15 / 15 days (was $30 · 50% off)', 'Plus — $50 / 3 months (was $100 · 50% off)', 'Pro — $250 / 1 year (was $500 · 50% off)', 'Audit a Company — Custom']} /><Sel name="payment" required label="PAYMENT" opts={['Bitcoin', 'UPI']} /></Row>
    <PackageSummary />
    <Field name="message" label="MESSAGE FOR US" ph="Targets, timeline, questions…" area h={90} />
    <Note>You will be contacted by email for payment and account activation. We currently accept Bitcoin and UPI.</Note>
    <Submit full label={sending ? 'Sending...' : 'Request a demo'} />
    {status && <div style={{ fontSize: 12.5, fontFamily: L.mono, color: L.accent, lineHeight: 1.5 }}>{status}</div>}
  </form>
  );
};

/* DC01 · copy+contact+trust left, form right, what-next strip full-width below */
const DC01 = () => (
  <div><DemoNav /><div style={{ padding: '48px 36px 56px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 40, alignItems: 'start' }}>
      <div>
        <Eyebrow>Request a demo</Eyebrow>
        <h1 style={{ fontSize: 44, fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.03em', color: L.text, margin: '0 0 16px' }}>Let's get you <span style={{ color: L.accent }}>activated.</span></h1>
        <p style={{ fontSize: 15.5, color: L.textDim, lineHeight: 1.6, margin: '0 0 22px', maxWidth: 420 }}>{SUB5}</p>
        <div style={{ marginBottom: 22 }}><ContactLines /></div>
        <WhyUs />
      </div>
      <FormBox />
    </div>
    <div style={{ marginTop: 40, paddingTop: 30, borderTop: `1px solid ${L.border}` }}><WhatNextH /></div>
  </div></div>
);

/* DC02 · 3-column: copy/contact · form · what-next+trust */
const DC02 = () => (
  <div><DemoNav /><div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.1fr 0.8fr', gap: 28, padding: '48px 36px 60px', alignItems: 'start' }}>
    <div>
      <h1 style={{ fontSize: 34, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.025em', color: L.text, margin: '0 0 14px' }}>Let's get you activated.</h1>
      <p style={{ fontSize: 14.5, color: L.textDim, lineHeight: 1.6, margin: '0 0 20px' }}>{SUB5}</p>
      <ContactLines />
    </div>
    <FormBox />
    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}><WhatNextV /><WhyUs /></div>
  </div></div>
);

/* DC03 · copy left, form right; what-next + trust as two cards under copy */
const DC03 = () => (
  <div><DemoNav /><div style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 36, padding: '48px 36px 60px', alignItems: 'start' }}>
    <div>
      <Eyebrow>Request a demo</Eyebrow>
      <h1 style={{ fontSize: 40, fontWeight: 800, lineHeight: 1.03, letterSpacing: '-0.03em', color: L.text, margin: '0 0 16px' }}>Let's get you activated.</h1>
      <p style={{ fontSize: 15.5, color: L.textDim, lineHeight: 1.6, margin: '0 0 24px', maxWidth: 440 }}>{SUB5}</p>
      <div style={{ borderRadius: 12, border: `1px solid ${L.border}`, background: L.surface, padding: 20, marginBottom: 16 }}><WhatNextV /></div>
      <ContactLines />
    </div>
    <FormBox />
  </div></div>
);

/* DC04 · centered form, copy above, what-next horizontal below */
const DC04 = () => (
  <div><DemoNav /><div style={{ maxWidth: 760, margin: '0 auto', padding: '46px 36px 60px' }}>
    <div style={{ textAlign: 'center', marginBottom: 26 }}>
      <h1 style={{ fontSize: 38, fontWeight: 800, letterSpacing: '-0.03em', color: L.text, margin: '0 0 12px' }}>Let's get you activated.</h1>
      <p style={{ fontSize: 15, color: L.textDim, lineHeight: 1.6, margin: '0 auto', maxWidth: 520 }}>{SUB5}</p>
    </div>
    <FormBox bg={L.surface} />
    <div style={{ marginTop: 30, paddingTop: 28, borderTop: `1px solid ${L.border}` }}><WhatNextH /></div>
    <div style={{ marginTop: 22, textAlign: 'center' }}><ContactLines /></div>
  </div></div>
);

/* DC05 · mirror — form left, headline + timeline + trust right */
const DC05 = () => (
  <div><DemoNav /><div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 36, padding: '48px 36px 60px', alignItems: 'start' }}>
    <FormBox />
    <div>
      <h1 style={{ fontSize: 38, fontWeight: 800, lineHeight: 1.04, letterSpacing: '-0.03em', color: L.text, margin: '0 0 14px' }}>Let's get you activated.</h1>
      <p style={{ fontSize: 15, color: L.textDim, lineHeight: 1.6, margin: '0 0 24px', maxWidth: 420 }}>{SUB5}</p>
      <div style={{ marginBottom: 22 }}><WhatNextV /></div>
      <ContactLines />
    </div>
  </div></div>
);

/* DC06 · banner copy header, form + side rail (timeline+trust) */
const DC06 = () => (
  <div><DemoNav />
    <div style={{ padding: '38px 36px', textAlign: 'center', background: `radial-gradient(700px 300px at 50% 0%, rgba(245,181,68,0.09), transparent 70%)`, borderBottom: `1px solid ${L.border}` }}>
      <h1 style={{ fontSize: 38, fontWeight: 800, letterSpacing: '-0.03em', color: L.text, margin: '0 auto 10px', maxWidth: 620 }}>Let's get you activated.</h1>
      <p style={{ fontSize: 15, color: L.textDim, margin: '0 auto', maxWidth: 520, lineHeight: 1.6 }}>{SUB5}</p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 0.8fr', gap: 28, padding: '36px', alignItems: 'start' }}>
      <FormBox />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div style={{ borderRadius: 12, border: `1px solid ${L.border}`, background: L.surface, padding: 20 }}><WhatNextV /></div>
        <WhyUs />
        <ContactLines />
      </div>
    </div>
  </div>
);

Object.assign(window, { DC01, DC02, DC03, DC04, DC05, DC06, FormBox, WhatNextV, WhatNextH, WhyUs, ContactLines });