// Option D — "The Announcement" — single-scroll conversion-focused layout
// in the warm Paper/Ink palette from Option C. Headline above the demo;
// the multi-input live demo dominates the hero.

function OptionD() {
  return (
    <div style={{
      width: '100%',
      background: C.paper, color: C.ink,
      fontFamily: F.ui, fontSize: 16, lineHeight: 1.5,
    }}>
      <OD_TopBar />
      <OD_Nav />
      <OD_Hero />
      <OD_Stats />
      <OD_BuiltDifferent />
      <OD_PhotoQuote />
      <OD_HowItWorks />
      <OD_TestimonialSlab />
      <OD_Pricing />
      <OD_FinalCTA />
      <OD_Footer />
    </div>
  );
}

// ─────────── TOP UTILITY BAR ───────────
function OD_TopBar() {
  return (
    <div style={{
      background: C.ink, color: C.paper,
      padding: '10px 0',
      fontFamily: F.mono, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 56px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <span className="om-pulse-dot" style={{ width: 7, height: 7 }} />
          Beta opens July 1 · 54 spots left
        </span>
        <span style={{ color: 'rgba(250,248,243,0.6)' }}>
          1,284 contractors waiting →&nbsp;
          <a href="#cta" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('open-waitlist-modal')); }} style={{ color: C.paper, textDecoration: 'underline', textUnderlineOffset: 3, cursor: 'pointer' }}>join them</a>
        </span>
      </div>
    </div>
  );
}

// ─────────── NAV ───────────
function OD_Nav() {
  const items = [
    ['Product', '#product'],
    ['How it works', '#how'],
    ['About', '#about'],
    ['Pricing', '#pricing'],
  ];
  return (
    <div style={{
      padding: '22px 0',
      borderBottom: `1px solid ${C.rule}`,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 56px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#top" style={{ textDecoration: 'none' }}><Lockup size={28} /></a>
        <nav style={{ display: 'flex', gap: 32 }}>
          {items.map(([label, href]) => (
            <a key={label} href={href} style={{
              fontFamily: F.ui, fontSize: 14, fontWeight: 450, color: C.ink, textDecoration: 'none',
            }}>{label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <PillButton href="#cta" small onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('open-waitlist-modal')); }}>Get early access</PillButton>
        </div>
      </div>
    </div>
  );
}

// ─────────── HERO — headline above, demo dominates ───────────
function OD_Hero() {
  return (
    <div style={{ padding: '72px 0 80px', position: 'relative' }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 56px',
        position: 'relative', textAlign: 'center',
      }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 14px', borderRadius: 999,
          background: C.paper2, border: `1px solid ${C.rule}`,
          fontFamily: F.mono, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: C.ink, marginBottom: 32,
        }}>
          <span className="om-pulse-dot" style={{ width: 7, height: 7 }} />
          Beta · v0.9 · Live demo below
        </span>

        <h1 style={{
          fontFamily: F.display, fontWeight: 380,
          fontSize: 104, lineHeight: 0.98, letterSpacing: '-0.035em',
          margin: '0 auto 24px', maxWidth: 1100,
          textWrap: 'balance',
          minHeight: 220,
        }}>
          From <Typewriter
            words={['blueprint', 'job pictures', 'videos', 'voice memo']}
            caretColor={C.ink}
          /><br/>
          <span style={{ color: C.muted, fontStyle: 'italic' }}>to bid in five minutes.</span>
        </h1>

        <p style={{
          fontFamily: F.ui, fontSize: 20, lineHeight: 1.45,
          color: C.ink2, margin: '0 auto 16px', maxWidth: 760,
        }}>
          From blueprint, job photos, a walk-through video, and a voice memo —
          all at once. Estimado AI handles everything and produces a complete,
          branded estimate.
        </p>

        {/* Live demo — wider/dominant */}
        <div style={{ maxWidth: 920, margin: '36px auto 0' }}>
          <LiveDemo />
        </div>

        {/* Email form */}
        <div id="cta" style={{ maxWidth: 520, margin: '48px auto 14px' }}>
          <EmailForm placeholder="you@yourcompany.com" cta="Get early access" />
        </div>
        <div style={{
          fontFamily: F.mono, fontSize: 11, letterSpacing: '0.06em',
          textTransform: 'uppercase', color: C.muted,
        }}>
          7-day free trial · opens July 1, 2026 · no card required
        </div>

        {/* Social proof avatars */}
        <div style={{ marginTop: 28, display: 'inline-flex', alignItems: 'center', gap: 14 }}>
          <AvatarStack size={36} count={5} />
          <span style={{ fontSize: 13.5, color: C.ink2 }}>
            <strong style={{ color: C.ink, fontWeight: 500 }}>1,284 contractors</strong> on the waitlist
          </span>
        </div>
      </div>
    </div>
  );
}

// ─────────── STATS ROW ───────────
function OD_Stats() {
  const stats = [
    { big: '5 min',  label: 'From blueprint to bid' },
    { big: '5,000+', label: 'Hours of manual takeoffs in training' },
    { big: '20–70×', label: 'Faster than doing it by hand' },
  ];
  return (
    <div style={{ padding: '8px 0 80px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: `1px solid ${C.ink}` }}>
        {stats.map((s, i) => (
          <div key={i} style={{
            padding: '32px 28px 32px 0',
            paddingLeft: i === 0 ? 0 : 28,
            borderRight: i < 2 ? `1px solid ${C.rule}` : 'none',
          }}>
            <div style={{
              fontFamily: F.display, fontWeight: 360, fontSize: 64,
              lineHeight: 0.95, letterSpacing: '-0.035em', margin: '0 0 14px',
            }}>{s.big}</div>
            <div style={{ fontSize: 14, color: C.muted, lineHeight: 1.45, maxWidth: 220 }}>{s.label}</div>
          </div>
        ))}
        </div>
      </div>
    </div>
  );
}

// ─────────── BUILT DIFFERENT ───────────
function OD_BuiltDifferent() {
  const cards = [
    {
      tag: '01',
      title: 'Not a chatbot wrapper.',
      desc: 'We don\'t ask the model what things cost. Prices come from our own database — synced with Home Depot, regionally adjusted, current.',
      foot: 'Real pricing, not LLM guesses',
    },
    {
      tag: '02',
      title: 'Built on 1,438 takeoffs.',
      desc: 'Our evaluation corpus is 1,438 manual takeoffs done by a civil engineering team. Every model change is benchmarked against it.',
      foot: 'No competitor has this',
    },
    {
      tag: '03',
      title: 'Thinks like a contractor.',
      desc: 'Scope · structural · MEP · demo · sequencing · permits · interaction · risk · responsibility. Modeled on how senior estimators think.',
      foot: 'Catches what manual misses',
    },
    {
      tag: '04',
      title: 'Automatic follow-up.',
      desc: 'Estimado AI nudges your clients automatically after you send the estimate — so you stay top of mind without lifting a finger.',
      foot: 'Closes the loop for you',
    },
  ];
  return (
    <div id="product" style={{ padding: '0 0 96px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 56px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
        <h2 style={{
          fontFamily: F.display, fontWeight: 400, fontSize: 56,
          letterSpacing: '-0.025em', margin: 0, lineHeight: 1.05, maxWidth: 760, textWrap: 'balance',
        }}>
          Why we'll get it right<br/>
          <span style={{ color: C.muted }}>when everybody else gets it close.</span>
        </h2>
        <MonoLabel>Built different</MonoLabel>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {cards.map((c, i) => (
          <div key={i} style={{
            background: C.paper2, border: `1px solid ${C.rule}`, borderRadius: 18,
            padding: '28px 26px', display: 'flex', flexDirection: 'column',
            minHeight: 280,
          }}>
            <span style={{
              fontFamily: F.display, fontWeight: 380, fontSize: 32,
              color: 'rgba(21,20,15,0.22)', letterSpacing: '-0.02em', marginBottom: 14,
            }}>{c.tag}</span>
            <h3 style={{
              fontFamily: F.display, fontWeight: 400, fontSize: 26, letterSpacing: '-0.02em',
              margin: '0 0 14px', lineHeight: 1.15, color: C.ink,
            }}>{c.title}</h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: C.ink2, margin: '0 0 24px' }}>{c.desc}</p>
            <div style={{
              fontFamily: F.mono, fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase',
              color: C.muted, marginTop: 'auto',
              borderTop: `1px solid ${C.rule}`, paddingTop: 14,
            }}>{c.foot}</div>
          </div>
        ))}
      </div>
      </div>
    </div>
  );
}

// ─────────── FOUNDER PHOTO + QUOTE ───────────
function OD_PhotoQuote() {
  return (
    <div id="about" style={{
      background: C.paper2, color: C.ink,
      padding: '120px 0',
      borderTop: `1px solid ${C.rule}`, borderBottom: `1px solid ${C.rule}`,
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0, maxWidth: 880, margin: '0 auto' }}>
        <div>
          <MonoLabel>Who built this</MonoLabel>
          <blockquote style={{
            margin: '20px 0 28px',
            fontFamily: F.display, fontWeight: 400, fontSize: 42,
            letterSpacing: '-0.025em', lineHeight: 1.15, color: C.ink, textWrap: 'balance',
          }}>
            We've worked with over 3,000 contractors in our sister company and
            we watched them lose bids because estimates took days. So we built
            the tool we wished they had.
          </blockquote>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <img src="assets/wagner-headshot.png" alt="Wagner Vieitas"
              style={{ width: 56, height: 56, borderRadius: 999, objectFit: 'cover', objectPosition: 'center top', background: C.paper2 }} />
            <div style={{ fontFamily: F.ui, fontSize: 15 }}>
              <div style={{ fontWeight: 500, color: C.ink }}>Wagner Vieitas</div>
              <div style={{ color: C.muted, fontSize: 13, marginTop: 2 }}>Founder, Estimado · Contractor Level Up</div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  );
}

// ─────────── HOW IT WORKS ───────────
function OD_HowItWorks() {
  const steps = [
    { tag: 'Step 01', title: 'Drop everything in.',     desc: 'PDF blueprints, site photos, walk-through videos, voice memos — all at once. The AI reads it all together.' },
    { tag: 'Step 02', title: 'Estimado AI goes to work.', desc: 'It asks you all the questions to make sure it understood the scope fully — then it goes to work.' },
    { tag: 'Step 03', title: 'Send. Track. Close.',     desc: 'Branded PDF out the door. Estimado tells you when the customer opens it, looks at it twice, or goes silent.' },
  ];
  return (
    <div id="how" style={{
      padding: '120px 0',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 56px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
        <h2 style={{
          fontFamily: F.display, fontWeight: 400, fontSize: 56,
          letterSpacing: '-0.025em', margin: 0,
        }}>The 5-minute workflow.</h2>
        <MonoLabel>How it works</MonoLabel>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            padding: '28px 26px 26px',
            border: `1px solid ${C.rule}`, borderRadius: 18,
            background: C.paper2,
          }}>
            <MonoLabel>{s.tag}</MonoLabel>
            <h3 style={{
              fontFamily: F.display, fontWeight: 400, fontSize: 28, letterSpacing: '-0.02em',
              margin: '14px 0 14px', lineHeight: 1.15,
            }}>{s.title}</h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: C.ink2, margin: 0 }}>{s.desc}</p>
          </div>
        ))}
      </div>
      </div>
    </div>
  );
}

// ─────────── BIG TESTIMONIAL SLAB ───────────
function OD_TestimonialSlab() {
  return (
    <div style={{
      padding: '120px 0',
      background: C.ink, color: C.paper,
      borderTop: `1px solid ${C.rule}`, borderBottom: `1px solid ${C.rule}`,
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 56px' }}>
        <MonoLabel color="rgba(250,248,243,0.55)">Beta cohort · early feedback</MonoLabel>
        <blockquote style={{
          margin: '28px 0 36px',
          fontFamily: F.display, fontWeight: 380,
          fontSize: 64, letterSpacing: '-0.025em', lineHeight: 1.1,
          color: C.paper, maxWidth: 1080, textWrap: 'balance',
        }}>
          <span style={{ color: 'rgba(250,248,243,0.55)' }}>"</span>
          I lost a $42k kitchen job last spring because I forgot to nudge the customer.
          That doesn't happen now.
          <span style={{ color: 'rgba(250,248,243,0.55)' }}>"</span>
        </blockquote>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <img src="assets/daniel-r.png" alt="Daniel R."
            style={{ width: 56, height: 56, borderRadius: 999, objectFit: 'cover', objectPosition: 'center 25%' }} />
          <div style={{ fontFamily: F.ui, fontSize: 15 }}>
            <div style={{ fontWeight: 500, color: C.paper }}>Daniel R.</div>
            <div style={{ color: 'rgba(250,248,243,0.55)', fontSize: 13, marginTop: 2 }}>
              General contractor · Tampa, FL · Beta user
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────── PRICING ───────────
function OD_Pricing() {
  return (
    <div id="pricing" style={{ padding: '120px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 56px' }}>
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <MonoLabel>Pricing · founding cohort</MonoLabel>
        <h2 style={{
          fontFamily: F.display, fontWeight: 400, fontSize: 56,
          letterSpacing: '-0.025em', margin: '14px 0 16px',
        }}>Lock in founding pricing.</h2>
        <p style={{ fontSize: 18, color: C.ink2, margin: '0 auto', maxWidth: 580, lineHeight: 1.5 }}>
          We're finalizing pricing for launch. Waitlist signups get the founding-contractor rate locked in,
          even after public prices go up.
        </p>
      </div>

      <div style={{
        maxWidth: 560, margin: '0 auto',
        background: C.paper2,
        border: `1px solid ${C.rule}`, borderRadius: 20,
        padding: '36px 36px 32px',
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
          <span style={{ fontFamily: F.display, fontWeight: 400, fontSize: 22, color: C.ink }}>
            Founding contractor
          </span>
          <span style={{
            padding: '4px 10px', borderRadius: 999,
            background: C.paper, border: `1px solid ${C.rule}`, color: C.ink2,
            fontFamily: F.mono, fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>Waitlist only</span>
        </div>

        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap', marginBottom: 24 }}>
          <span style={{
            fontFamily: F.display, fontWeight: 360, fontSize: 64, color: C.ink, letterSpacing: '-0.03em',
            lineHeight: 1,
          }}>$247</span>
          <span style={{
            color: C.muted, fontFamily: F.mono, fontSize: 13, letterSpacing: '0.04em',
          }}>/mo. for 3 months</span>
          <span style={{
            color: C.muted, fontFamily: F.display, fontSize: 26,
            textDecoration: 'line-through', textDecorationThickness: 1.5,
            letterSpacing: '-0.02em',
          }}>$497/mo.</span>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
          {[
            '7-day free trial when public launch opens',
            'Unlimited takeoffs + remodeling estimates',
            'Follow-up tracking on every PDF',
            'Priority support during beta',
          ].map((t) => (
            <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <span style={{
                width: 16, height: 16, borderRadius: 999, background: C.ink, color: C.paper,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
                  <path d="M1.5 4.2L3.3 6L6.5 2.5" stroke={C.paper} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
              <span style={{ fontSize: 14.5, color: C.ink2 }}>{t}</span>
            </div>
          ))}
        </div>

        <a href="#cta" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('open-waitlist-modal')); }} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          padding: '14px 16px', borderRadius: 12,
          background: C.ink, color: C.paper, border: 'none',
          fontFamily: F.ui, fontWeight: 500, fontSize: 15,
          textDecoration: 'none', cursor: 'pointer',
        }}>Get founding pricing <Arrow color={C.paper} /></a>
      </div>
      </div>
    </div>
  );
}

// ─────────── FINAL CTA ───────────
function OD_FinalCTA() {
  return (
    <div style={{
      padding: '120px 0',
      borderTop: `1px solid ${C.rule}`,
      textAlign: 'center',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 56px' }}>
      <MonoLabel>The waitlist · estimado.com</MonoLabel>
      <h2 style={{
        fontFamily: F.display, fontWeight: 380, fontSize: 96,
        letterSpacing: '-0.03em', margin: '20px 0 24px', lineHeight: 1.0, textWrap: 'balance',
      }}>
        Get in before<br/>everyone else does.
      </h2>
      <p style={{ fontSize: 19, color: C.ink2, margin: '0 auto 36px', maxWidth: 560, lineHeight: 1.5 }}>
        Closed beta opens July 1. Public trial opens July 10. We'll email you the morning
        it's your turn — plus founding-contractor pricing while it's still on the table.
      </p>
      <div style={{ maxWidth: 520, margin: '0 auto' }}>
        <EmailForm placeholder="you@yourcompany.com" cta="Get early access" />
      </div>
      <div style={{ marginTop: 24, display: 'inline-flex', alignItems: 'center', gap: 14 }}>
        <AvatarStack size={32} count={5} />
        <span style={{ fontSize: 13.5, color: C.ink2 }}>
          <strong style={{ color: C.ink, fontWeight: 500 }}>1,284 contractors</strong> · 54 beta spots left
        </span>
      </div>
      </div>
    </div>
  );
}

// ─────────── FOOTER ───────────
function OD_Footer() {
  return (
    <div style={{
      borderTop: `1px solid ${C.rule}`,
      padding: '40px 0 32px',
      background: C.paper2,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 56px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 48,
      }}>
        <div>
          <Lockup size={22} />
          <div style={{
            marginTop: 16, fontFamily: F.mono, fontSize: 11, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: C.muted, lineHeight: 1.7,
          }}>
            hello@estimado.com<br/>
            Made in Florida 🇺🇸
          </div>
        </div>
        <div style={{ display: 'flex', gap: 56, fontFamily: F.ui, fontSize: 13.5 }}>
          {[
            ['Product', ['Takeoff engine', 'Remodeling engine', 'Follow-ups', 'PDF delivery']],
            ['Company', ['About', 'Careers', 'Press', 'Contact']],
            ['Trades',  ['Remodelers', 'Flooring', 'GCs', 'See all']],
          ].map(([title, items], i) => (
            <div key={i}>
              <div style={{ fontFamily: F.mono, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.muted, marginBottom: 14 }}>{title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {items.map((it) => (
                  <a key={it} href="#" style={{ color: C.ink, textDecoration: 'none' }}>{it}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom bar — copyright + legal links + social */}
      <div style={{
        maxWidth: 1280, margin: '32px auto 0', padding: '20px 56px 0',
        borderTop: `1px solid ${C.rule}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
        fontFamily: F.mono, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: C.muted,
      }}>
        <span>© 2026 Estimado AI · All rights reserved</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <a href="/privacy.html" style={{ color: C.muted, textDecoration: 'none' }}>Privacy Notice</a>
          <a href="/terms.html" style={{ color: C.muted, textDecoration: 'none' }}>Terms &amp; Conditions</a>
          <span style={{ width: 1, height: 14, background: C.rule }} />
          <SocialLinks size={16} gap={16} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OptionD });