// Estimado — Beta Ads Opt-In Page
// Single-purpose conversion page: capture lead → redirect to confirmation.
//
// Hierarchy:
//   AboveTheFold        ← everything visible on first paint (mobile + desktop)
//     - Header (lockup + small beta tag)
//     - Hero copy stack (eyebrow / headline / subhead)
//     - LiveDemo or image-slot (the "GIF" slot)
//     - OptInForm (multi-step)
//     - Microcopy (no spam / privacy)
//   TrustSlab           ← one big claim section
//   RepeatCTA           ← second form for scrollers
//   Footer              ← legal-only

const ANGLES = {
  reality: {
    eyebrow: null,
    headline: ['Send Estimates In Minutes,', <em key="i">Not Days…</em>],
    tail: 'Estimado AI is trained on over 5,000 hours of estimating.',
    sub: null,
  },
  time: {
    eyebrow: 'Join the Beta Launch List',
    headline: ['Four hours of paperwork.', <em key="i">Five minutes from now.</em>],
    sub: 'Drop your blueprints, photos, walk-through video, and voice memos — Estimado AI sends a complete, branded estimate while you finish your coffee.',
  },
  bid: {
    eyebrow: 'Join the Beta Launch List',
    headline: ['First estimate in wins.', <em key="i">Send yours in five.</em>],
    sub: 'Photos in, branded PDF out. Get back to your leads before your competitor does — and watch when the customer opens it.',
  },
  truck: {
    eyebrow: 'Join the Beta Launch List',
    headline: ['Estimate from the truck.', <em key="i">Before the next job.</em>],
    sub: 'Voice memo on the drive home, photos from the walkthrough, blueprint on your phone. Estimado AI builds the estimate. You hit send.',
  },
};

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "angle": "reality",
  "showSubhead": true,
  "mediaType": "phone",
  "density": "comfortable",
  "showTrustAboveFold": true
}/*EDITMODE-END*/;

function OptInPage() {
  const [tw, setTweak] = window.useTweaks
    ? window.useTweaks(DEFAULT_TWEAKS)
    : [DEFAULT_TWEAKS, () => {}];
  const angle = ANGLES[tw.angle] || ANGLES.reality;

  // Auto-compact on mobile viewports — independent of the user's density tweak,
  // because we MUST fit the fold on iPhone 14/15.
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth <= 760
  );
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= 760);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const compact = isMobile || tw.density === 'compact';

  return (
    <div className="opt-page" style={{
      width: '100%', minHeight: '100vh',
      background: C.paper, color: C.ink,
      fontFamily: F.ui, fontSize: 15, lineHeight: 1.5,
    }}>
      <AboveTheFold angle={angle} tw={tw} compact={compact} />
      <Footer />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Angle">
            <window.TweakSelect
              label="Headline variant"
              value={tw.angle}
              onChange={(v) => setTweak('angle', v)}
              options={[
                { value: 'reality', label: "Minutes, not days — broad" },
                { value: 'time',    label: "Time saved — 4hr → 5min" },
                { value: 'bid',     label: "Win the bid — speed" },
                { value: 'truck',   label: "From the truck — mobile" },
              ]} />
            <window.TweakToggle
              label="Show subhead under headline"
              value={tw.showSubhead}
              onChange={(v) => setTweak('showSubhead', v)} />
          </window.TweakSection>

          <window.TweakSection title="Media slot">
            <window.TweakSelect
              label="What goes above the form"
              value={tw.mediaType}
              onChange={(v) => setTweak('mediaType', v)}
              options={[
                { value: 'phone',  label: 'iPhone mock (animated)' },
                { value: 'demo',   label: 'Terminal demo (animated)' },
                { value: 'slot',   label: 'Drop your own GIF' },
                { value: 'hide',   label: 'Hide' },
              ]} />
          </window.TweakSection>

          <window.TweakSection title="Layout">
            <window.TweakRadio
              label="Density"
              value={tw.density}
              onChange={(v) => setTweak('density', v)}
              options={[
                { value: 'comfortable', label: 'Comfy' },
                { value: 'compact',     label: 'Compact' },
              ]} />
            <window.TweakToggle
              label="Show trust strip above the fold"
              value={tw.showTrustAboveFold}
              onChange={(v) => setTweak('showTrustAboveFold', v)} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

// ─── ABOVE THE FOLD ──────────────────────────────────────────
function AboveTheFold({ angle, tw, compact }) {
  return (
    <section className={"fold " + (compact ? 'fold-compact' : '')}>
      {/* Slim top bar */}
      <header className="topbar">
        <div className="bar-inner">
          <a href="#top" className="lockup-link" aria-label="Estimado">
            <Lockup size={24} />
          </a>
          <span className="beta-tag">
            <span className="om-pulse-dot" style={{ width: 6, height: 6 }} />
            <span>Beta · invite only</span>
          </span>
        </div>
      </header>

      {/* Hero content */}
      <div className="fold-inner">
        <div className="hero-stack">
          {angle.eyebrow && (
            <MonoLabel style={{ display: 'block', marginBottom: 8 }} className="mono-eyebrow">{angle.eyebrow}</MonoLabel>
          )}

          <h1 className="headline">
            {angle.headline[0]}<br />{angle.headline[1]}
          </h1>

          {angle.tail && (
            <p className="headline-tail hide-on-mobile">{angle.tail}</p>
          )}

          {tw.showSubhead && angle.sub && (
            <p className="subhead">{angle.sub}</p>
          )}

          {/* Media slot */}
          {tw.mediaType !== 'hide' && (
            <div className="media-slot">
              {tw.mediaType === 'phone' && <PhoneDemo height={compact ? 380 : 440} />}
              {tw.mediaType === 'demo'  && <LiveDemo compact={compact} />}
              {tw.mediaType === 'slot'  && (
                <image-slot
                  id="hero-gif"
                  shape="rounded"
                  radius="14"
                  placeholder="Drop product GIF here (loop, ~1.5–4s)"
                  style={{ width: '100%', height: compact ? '170px' : '240px', display: 'block' }}>
                </image-slot>
              )}
            </div>
          )}

          {/* Form */}
          <div className="form-slot">
            <OptInForm compact={compact} />
          </div>

          {/* Micro-trust line */}
          {tw.showTrustAboveFold && (
            <div className="micro-trust">
              <span className="om-pulse-dot" style={{ width: 7, height: 7, marginTop: 6 }} />
              <span>Estimado AI is trained on 5,000+ hrs of manual estimating from our sister contracting company. <em>This is not ChatGPT.</em></span>
            </div>
          )}

          {/* Legal microcopy */}
          <p className="legal-micro">
            By joining the list you agree to receive emails and SMS from Estimado about your invite.
            We don't sell your data. <a href="https://www.estimado.com/privacy" target="_blank" rel="noopener">Privacy</a> · <a href="https://www.estimado.com/terms" target="_blank" rel="noopener">Terms</a>
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-left">
          <Lockup size={26} />
          <span className="footer-meta">hello@estimado.com · Made in Florida 🇺🇸</span>
        </div>
        <div className="footer-right">
          <div className="footer-links">
            <a href="https://www.estimado.com/privacy" target="_blank" rel="noopener">Privacy</a>
            <a href="https://www.estimado.com/terms" target="_blank" rel="noopener">Terms</a>
          </div>
          <span className="footer-copy">© 2026 Estimado AI LLC — All rights reserved.</span>
        </div>
      </div>
    </footer>
  );
}

window.OptInPage = OptInPage;