{label} {area ?

: <input name={name} type={type} required={required} placeholder={ph} style={{ background: L.surface, border: `1px solid ${L.border}`, borderRadius: 9, padding: '12px 14px', color: L.text, fontSize: 13.5, fontFamily: L.font, outline: 'none' }} />}
  </div>
);
const Sel = ({ label, opts, name, required = false }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 7, flex: 1 }}>
    <label style={{ fontSize: 10, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.14em', fontWeight: 700 }}>{label}</label>
    <div style={{ position: 'relative' }}>
      <select name={name} required={required} style={{ width: '100%', appearance: 'none', background: L.surface, border: `1px solid ${L.border}`, borderRadius: 9, padding: '12px 14px', color: L.text, fontSize: 13.5, fontFamily: L.font, outline: 'none', cursor: 'pointer' }}>
        {opts.map(o => <option key={o}>{o}</option>)}
      </select>
      <span style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', color: L.textMute, pointerEvents: 'none', display: 'flex' }}>{I.chevron}</span>
    </div>
  </div>
);
const Row = ({ children }) => <div style={{ display: 'flex', gap: 14 }}>{children}</div>;
const Note = ({ children }) => (
  <div style={{ padding: '14px 16px', borderRadius: 9, background: L.accentFaint, border: `1px solid ${L.borderAmber}`, fontSize: 12.5, fontFamily: L.mono, color: L.accent, lineHeight: 1.55 }}>{children}</div>
);
const PkgChips = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
    <label style={{ fontSize: 10, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.14em', fontWeight: 700 }}>SELECT PACKAGE</label>
    <div style={{ display: 'flex', gap: 8 }}>
      {[['Basic', '$15 / 15 days (was $30)'], ['Plus', '$50 / 3 months (was $100)'], ['Pro', '$250 / 1 year (was $500)', true], ['Audit a Company', 'Custom']].map(([n, p, on]) => (
        <div key={n} style={{ flex: 1, padding: '12px 14px', borderRadius: 9, border: `1px solid ${on ? L.accent : L.border}`, background: on ? L.accentDim : L.surface, cursor: 'pointer' }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: on ? L.text : L.textDim }}>{n}</div>
          <div style={{ fontSize: 12, fontFamily: L.mono, color: on ? L.accent : L.textMute, marginTop: 3 }}>{p}</div>
        </div>
      ))}
    </div>
  </div>
);
const PayChips = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
    <label style={{ fontSize: 10, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.14em', fontWeight: 700 }}>PAYMENT METHOD</label>
    <div style={{ display: 'flex', gap: 8 }}>
      {[['Bitcoin', true], ['UPI']].map(([n, on]) => (
        <div key={n} style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 9, padding: '11px 14px', borderRadius: 9, border: `1px solid ${on ? L.accent : L.border}`, background: on ? L.accentDim : L.surface, cursor: 'pointer' }}>
          <span style={{ width: 14, height: 14, borderRadius: 7, border: `1.5px solid ${on ? L.accent : L.textFaint}`, display: 'grid', placeItems: 'center' }}>{on && <span style={{ width: 7, height: 7, borderRadius: 4, background: L.accent }} />}</span>
          <span style={{ fontSize: 13, fontWeight: 600, color: on ? L.text : L.textDim }}>{n}</span>
        </div>
      ))}
    </div>
  </div>
);
const Submit = ({ full, label = 'Request a demo' }) => (
  <button type="submit" style={{ width: full ? '100%' : 'auto', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, padding: '13px 24px', borderRadius: 9, background: L.accent, border: 'none', color: '#0A0E14', fontSize: 14, fontWeight: 700, fontFamily: L.font, cursor: 'pointer', boxShadow: '0 0 24px rgba(245,181,68,0.28)' }}>{label}<span style={{ display: 'flex' }}>{I.arrowUpRight}</span></button>
);
const DemoNav = () => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 36px', borderBottom: `1px solid ${L.border}` }}>
    <Wordmark markSize={32} />
    <div style={{ display: 'flex', gap: 28 }}>
      <a href="/#pricing" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Pricing</a>
      <a href="/scanner-overview" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Scanner Overview</a>
      <a href="/tps.html" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Privacy and Terms</a>
    </div>
    <a href="/login" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 600, cursor: 'pointer', textDecoration: 'none' }}>Sign in</a>
  </div>
);
const ContactCard = () => (
  <div style={{ borderRadius: 12, border: `1px solid ${L.border}`, background: L.surface, overflow: 'hidden' }}>
    {[['Email', 'support@thirdeyescan.io'], ['X / Twitter DM', 'x.com/thirdeyescan'], ['Activation', 'by email after payment confirmation']].map(([k, v], i) => (
      <div key={k} style={{ padding: '14px 18px', borderBottom: i < 2 ? `1px solid ${L.border}` : 'none' }}>
        <div style={{ fontSize: 10, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.12em', fontWeight: 700 }}>{k.toUpperCase()}</div>
        <div style={{ fontSize: 13, fontFamily: L.mono, color: L.textDim, marginTop: 4 }}>{v}</div>
      </div>
    ))}
  </div>
);
const HEADP = 'Book your demo & activation';
const SUBP = '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.';

/* DF01 · refined version of current (split copy + card form) */
const DF01 = () => (
  <div><DemoNav /><div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 44, padding: '52px 36px 64px', alignItems: 'start' }}>
    <div>
      <Eyebrow>Request a demo</Eyebrow>
      <h1 style={{ fontSize: 42, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em', color: L.text, margin: '0 0 16px' }}>{HEADP}</h1>
      <p style={{ fontSize: 15.5, color: L.textDim, lineHeight: 1.6, margin: '0 0 26px', maxWidth: 420 }}>{SUBP}</p>
      <ContactCard />
    </div>
    <div style={{ borderRadius: 14, border: `1px solid ${L.border}`, background: L.bgAlt, padding: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Row><Field label="FULL NAME" ph="Jane Doe" /><Field label="CONTACT EMAIL" ph="jane@company.com" /></Row>
      <Row><Field label="PHONE NUMBER" ph="+1 555 000 0000" /><Field label="WHERE ARE YOU BASED?" ph="Country" /></Row>
      <Row><Sel 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 label="PAYMENT" opts={['Bitcoin', 'UPI']} /></Row>
      <Field label="MESSAGE FOR US" ph="Tell us about your targets or timeline…" area />
      <Note>You will be contacted by email for payment and account activation. We currently accept Bitcoin and UPI.</Note>
      <Submit />
    </div>
  </div></div>
);

/* DF02 · centered single card */
const DF02 = () => (
  <div><DemoNav /><div style={{ padding: '52px 36px 64px', display: 'flex', justifyContent: 'center', background: `radial-gradient(700px 360px at 50% 0%, rgba(245,181,68,0.07), transparent 70%)` }}>
    <div style={{ width: 620 }}>
      <div style={{ textAlign: 'center', marginBottom: 28 }}>
        <h1 style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', color: L.text, margin: '0 0 10px' }}>{HEADP}</h1>
        <p style={{ fontSize: 15, color: L.textDim, lineHeight: 1.6, margin: '0 auto', maxWidth: 460 }}>{SUBP}</p>
      </div>
      <div style={{ borderRadius: 14, border: `1px solid ${L.border}`, background: L.surface, padding: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Row><Field label="FULL NAME" ph="Jane Doe" /><Field label="CONTACT EMAIL" ph="jane@company.com" /></Row>
        <Row><Field label="PHONE" ph="+1 555 000 0000" /><Field label="LOCATION" ph="Country" /></Row>
        <PkgChips />
        <PayChips />
        <Field label="MESSAGE" ph="Anything we should know…" area h={90} />
        <Submit full />
      </div>
    </div>
  </div></div>
);

/* DF03 · form left, sticky order-summary right */
const DF03 = () => (
  <div><DemoNav /><div style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.9fr', gap: 24, padding: '46px 36px 60px', alignItems: 'start' }}>
    <div style={{ borderRadius: 14, border: `1px solid ${L.border}`, background: L.bgAlt, padding: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
      <h1 style={{ fontSize: 26, fontWeight: 700, color: L.text, margin: 0, letterSpacing: '-0.02em' }}>Your details</h1>
      <Row><Field label="FULL NAME" ph="Jane Doe" /><Field label="CONTACT EMAIL" ph="jane@company.com" /></Row>
      <Row><Field label="PHONE" ph="+1 555 000 0000" /><Field label="LOCATION" ph="Country" /></Row>
      <Field label="MESSAGE FOR US" ph="Targets, timeline, questions…" area />
      <Submit />
    </div>
    <div style={{ borderRadius: 14, border: `1px solid ${L.borderAmber}`, background: `linear-gradient(170deg, ${L.accentDim}, ${L.surface})`, padding: 24, position: 'sticky', top: 20 }}>
      <div style={{ fontSize: 10, fontFamily: L.mono, color: L.accent, letterSpacing: '0.14em', fontWeight: 700, marginBottom: 14 }}>YOUR SELECTION</div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 4 }}><span style={{ fontSize: 18, fontWeight: 700, color: L.text }}>Pro</span><span style={{ fontSize: 22, fontFamily: L.mono, fontWeight: 700, color: L.accent }}>$250<span style={{ fontSize: 12, color: L.textMute }}> / 1 year</span></span></div>
      <div style={{ fontSize: 12.5, color: L.textMute, marginBottom: 16 }}>Was $500 · unlimited scans · priority module access</div>
      <PkgChips />
      <div style={{ height: 14 }} />
      <PayChips />
      <div style={{ marginTop: 16, paddingTop: 14, borderTop: `1px solid ${L.border}`, fontSize: 12, fontFamily: L.mono, color: L.textMute, lineHeight: 1.6 }}>Activation handled by email after payment confirmation. Bitcoin & UPI accepted.</div>
    </div>
  </div></div>
);

/* DF04 · 3-step stepper */
const DF04 = () => (
  <div><DemoNav /><div style={{ padding: '46px 36px 60px', maxWidth: 760, margin: '0 auto' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 0, marginBottom: 28 }}>
      {[['1', 'Your details', true], ['2', 'Plan & payment', true], ['3', 'Confirm', false]].map(([n, l, on], i) => (
        <React.Fragment key={n}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 30, height: 30, borderRadius: 16, background: on ? L.accent : L.surface, border: `1px solid ${on ? L.accent : L.border}`, color: on ? '#0A0E14' : L.textMute, display: 'grid', placeItems: 'center', fontFamily: L.mono, fontWeight: 700, fontSize: 13 }}>{n}</div>
            <span style={{ fontSize: 13, fontWeight: 600, color: on ? L.text : L.textMute }}>{l}</span>
          </div>
          {i < 2 && <div style={{ flex: 1, height: 1, background: L.border, margin: '0 16px' }} />}
        </React.Fragment>
      ))}
    </div>
    <div style={{ borderRadius: 14, border: `1px solid ${L.border}`, background: L.surface, padding: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
      <h2 style={{ fontSize: 20, fontWeight: 700, color: L.text, margin: 0 }}>Plan & payment</h2>
      <PkgChips /><PayChips />
      <Note>You will be contacted by email for payment and account activation.</Note>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><span style={{ fontSize: 13, color: L.textMute, cursor: 'pointer' }}>← Back</span><Submit label="Continue" /></div>
    </div>
  </div></div>
);

/* DF05 · big left headline, minimal right form */
const DF05 = () => (
  <div><DemoNav /><div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, padding: '60px 36px', alignItems: 'center' }}>
    <div>
      <h1 style={{ fontSize: 56, fontWeight: 800, lineHeight: 1.0, letterSpacing: '-0.035em', color: L.text, margin: '0 0 18px' }}>Let's get you <span style={{ color: L.accent }}>activated.</span></h1>
      <p style={{ fontSize: 16, color: L.textDim, lineHeight: 1.6, margin: '0 0 22px', maxWidth: 400 }}>{SUBP}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontFamily: L.mono, fontSize: 13, color: L.textMute }}>
        <div>✉ support@thirdeyescan.io</div><div>𝕏 x.com/thirdeyescan</div>
      </div>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Field label="FULL NAME" ph="Jane Doe" /><Field label="CONTACT EMAIL" ph="jane@company.com" />
      <Row><Sel 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 label="PAYMENT" opts={['Bitcoin', 'UPI']} /></Row>
      <Submit full />
    </div>
  </div></div>
);

/* DF06 · dark glass card on grid bg */
const DF06 = () => (
  <div><DemoNav /><div style={{ position: 'relative', padding: '52px 36px 64px', backgroundImage: `linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)`, backgroundSize: '40px 40px' }}>
    <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(600px 360px at 60% 30%, rgba(245,181,68,0.08), transparent 70%)` }} />
    <div style={{ position: 'relative', maxWidth: 620, margin: '0 auto', borderRadius: 16, border: `1px solid ${L.borderHi}`, background: 'rgba(17,22,31,0.85)', backdropFilter: 'blur(12px)', padding: 30, display: 'flex', flexDirection: 'column', gap: 16, boxShadow: '0 30px 80px rgba(0,0,0,0.5)' }}>
      <div><Eyebrow>Request a demo</Eyebrow><h1 style={{ fontSize: 28, fontWeight: 700, color: L.text, margin: 0, letterSpacing: '-0.02em' }}>{HEADP}</h1></div>
      <Row><Field label="FULL NAME" ph="Jane Doe" /><Field label="CONTACT EMAIL" ph="jane@company.com" /></Row>
      <Row><Field label="PHONE" ph="+1 555 000 0000" /><Field label="LOCATION" ph="Country" /></Row>
      <Row><Sel 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 label="PAYMENT" opts={['Bitcoin', 'UPI']} /></Row>
      <Submit full />
    </div>
  </div></div>
);

/* DF07 · compact, fields stacked single column, left intro band */
const DF07 = () => (
  <div><DemoNav /><div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', minHeight: 540 }}>
    <div style={{ padding: '52px 40px', background: `linear-gradient(170deg, ${L.accentDim}, ${L.bgAlt})`, borderRight: `1px solid ${L.border}` }}>
      <Logo size={48} />
      <h1 style={{ fontSize: 34, fontWeight: 800, lineHeight: 1.08, letterSpacing: '-0.02em', color: L.text, margin: '22px 0 14px' }}>{HEADP}</h1>
      <p style={{ fontSize: 14.5, color: L.textDim, lineHeight: 1.6, margin: '0 0 24px' }}>{SUBP}</p>
      <ContactCard />
    </div>
    <div style={{ padding: '52px 40px', display: 'flex', flexDirection: 'column', gap: 16, justifyContent: 'center' }}>
      <Row><Field label="FULL NAME" ph="Jane Doe" /><Field label="EMAIL" ph="jane@company.com" /></Row>
      <Row><Field label="PHONE" ph="+1 555 000 0000" /><Field label="LOCATION" ph="Country" /></Row>
      <Row><Sel 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 label="PAYMENT" opts={['Bitcoin', 'UPI']} /></Row>
      <Field label="MESSAGE" ph="Optional…" area h={80} />
      <Submit />
    </div>
  </div></div>
);

/* DF08 · payment-method cards prominent */
const DF08 = () => (
  <div><DemoNav /><div style={{ maxWidth: 720, margin: '0 auto', padding: '48px 36px 60px' }}>
    <div style={{ textAlign: 'center', marginBottom: 26 }}>
      <h1 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.03em', color: L.text, margin: '0 0 10px' }}>{HEADP}</h1>
      <p style={{ fontSize: 15, color: L.textDim, margin: '0 auto', maxWidth: 460, lineHeight: 1.6 }}>{SUBP}</p>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ borderRadius: 14, border: `1px solid ${L.border}`, background: L.surface, padding: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Row><Field label="FULL NAME" ph="Jane Doe" /><Field label="CONTACT EMAIL" ph="jane@company.com" /></Row>
        <Row><Field label="PHONE" ph="+1 555 000 0000" /><Field label="LOCATION" ph="Country" /></Row>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        {[['Bitcoin', 'On-chain · confirmation by email', true], ['UPI', 'India · instant confirmation']].map(([n, d, on]) => (
          <div key={n} style={{ padding: 20, borderRadius: 14, border: `1px solid ${on ? L.accent : L.border}`, background: on ? L.accentDim : L.surface, cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}><span style={{ fontSize: 16, fontWeight: 700, color: L.text }}>{n}</span><span style={{ width: 16, height: 16, borderRadius: 8, border: `1.5px solid ${on ? L.accent : L.textFaint}`, display: 'grid', placeItems: 'center' }}>{on && <span style={{ width: 8, height: 8, borderRadius: 4, background: L.accent }} />}</span></div>
            <div style={{ fontSize: 12.5, color: L.textMute, marginTop: 8 }}>{d}</div>
          </div>
        ))}
      </div>
      <Submit full />
    </div>
  </div></div>
);

Object.assign(window, { Field, Sel, Row, Note, PkgChips, PayChips, Submit, DemoNav, ContactCard, HEADP, SUBP, DF01, DF02, DF03, DF04, DF05, DF06, DF07, DF08 });