// Estimado mobile landing page — fits inside an iPhone frame.
// All sections from desktop, restacked for ~370px content width.

function MobileLanding() {
  return (
    <div style={{
      width: '100%',
      background: C.paper, color: C.ink,
      fontFamily: F.ui, fontSize: 15, lineHeight: 1.5,
    }}>
      <OM_TopBar />
      <OM_Nav />
      <OM_Hero />
      <OM_Stats />
      <OM_BuiltDifferent />
      <OM_PhotoQuote />
      <OM_HowItWorks />
      <OM_TestimonialSlab />
      <OM_Pricing />
      <OM_FinalCTA />
      <OM_Footer />
      <div style={{ height: 36, background: C.paper2 }} /> {/* clear home indicator, matches footer */}
    </div>
  );
}

// Slim utility bar — runs under the iOS status bar so push it down
function OM_TopBar() {
  return (
    <div style={{
      background: C.ink, color: C.paper,
      padding: '10px 20px',
      fontFamily: F.mono, fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
    }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <span className="om-pulse-dot" style={{ width: 6, height: 6 }} />
        Beta opens July 1
      </span>
      <span style={{ color: 'rgba(250,248,243,0.6)' }}>54 spots left</span>
    </div>
  );
}

function OM_Nav() {
  return (
    <div style={{
      padding: '14px 20px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: `1px solid ${C.rule}`,
      background: C.paper,
    }}>
      <Lockup size={22} />
      <button aria-label="Menu" style={{
        all: 'unset', cursor: 'pointer',
        width: 36, height: 36, borderRadius: 10,
        border: `1px solid ${C.rule}`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="16" height="12" viewBox="0 0 16 12" fill="none">
          <path d="M1 1.5h14M1 6h14M1 10.5h14" stroke={C.ink} strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      </button>
    </div>
  );
}

function OM_Hero() {
  return (
    <div style={{ padding: '18px 20px 40px', position: 'relative', textAlign: 'center' }}>
      <div style={{ position: 'relative' }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '2px 8px 2px 7px', borderRadius: 999,
          background: C.paper2, border: `1px solid ${C.rule}`,
          fontFamily: F.mono, fontSize: 8, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: C.ink, marginBottom: 14, lineHeight: 1.4,
        }}>
          <span className="om-pulse-dot" style={{ width: 5, height: 5 }} />
          Beta · v0.9
        </span>

        <h1 style={{
          fontFamily: F.display, fontWeight: 380,
          fontSize: 44, lineHeight: 0.98, letterSpacing: '-0.035em',
          margin: '0 0 18px', textWrap: 'balance', minHeight: 100,
        }}>
          From <Typewriter
            words={['blueprint', 'job photos', '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: 15, lineHeight: 1.5,
          color: C.ink2, margin: '0 0 24px',
        }}>
          Estimado AI handles everything and produces a complete, branded estimate.
        </p>

        <div id="cta-mobile" style={{ marginBottom: 10 }}>
          <MobileEmailForm />
        </div>
        <div style={{
          fontFamily: F.mono, fontSize: 9.5, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: C.muted, marginBottom: 28,
        }}>
          7-day free trial · opens July 1 · no card required
        </div>

        {/* Live demo */}
        <LiveDemo compact />

        <div style={{ marginTop: 22, display: 'inline-flex', alignItems: 'center', gap: 12 }}>
          <AvatarStack size={28} count={5} overlap={8} />
          <span style={{ fontSize: 12.5, color: C.ink2 }}>
            <strong style={{ color: C.ink, fontWeight: 500 }}>1,284 contractors</strong> on the list
          </span>
        </div>
      </div>
    </div>
  );
}

// Stacked email form — input above button on mobile
function MobileEmailForm({ variant = 'light', cta = 'Get early access', placeholder = 'you@yourcompany.com' }) {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle');
  const dark = variant === 'dark';

  const submit = (e) => {
    e?.preventDefault?.();
    if (!email || !/.+@.+\..+/.test(email)) return;
    setStatus('loading');
    // Stage 1: fire just the email (captures the lead even if they bail).
    postLead({ email: email.trim(), stage: 'email_only' });
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('open-waitlist-modal', { detail: { email: email.trim() } }));
      setStatus('idle');
    }, 200);
  };

  if (false && status === 'done') {
    return (
      <div style={{
        padding: '14px 16px',
        background: dark ? 'rgba(255,255,255,0.06)' : C.paper2,
        border: `1px solid ${dark ? 'rgba(255,255,255,0.16)' : C.rule}`,
        borderRadius: 12,
        textAlign: 'left',
        display: 'flex', alignItems: 'center', gap: 12,
        color: dark ? C.paper : C.ink,
      }}>
        <CheckBadge color={dark ? C.paper : C.ink} />
        <div>
          <div style={{ fontSize: 14, fontWeight: 500 }}>You're on the list.</div>
          <div style={{ fontFamily: F.mono, fontSize: 10.5, color: dark ? 'rgba(250,248,243,0.6)' : C.muted, marginTop: 2 }}>
            Confirmation sent to {email.toLowerCase()}
          </div>
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder={placeholder}
        style={{
          width: '100%',
          padding: '14px 16px',
          background: dark ? 'rgba(255,255,255,0.06)' : '#fff',
          color: dark ? C.paper : C.ink,
          border: `1px solid ${dark ? 'rgba(255,255,255,0.16)' : C.rule}`,
          borderRadius: 12,
          fontFamily: F.ui, fontSize: 15, outline: 'none',
          boxSizing: 'border-box',
        }}
      />
      <button type="submit" style={{
        width: '100%',
        padding: '14px 16px',
        background: dark ? C.paper : C.ink,
        color: dark ? C.ink : C.paper,
        border: 'none', borderRadius: 12,
        fontFamily: F.ui, fontSize: 15, fontWeight: 500,
        cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }}>
        {status === 'loading' ? 'Adding…' : cta}
        {status !== 'loading' && <Arrow color={dark ? C.ink : C.paper} />}
      </button>
    </form>
  );
}

function OM_Stats() {
  const stats = [
    { big: '5 min',  label: 'Blueprint → bid' },
    { big: '5,000+', label: 'Hrs of manual takeoffs in training' },
    { big: '20–70×', label: 'Faster than by hand' },
  ];
  return (
    <div style={{ padding: '24px 20px 40px' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
        borderTop: `1px solid ${C.ink}`,
      }}>
        {stats.map((s, i) => (
          <div key={i} style={{
            padding: '20px 10px 20px 0',
            paddingLeft: i === 0 ? 0 : 10,
            borderRight: i < 2 ? `1px solid ${C.rule}` : 'none',
          }}>
            <div style={{
              fontFamily: F.display, fontWeight: 360, fontSize: 30,
              lineHeight: 0.95, letterSpacing: '-0.035em', margin: '0 0 8px',
            }}>{s.big}</div>
            <div style={{ fontSize: 11, color: C.muted, lineHeight: 1.4 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function OM_BuiltDifferent() {
  const cards = [
    { tag: '01', title: 'Not a chatbot wrapper.',     desc: 'Prices come from our database — synced with Home Depot, regionally adjusted, current.', foot: 'Real pricing, not LLM guesses' },
    { tag: '02', title: 'Built on 1,438 takeoffs.',   desc: 'Evaluation corpus is 1,438 manual takeoffs by a civil engineering team. Every model change benchmarked.', foot: 'No competitor has this' },
    { tag: '03', title: 'Thinks like a contractor.', desc: 'Scope · MEP · demo · sequencing · permits · risk. Modeled on how senior estimators think.',           foot: 'Catches what manual misses' },
    { tag: '04', title: 'Automatic follow-up.',      desc: 'Estimado nudges your clients after you send the estimate — so you stay top of mind without lifting a finger.', foot: 'Closes the loop for you' },
  ];
  return (
    <div style={{ padding: '0 20px 56px' }}>
      <MonoLabel>Built different</MonoLabel>
      <h2 style={{
        fontFamily: F.display, fontWeight: 400, fontSize: 36,
        letterSpacing: '-0.025em', margin: '10px 0 24px', lineHeight: 1.05, textWrap: 'balance',
      }}>
        Why we'll get it right<br/>
        <span style={{ color: C.muted }}>when others get it close.</span>
      </h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {cards.map((c, i) => (
          <div key={i} style={{
            background: C.paper2, border: `1px solid ${C.rule}`, borderRadius: 16,
            padding: '20px 18px',
          }}>
            <span style={{
              fontFamily: F.display, fontWeight: 380, fontSize: 24,
              color: 'rgba(21,20,15,0.22)', letterSpacing: '-0.02em',
            }}>{c.tag}</span>
            <h3 style={{
              fontFamily: F.display, fontWeight: 400, fontSize: 22, letterSpacing: '-0.02em',
              margin: '8px 0 10px', lineHeight: 1.2,
            }}>{c.title}</h3>
            <p style={{ fontSize: 14, lineHeight: 1.5, color: C.ink2, margin: '0 0 16px' }}>{c.desc}</p>
            <div style={{
              fontFamily: F.mono, fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase',
              color: C.muted, borderTop: `1px solid ${C.rule}`, paddingTop: 12,
            }}>{c.foot}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function OM_PhotoQuote() {
  return (
    <div style={{ background: C.paper2, padding: '48px 20px', borderTop: `1px solid ${C.rule}`, borderBottom: `1px solid ${C.rule}` }}>
      <MonoLabel>Who built this</MonoLabel>
      <blockquote style={{
        margin: '12px 0 20px',
        fontFamily: F.display, fontWeight: 400, fontSize: 24,
        letterSpacing: '-0.02em', lineHeight: 1.2, 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: 12 }}>
        <img src="assets/wagner-headshot.png" alt="Wagner Vieitas"
          style={{ width: 44, height: 44, borderRadius: 999, objectFit: 'cover', objectPosition: 'center top', background: C.paper2 }} />
        <div style={{ fontFamily: F.ui, fontSize: 13 }}>
          <div style={{ fontWeight: 500, color: C.ink }}>Wagner Vieitas</div>
          <div style={{ color: C.muted, fontSize: 11.5, marginTop: 1 }}>Founder, Estimado · Contractor Level Up</div>
        </div>
      </div>
    </div>
  );
}

function OM_HowItWorks() {
  const steps = [
    { tag: 'Step 01', title: 'Drop everything in.',     desc: 'Blueprints, photos, 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. Estimado tells you when the customer opens it, or goes silent.' },
  ];
  return (
    <div style={{ padding: '56px 20px' }}>
      <MonoLabel>How it works</MonoLabel>
      <h2 style={{
        fontFamily: F.display, fontWeight: 400, fontSize: 36,
        letterSpacing: '-0.025em', margin: '10px 0 24px', lineHeight: 1.05,
      }}>The 5-minute workflow.</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            padding: '18px 18px',
            border: `1px solid ${C.rule}`, borderRadius: 16,
            background: C.paper2,
          }}>
            <MonoLabel>{s.tag}</MonoLabel>
            <h3 style={{
              fontFamily: F.display, fontWeight: 400, fontSize: 22, letterSpacing: '-0.02em',
              margin: '10px 0 8px', lineHeight: 1.2,
            }}>{s.title}</h3>
            <p style={{ fontSize: 14, lineHeight: 1.5, color: C.ink2, margin: 0 }}>{s.desc}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function OM_TestimonialSlab() {
  return (
    <div style={{
      padding: '56px 20px',
      background: C.ink, color: C.paper,
      borderTop: `1px solid ${C.rule}`, borderBottom: `1px solid ${C.rule}`,
    }}>
      <MonoLabel color="rgba(250,248,243,0.55)">Beta cohort · feedback</MonoLabel>
      <blockquote style={{
        margin: '14px 0 24px',
        fontFamily: F.display, fontWeight: 380,
        fontSize: 30, letterSpacing: '-0.025em', lineHeight: 1.2,
        color: C.paper, 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: 12 }}>
        <img src="assets/daniel-r.png" alt="Daniel R."
          style={{ width: 44, height: 44, borderRadius: 999, objectFit: 'cover', objectPosition: 'center 25%' }} />
        <div style={{ fontFamily: F.ui, fontSize: 13 }}>
          <div style={{ fontWeight: 500, color: C.paper }}>Daniel R.</div>
          <div style={{ color: 'rgba(250,248,243,0.55)', fontSize: 11.5, marginTop: 1 }}>GC · Tampa, FL · Beta user</div>
        </div>
      </div>
    </div>
  );
}

function OM_Pricing() {
  return (
    <div style={{ padding: '56px 20px' }}>
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <MonoLabel>Pricing · founding cohort</MonoLabel>
        <h2 style={{
          fontFamily: F.display, fontWeight: 400, fontSize: 36,
          letterSpacing: '-0.025em', margin: '10px 0 12px',
        }}>Lock in founding pricing.</h2>
        <p style={{ fontSize: 14.5, color: C.ink2, margin: 0, lineHeight: 1.5 }}>
          Waitlist signups get the founding-contractor rate locked in, even after public prices go up.
        </p>
      </div>

      <div style={{
        background: C.paper2,
        border: `1px solid ${C.rule}`, borderRadius: 18,
        padding: '24px 22px 22px',
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
          <span style={{ fontFamily: F.display, fontWeight: 400, fontSize: 19, color: C.ink }}>
            Founding contractor
          </span>
          <span style={{
            padding: '3px 8px', borderRadius: 999,
            background: C.paper, border: `1px solid ${C.rule}`, color: C.ink2,
            fontFamily: F.mono, fontSize: 9.5, letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>Waitlist only</span>
        </div>

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

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 22 }}>
          {[
            '7-day free trial at launch',
            'Unlimited estimates',
            'Follow-up tracking on every PDF',
            'Priority beta support',
          ].map((t) => (
            <div key={t} style={{ display: 'flex', gap: 10, 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: 13.5, color: C.ink2 }}>{t}</span>
            </div>
          ))}
        </div>

        <a href="#cta-mobile" 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: 14,
          textDecoration: 'none', cursor: 'pointer',
        }}>Get founding pricing <Arrow color={C.paper} /></a>
      </div>
    </div>
  );
}

function OM_FinalCTA() {
  return (
    <div style={{
      padding: '56px 20px',
      borderTop: `1px solid ${C.rule}`,
      textAlign: 'center',
    }}>
      <MonoLabel>The waitlist · estimado.com</MonoLabel>
      <h2 style={{
        fontFamily: F.display, fontWeight: 380, fontSize: 48,
        letterSpacing: '-0.03em', margin: '14px 0 16px', lineHeight: 1.0, textWrap: 'balance',
      }}>
        Get in before<br/>everyone else does.
      </h2>
      <p style={{ fontSize: 15, color: C.ink2, margin: '0 auto 24px', lineHeight: 1.5 }}>
        Beta opens July 1. Public trial opens July 10. We'll email you the morning it's your turn.
      </p>
      <MobileEmailForm />
      <div style={{ marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 12 }}>
        <AvatarStack size={26} count={5} overlap={8} />
        <span style={{ fontSize: 12, color: C.ink2 }}>
          <strong style={{ color: C.ink, fontWeight: 500 }}>1,284</strong> · 54 beta spots left
        </span>
      </div>
    </div>
  );
}

function OM_Footer() {
  return (
    <div style={{
      borderTop: `1px solid ${C.rule}`,
      padding: '32px 20px 24px',
      background: C.paper2,
    }}>
      <Lockup size={20} />
      <div style={{
        marginTop: 14, fontFamily: F.mono, fontSize: 10, letterSpacing: '0.08em',
        textTransform: 'uppercase', color: C.muted, lineHeight: 1.7, marginBottom: 24,
      }}>
        hello@estimado.com<br/>
        Made in Florida 🇺🇸
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          ['Product', ['Takeoff', 'Remodeling', 'Follow-ups']],
          ['Company', ['About', 'Careers', 'Press']],
          ['Trades',  ['Remodelers', 'Flooring', 'GCs']],
        ].map(([title, items], i) => (
          <div key={i}>
            <div style={{ fontFamily: F.mono, fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.muted, marginBottom: 10 }}>{title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {items.map((it) => (
                <a key={it} href="#" style={{ color: C.ink, textDecoration: 'none', fontSize: 12.5 }}>{it}</a>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Bottom bar — legal links + copyright + social */}
      <div style={{
        marginTop: 28, paddingTop: 18,
        borderTop: `1px solid ${C.rule}`,
        display: 'flex', flexDirection: 'column', gap: 14,
        fontFamily: F.mono, fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: C.muted,
      }}>
        <div style={{ display: 'flex', gap: 18 }}>
          <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>
        </div>
        <span>© 2026 Estimado AI · All rights reserved</span>
        <div style={{ marginTop: 4 }}>
          <SocialLinks size={19} gap={18} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MobileLanding });