// Homepage sections (Industrial Premium) — uses globals from _shared.jsx

const { C, F, Stamp, Eyebrow, SectionTitle, Btn, JumpNav } = window;

const SIM_FORMSPREE_ID = 'YOUR_SIM_FORM_ID'; // swap in from formspree.io

function Hero() {
  return (
    <section id="overview" className="hero-viewport" style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', height: '100%' }}>
        <div style={{ padding: '32px 40px 32px', borderRight: `2px solid ${C.ink}`, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          <div style={{ marginBottom: 18 }}>
            <Stamp dark>GET FOUND, TRUSTED & CHOSEN</Stamp>
          </div>
          <h1 style={{
            fontFamily: F.display, fontSize: 'clamp(40px, 5vw, 88px)', lineHeight: 0.9, letterSpacing: '-0.025em',
            color: C.ink, margin: 0, fontWeight: 900, textTransform: 'uppercase', overflowWrap: 'break-word', flex: 1,
          }}>
            We Build the Systems That Get Good Clients to Hire You.
          </h1>
          <p style={{
            fontFamily: F.sans, fontSize: 15, lineHeight: 1.5, color: C.text,
            margin: '18px 0 24px', maxWidth: 480, fontWeight: 400,
          }}>
            We set up and manage the lead generation, automations, CRM, and sales assets contractors need to turn local demand into booked jobs.
          </p>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <Btn primary href="/book-scoping-call" style={{ flex: 1, justifyContent: 'center' }}>TALK TO US →</Btn>
            <Btn href="#systems" style={{ flex: 1, justifyContent: 'center' }}>SEE WHAT WE INSTALL</Btn>
          </div>
          <p style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: '0.12em', color: C.muted, margin: '14px 0 0', textTransform: 'uppercase' }}>
            One trade · One city · One operator.
          </p>
        </div>
        <div style={{ position: 'relative', overflow: 'hidden', background: C.ink, minWidth: 0 }}>
          <img
            src="img/home-hero-crew.png" alt="Contractor on the job"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(22,22,26,0) 50%, rgba(22,22,26,0.55) 100%)' }} />
          <div style={{ position: 'absolute', top: 20, right: 20 }}>
            <Stamp color={C.hi} dark>CONTRACTOR SYSTEMS</Stamp>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeJumpNav() {
  return (
    <JumpNav links={[
      { label: 'The Problem',     href: '#problem' },
      { label: 'What We Install', href: '#systems' },
      { label: 'Territory',       href: '#territory' },
      { label: 'Simulator',       href: '#simulator' },
      { label: 'Pricing',         href: '#pricing-band' },
      { label: 'FAQ',             href: '#faq-home' },
    ]} />
  );
}

function Blueprint() {
  return (
    <section id="blueprint" style={{ background: C.ink, color: C.panel, padding: '88px 40px', position: 'relative', borderBottom: `2px solid ${C.ink}` }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)`,
        backgroundSize: '40px 40px',
      }} />
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: 56, alignItems: 'start' }}>
        <div style={{ minWidth: 0 }}>
          <Stamp color={C.hi}>DRAWING DTG-001</Stamp>
          <h2 style={{ fontFamily: F.display, fontSize: 'clamp(48px, 6vw, 88px)', lineHeight: 0.88, letterSpacing: '-0.025em', color: C.panel, margin: '20px 0 16px', textTransform: 'uppercase' }}>
            The pipeline<br /><span style={{ color: C.hi }}>blueprint.</span>
          </h2>
          <div style={{ fontFamily: F.mono, fontSize: 11, color: C.faint, letterSpacing: 0.4, marginBottom: 24 }}>
            HOW A STRANGER BECOMES A PAID INSTALL ↓
          </div>
          <p style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.55, color: 'rgba(242,239,233,0.78)', maxWidth: 360, margin: 0 }}>
            Six steps. Each one measurable. Each one tunable. The system runs whether you're on a roof or asleep.
          </p>
        </div>
        <div style={{ minWidth: 0 }}>
          {[
            { code: 'A', label: 'Stranger sees ad', sub: 'Meta + Google + LSA', metric: '~3,200/mo' },
            { code: 'B', label: 'Lands on authority site', sub: 'Built for conversion', metric: '5.2% CTR' },
            { code: 'C', label: 'AI receptionist answers', sub: '24/7 qualification', metric: '< 12s' },
            { code: 'D', label: 'Booked into your calendar', sub: 'CRM-synced', metric: '38% rate' },
            { code: 'E', label: 'Follow-up nurture', sub: 'SMS + email reinforcement', metric: '7 touches' },
            { code: 'F', label: 'Closed install', sub: 'Reinforced monthly', metric: '34% close' },
          ].map((step, i, arr) => (
            <div key={step.code} style={{
              display: 'grid', gridTemplateColumns: '40px 1fr auto',
              gap: 16, alignItems: 'center', padding: '16px 0',
              borderBottom: i < arr.length - 1 ? `1px dashed rgba(255,255,255,0.18)` : 'none',
            }}>
              <div style={{
                width: 36, height: 36, border: `1.5px solid ${C.hi}`, color: C.hi,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: F.display, fontSize: 18, letterSpacing: -0.4,
              }}>{step.code}</div>
              <div>
                <div style={{ fontFamily: F.display, fontSize: 18, color: C.panel, letterSpacing: -0.2, textTransform: 'uppercase' }}>{step.label}</div>
                <div style={{ fontFamily: F.mono, fontSize: 11, color: C.faint, letterSpacing: 0.4, marginTop: 2 }}>{step.sub}</div>
              </div>
              <div style={{ fontFamily: F.mono, fontSize: 12, color: C.hi, letterSpacing: 1.2, fontWeight: 700 }}>{step.metric}</div>
            </div>
          ))}
          <div style={{
            marginTop: 20, padding: '16px 18px',
            border: `2px solid ${C.hi}`, color: C.hi,
            fontFamily: F.mono, fontSize: 12, letterSpacing: 1.4, fontWeight: 700,
            display: 'flex', justifyContent: 'space-between',
          }}>
            <span>● NET RESULT</span>
            <span>~9 INSTALLS / MONTH</span>
          </div>
          <div style={{ marginTop: 12, fontFamily: F.mono, fontSize: 9, color: 'rgba(242,239,233,0.35)', letterSpacing: 0.8, lineHeight: 1.5 }}>
            Median metrics across live DTG operator deployments, Q1 2025–Q2 2026. Results vary by trade, metro, and ad spend.
          </div>
        </div>
      </div>
    </section>
  );
}

function Problem() {
  return (
    <section id="problem" style={{ padding: '100px 40px', background: C.panel, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, gap: 48, flexWrap: 'wrap' }}>
        <SectionTitle eyebrow="Why good contractors lose jobs">The revenue roller coaster<br />ends here.</SectionTitle>
        <p style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.5, color: C.muted, maxWidth: 360, margin: 0 }}>
          Good referrals keep you busy. They don't give you control. When a referral month goes quiet, there's nothing to turn up.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', border: `2px solid ${C.ink}` }}>
        {[
          { code: 'F-001', title: 'Referral Dependency', body: "You can't scale someone else's recommendation. When your clients get busy or move, your pipeline goes quiet with no warning.", stat: '0%', statLabel: 'control' },
          { code: 'F-002', title: 'Missed Call', body: "You're on a job. Phone rings. By the time you call back, they've already talked to someone else. Most contractors lose leads before they ever give a bad quote.", stat: 'lost', statLabel: 'to speed' },
          { code: 'F-003', title: 'Cold Estimates', body: "You sent the quote. They went quiet. No tracking. No follow-up. No way to know if they're still looking or already signed someone else.", stat: 'silent', statLabel: 'pipeline' },
        ].map((p, i) => (
          <div key={p.code} style={{
            borderRight: i < 2 ? `2px solid ${C.ink}` : 'none',
            background: i === 1 ? C.ink : 'transparent',
            color: i === 1 ? C.panel : C.ink,
            display: 'flex', flexDirection: 'column',
            padding: 36, minHeight: 360, position: 'relative',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
              <Stamp color={i === 1 ? C.hi : C.hiDark}>{p.code}</Stamp>
              <span style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: i === 1 ? C.hi : C.hiDark, fontWeight: 700 }}>● FAILED</span>
            </div>
            <h3 style={{
              fontFamily: F.display, fontSize: 40, lineHeight: 0.95, letterSpacing: -1,
              margin: '0 0 20px', textTransform: 'uppercase',
            }}>{p.title}</h3>
            <p style={{ fontFamily: F.sans, fontSize: 15, lineHeight: 1.55, opacity: 0.85, margin: '0 0 32px', flexGrow: 1 }}>{p.body}</p>
            <div style={{ paddingTop: 20, borderTop: `1px solid ${i === 1 ? 'rgba(255,255,255,0.2)' : C.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, opacity: 0.6 }}>{p.statLabel.toUpperCase()}</span>
              <span style={{ fontFamily: F.display, fontSize: 40, letterSpacing: -1, color: i === 1 ? C.hi : C.hiDark }}>{p.stat}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Systems() {
  const systems = [
    { id: '01', t: 'Authority Site', sub: 'SEO · conversion · trust' },
    { id: '02', t: 'Lead Generation', sub: 'Meta · Google · LSA' },
    { id: '03', t: 'AI Receptionist', sub: '24/7 · book · summary' },
    { id: '04', t: 'CRM', sub: 'Pipeline · forecast · index' },
    { id: '05', t: 'Automations', sub: 'Routing · triggers' },
    { id: '06', t: 'Follow-Ups', sub: 'SMS · nurture · re-engage' },
    { id: '07', t: 'Content', sub: 'Showcases · scripts · brand' },
    { id: '08', t: 'Merchandise', sub: 'Apparel · hangers · wraps' },
    { id: '09', t: 'Integrations', sub: 'API · accounting · calendar' },
  ];
  return (
    <section id="systems" style={{ padding: '100px 40px' }}>
      <p style={{ fontFamily: F.mono, fontSize: 12, letterSpacing: 1.8, color: C.hi, fontWeight: 700, margin: '0 0 24px', textTransform: 'uppercase' }}>
        Not a campaign. Not a lead package. A complete sales system around your trade and your service area.
      </p>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56 }}>
        <SectionTitle eyebrow="The stack">We'll build your<br />sales machine.</SectionTitle>
        <div style={{ display: 'flex', gap: 12 }}>
          <Stamp color={C.ink} dark>● ALL ONLINE</Stamp>
          <Stamp color={C.ink}>9 NODES</Stamp>
          <Stamp color={C.ink}>18 LINKS</Stamp>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', border: `2px solid ${C.ink}` }}>
        {systems.map((s, i) => (
          <div key={s.id} style={{
            padding: 28, position: 'relative', minHeight: 180, background: C.panel,
            borderRight: (i + 1) % 3 !== 0 ? `2px solid ${C.ink}` : 'none',
            borderBottom: i < 6 ? `2px solid ${C.ink}` : 'none',
          }}>
            <div style={{ position: 'absolute', top: 8, right: 8, width: 16, height: 16, borderTop: `2px solid ${C.hi}`, borderRight: `2px solid ${C.hi}` }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
              <span style={{ fontFamily: F.display, fontSize: 56, letterSpacing: -1.4, color: C.hi, lineHeight: 0.9 }}>{s.id}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: F.mono, fontSize: 9, letterSpacing: 1.4, color: C.muted, fontWeight: 600 }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: '#22c55e' }} />ONLINE
              </span>
            </div>
            <div style={{ fontFamily: F.display, fontSize: 26, color: C.ink, letterSpacing: -0.5, textTransform: 'uppercase', lineHeight: 1, marginBottom: 8 }}>{s.t}</div>
            <div style={{ fontFamily: F.mono, fontSize: 11, color: C.muted, letterSpacing: 0.4 }}>{s.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Phases() {
  return (
    <section id="phases" style={{ padding: '100px 40px', background: C.ink, color: C.panel }}>
      <SectionTitle eyebrow="Deployment timeline" dark>Three phases.<br /><span style={{ color: C.hi }}>Zero guesswork.</span></SectionTitle>
      <div style={{ marginBottom: 56, padding: 24, border: `1px solid rgba(255,255,255,0.18)` }}>
        <div data-phase-week-axis style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16, fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: C.faint }}>
          <span>WEEK 1</span><span>WK 2</span><span>WK 3</span><span>WK 4</span><span>WK 5</span><span>WK 8</span><span>ONGOING →</span>
        </div>
        <div data-phase-chart="" style={{ position: 'relative', height: 148 }}>
          {[0, 1, 2, 3, 4, 5, 6].map(w => (
            <div key={w} style={{ position: 'absolute', top: 0, bottom: 0, left: `${w * 14.28}%`, width: 1, background: 'rgba(255,255,255,0.08)' }} />
          ))}
          {[
            { l: 'Kickoff', start: 0, end: 1, color: 'rgba(255,255,255,0.35)', top: 8 },
            { l: 'Foundation', start: 0, end: 1, color: C.hi, top: 46 },
            { l: 'Ads live (day 3)', start: 0.43, end: 2, color: C.caution, top: 84 },
            { l: 'Optimize', start: 2, end: 7, color: '#7CFFB2', top: 122, dashed: true },
          ].map(b => (
            <div key={b.l} style={{
              position: 'absolute', top: b.top, height: 24,
              left: `${b.start * 14.28}%`, width: `${(b.end - b.start) * 14.28}%`,
              background: b.dashed ? `repeating-linear-gradient(90deg, ${b.color} 0 8px, transparent 8px 14px)` : b.color,
              border: b.dashed ? `1px solid ${b.color}` : 'none',
              display: 'flex', alignItems: 'center', paddingLeft: 12,
              fontFamily: F.mono, fontSize: 11, letterSpacing: 1.2, color: b.dashed ? b.color : C.ink, fontWeight: 700,
            }}>{b.l.toUpperCase()}</div>
          ))}
        </div>
        {/* Mobile-only vertical-stacked timeline (CSS toggles visibility ≤768px) */}
        <div data-phase-chart-mobile style={{ display: 'none', flexDirection: 'column', gap: 14 }}>
          {[
            { l: 'Kickoff',           span: 'Week 1',     pct: 14,  color: 'rgba(255,255,255,0.35)' },
            { l: 'Foundation',        span: 'Week 1',     pct: 14,  color: C.hi },
            { l: 'Ads live (day 3)',  span: 'Wk 1 → Wk 2', pct: 22, color: C.caution },
            { l: 'Optimize',          span: 'Wk 2 → 8+',  pct: 72,  color: '#7CFFB2', dashed: true },
          ].map(b => (
            <div key={b.l}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6, fontFamily: F.mono, fontSize: 10, letterSpacing: 1.2, color: C.faint, fontWeight: 700 }}>
                <span style={{ color: C.panel }}>{b.l.toUpperCase()}</span>
                <span>{b.span.toUpperCase()}</span>
              </div>
              <div style={{
                height: 14,
                width: `${b.pct}%`,
                background: b.dashed ? `repeating-linear-gradient(90deg, ${b.color} 0 8px, transparent 8px 14px)` : b.color,
                border: b.dashed ? `1px solid ${b.color}` : 'none',
              }} />
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {[
          { n: '01', t: 'Kickoff', dur: 'WEEK 1', body: 'Contract signed. Market research and target persona locked. Everything in place before day 2.', tasks: ['Market + competitor audit', 'ICP definition', 'Asset + credential handoff', 'Goals + KPI alignment'] },
          { n: '02', t: 'Foundation', dur: 'WEEK 1', body: 'Kaching CRM, automations, creatives, and AI receptionist installed. Ads go live by day 3 of week 1.', tasks: ['Kaching CRM setup', 'Follow-up automations', 'Ad creatives + landing pages', 'Ads live by day 3'] },
          { n: '03', t: 'Optimize', dur: 'WEEK 2', body: 'Leads flowing from day 3. Week 2 compounds efficiency — tighter audiences, lower CPL, sharper close rates.', tasks: ['CPL reduction', 'Audience expansion', 'Booking-rate tuning', 'Close-rate playbooks'] },
          { n: '04', t: 'Compound', dur: 'WEEK 3 → ON', body: 'Stack compounds week over week. Monthly reviews reinforce what\'s working and eliminate what isn\'t.', tasks: ['Spend scaling', 'Seasonal adjustments', 'Monthly reinforcement reviews', 'Territory defense'] },
        ].map(p => (
          <div key={p.n} style={{ background: C.rebar, border: `1px solid rgba(255,255,255,0.14)`, display: 'flex', flexDirection: 'column', padding: 32 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24, paddingBottom: 24, borderBottom: `1px solid rgba(255,255,255,0.14)` }}>
              <span style={{ fontFamily: F.display, fontSize: 80, letterSpacing: -2, color: C.hi, lineHeight: 0.85 }}>{p.n}</span>
              <Stamp color={C.hi}>{p.dur}</Stamp>
            </div>
            <h3 style={{ fontFamily: F.display, fontSize: 28, color: C.panel, letterSpacing: -0.6, textTransform: 'uppercase', margin: '0 0 16px', lineHeight: 0.95 }}>{p.t}</h3>
            <p style={{ fontFamily: F.sans, fontSize: 14, lineHeight: 1.5, color: C.faint, margin: '0 0 24px' }}>{p.body}</p>
            <div style={{ paddingTop: 20, borderTop: `1px solid rgba(255,255,255,0.14)`, marginTop: 'auto' }}>
              {p.tasks.map(t => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: F.mono, fontSize: 12, color: C.panel, padding: '4px 0', letterSpacing: 0.2 }}>
                  <span style={{ color: C.hi }}>▸</span>{t}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

const SIM_PLANS = [
  { label: 'Launch', fee: 1500, minSpend: 1500, cpl: 24, answerRate: 50, closeRate: 22, tag: '1 channel · core stack' },
  { label: 'Grow',   fee: 2500, minSpend: 3000, cpl: 20, answerRate: 65, closeRate: 27, tag: 'Google + Meta · AI receptionist · social' },
  { label: 'Scale',  fee: 3500, minSpend: 3000, cpl: 16, answerRate: 68, closeRate: 30, tag: 'All channels · video content · growth ops' },
];

function Simulator() {
  const [planIdx, setPlanIdx] = React.useState(1);
  const plan = SIM_PLANS[planIdx];
  const [adSpend,    setAdSpend]    = React.useState(plan.minSpend);
  const [cpl,        setCpl]        = React.useState(plan.cpl);
  const [answerRate, setAnswerRate] = React.useState(plan.answerRate);
  const [book,       setBook]       = React.useState(45);
  const [close,      setClose]      = React.useState(plan.closeRate);
  const [deal,       setDeal]       = React.useState(8500);
  const [margin,     setMargin]     = React.useState(32);
  const [stress,     setStress]     = React.useState(false);
  const [advanced,   setAdvanced]   = React.useState(true);
  const [hasInteracted, setHasInteracted] = React.useState(false);
  const [simEmail,    setSimEmail]    = React.useState('');
  const [simPhone,    setSimPhone]    = React.useState('');
  const [emailSent,   setEmailSent]   = React.useState(false);
  const [emailSending, setEmailSending] = React.useState(false);
  const sf = stress ? 0.7 : 1;

  const applyPlan = (i) => {
    const p = SIM_PLANS[i];
    setPlanIdx(i);
    setCpl(p.cpl);
    setAnswerRate(p.answerRate);
    setClose(p.closeRate);
    if (adSpend < p.minSpend) setAdSpend(p.minSpend);
  };

  const leads    = Math.floor(adSpend / cpl);
  const answered = Math.floor(leads * (answerRate / 100) * sf);
  const booked   = Math.floor(answered * (book / 100));
  const closed   = Math.floor(booked * (close / 100) * sf);
  const revenue  = closed * deal;
  const profit   = revenue * (margin / 100) - adSpend - plan.fee;
  const totalIn  = adSpend + plan.fee;
  const roi      = totalIn > 0 ? ((profit / totalIn) * 100).toFixed(0) : '0';

  const Slider = ({ label, value, onChange, min, max, step, prefix = '', suffix = '' }) => (
    <div style={{ marginBottom: 16 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5, fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: C.muted, textTransform: 'uppercase', fontWeight: 600 }}>
        <span>{label}</span><span style={{ color: C.ink, fontFamily: F.display, fontSize: 18, letterSpacing: -0.3 }}>{prefix}{value.toLocaleString()}{suffix}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={e => { setHasInteracted(true); onChange(+e.target.value); }} aria-label={label} style={{ width: '100%', accentColor: C.hi }} />
    </div>
  );

  const handleSimEmail = async () => {
    if (!simEmail || emailSending) return;
    setEmailSending(true);
    try {
      await fetch(`https://formspree.io/f/${SIM_FORMSPREE_ID}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          email: simEmail,
          phone: simPhone || 'not provided',
          plan: plan.label,
          adSpend: `$${adSpend.toLocaleString()}/mo`,
          cpl: `$${cpl}`, answerRate: `${answerRate}%`,
          bookingRate: `${book}%`, closeRate: `${close}%`,
          dealValue: `$${deal.toLocaleString()}`, margin: `${margin}%`,
          stress: stress ? 'ON (×0.7)' : 'OFF',
          leads, answered, booked, closed,
          revenue: `$${revenue.toLocaleString()}`,
          netProfit: `${profit >= 0 ? '+' : ''}$${Math.abs(Math.round(profit)).toLocaleString()}/mo`,
        }),
      });
    } catch {}
    setEmailSent(true);
    setEmailSending(false);
  };

  const funnelSteps = [
    { label: 'Leads',    value: leads,    note: `${adSpend.toLocaleString()} ÷ $${cpl}` },
    { label: 'Answered', value: answered, note: `${answerRate}% answer rate${stress ? ' ×0.7' : ''}` },
    { label: 'Booked',   value: booked,   note: `${book}% booking rate` },
    { label: 'Closed',   value: closed,   note: `${close}% close rate${stress ? ' ×0.7' : ''}` },
  ];

  return (
    <section id="simulator" style={{ padding: '100px 40px', borderBottom: `2px solid ${C.ink}` }}>
      <SectionTitle eyebrow="Revenue model">Run the numbers.<br />Stress the model.</SectionTitle>

      {/* Plan picker */}
      <div style={{ marginBottom: 12, padding: '10px 20px', background: C.hi, color: C.ink, fontFamily: F.mono, fontSize: 10, letterSpacing: 1.6, fontWeight: 700, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span>// STEP 1: SELECT YOUR PLAN BELOW</span>
        <span>↓</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `2px solid ${C.ink}`, marginBottom: 32 }}>
        {SIM_PLANS.map((p, i) => (
          <button key={p.label} onClick={() => applyPlan(i)} style={{
            padding: '16px 20px', background: i === planIdx ? C.ink : C.panel,
            color: i === planIdx ? C.hi : C.muted,
            border: 'none', borderRight: i < 2 ? `2px solid ${C.ink}` : 'none',
            cursor: 'pointer', textAlign: 'left',
          }}>
            <div style={{ width: 8, height: 8, borderRadius: '50%', background: i === planIdx ? C.hi : 'transparent', border: `1px solid ${i === planIdx ? C.hi : C.rule}`, marginBottom: 8 }} />
            <div style={{ fontFamily: F.display, fontSize: 20, letterSpacing: -0.4, textTransform: 'uppercase', marginBottom: 4, color: i === planIdx ? C.hi : C.ink }}>{p.label}</div>
            <div style={{ fontFamily: F.mono, fontSize: 9, letterSpacing: 1.2, color: i === planIdx ? 'rgba(242,239,233,0.6)' : C.faint }}>${p.fee.toLocaleString()}/mo · {p.tag}</div>
          </button>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', border: `2px solid ${C.ink}` }}>
        {/* Inputs */}
        <div style={{ padding: 32, background: C.panel, borderRight: `2px solid ${C.ink}` }}>
          <div style={{ marginBottom: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
            <Stamp color={C.ink}>INPUT PARAMETERS</Stamp>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <button onClick={() => setAdvanced(a => !a)} style={{
                background: advanced ? C.ink : 'transparent',
                color: advanced ? C.hi : C.muted,
                border: `1px solid ${advanced ? C.hi : C.rule}`,
                fontFamily: F.mono, fontSize: 9, letterSpacing: 1.2, fontWeight: 700, padding: '5px 10px', cursor: 'pointer',
                borderRadius: 99, display: 'inline-flex', alignItems: 'center', gap: 5,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: advanced ? C.hi : 'transparent', border: `1px solid ${advanced ? C.hi : C.muted}`, flexShrink: 0 }} />
                {advanced ? 'ADVANCED' : 'QUICK'}
              </button>
              <button onClick={() => setStress(s => !s)} style={{
                background: stress ? C.ink : 'transparent',
                color: stress ? C.caution : C.muted,
                border: `1px solid ${stress ? C.caution : C.rule}`,
                fontFamily: F.mono, fontSize: 9, letterSpacing: 1.2, fontWeight: 700, padding: '5px 10px', cursor: 'pointer',
                borderRadius: 99, display: 'inline-flex', alignItems: 'center', gap: 5,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: stress ? C.caution : 'transparent', border: `1px solid ${stress ? C.caution : C.muted}`, flexShrink: 0 }} />
                STRESS {stress ? 'ON ×0.7' : 'OFF'}
              </button>
            </div>
          </div>
          <Slider label="Monthly ad spend" value={adSpend} onChange={setAdSpend} min={plan.minSpend} max={15000} step={100} prefix="$" />
          {advanced && (
            <>
              <Slider label="Cost per lead" value={cpl} onChange={setCpl} min={5} max={120} step={1} prefix="$" />
              <Slider label="Answer rate" value={answerRate} onChange={setAnswerRate} min={20} max={95} step={1} suffix="%" />
              <Slider label="Booking rate" value={book} onChange={setBook} min={5} max={80} step={1} suffix="%" />
            </>
          )}
          <Slider label="Close rate" value={close} onChange={setClose} min={5} max={80} step={1} suffix="%" />
          <Slider label="Avg deal value" value={deal} onChange={setDeal} min={500} max={50000} step={500} prefix="$" />
          {advanced && (
            <Slider label="Profit margin" value={margin} onChange={setMargin} min={10} max={70} step={1} suffix="%" />
          )}
          {!advanced && (
            <div style={{ marginTop: 8, padding: '10px 14px', border: `1px dashed ${C.rule}`, fontFamily: F.mono, fontSize: 10, letterSpacing: 1.2, color: C.muted, fontWeight: 600, lineHeight: 1.5 }}>
              Showing 3 inputs. Switch to <span style={{ color: C.hi }}>ADVANCED</span> for CPL, answer rate, booking rate, and margin.
            </div>
          )}
        </div>

        {/* Output */}
        <div style={{ padding: 32, background: C.ink, color: C.panel }}>
          <div style={{ marginBottom: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Stamp color={C.hi}>● PROJECTED OUTPUT</Stamp>
            <Stamp color={C.hi}>{plan.label.toUpperCase()} · ${plan.fee.toLocaleString()}/MO</Stamp>
          </div>
          {stress && (
            <div style={{ marginBottom: 16, padding: '5px 10px', background: 'rgba(255,140,0,0.12)', border: `1px solid ${C.caution}`, fontFamily: F.mono, fontSize: 9, letterSpacing: 1.2, color: C.caution, fontWeight: 700, textTransform: 'uppercase' }}>
              ⚠ STRESS TEST ACTIVE · ×0.7 ANSWER + CLOSE
            </div>
          )}

          {/* Cash burn: explicit out-of-pocket breakdown */}
          <div style={{
            marginBottom: 18, padding: '14px 18px',
            border: `1px dashed ${C.hi}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8,
          }}>
            <div>
              <div style={{ fontFamily: F.mono, fontSize: 9, letterSpacing: 1.4, color: C.faint, fontWeight: 700, textTransform: 'uppercase', marginBottom: 4 }}>Your monthly cash out</div>
              <div style={{ fontFamily: F.mono, fontSize: 12, color: C.panel, letterSpacing: 0.4 }}>
                ${plan.fee.toLocaleString()} {plan.label.toLowerCase()} fee + ${adSpend.toLocaleString()} ad spend
              </div>
            </div>
            <div style={{ fontFamily: F.display, fontSize: 28, color: C.hi, letterSpacing: -0.6 }}>
              ${totalIn.toLocaleString()}<span style={{ fontSize: 13, letterSpacing: 0, color: C.faint }}>/mo</span>
            </div>
          </div>

          {/* Big numbers */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 20, marginBottom: 24 }}>
            <div>
              <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: C.faint, marginBottom: 4, textTransform: 'uppercase' }}>Net profit / mo</div>
              <div style={{ fontFamily: F.display, fontSize: 'clamp(32px, 8vw, 56px)', color: profit >= 0 ? C.hi : C.caution, letterSpacing: -2, lineHeight: 0.9 }}>${Math.abs(Math.round(profit)).toLocaleString()}{profit < 0 ? ' loss' : ''}</div>
            </div>
            <div>
              <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: C.faint, marginBottom: 4, textTransform: 'uppercase' }}>ROI</div>
              <div style={{ fontFamily: F.display, fontSize: 'clamp(32px, 8vw, 56px)', color: C.panel, letterSpacing: -2, lineHeight: 0.9 }}>{roi}%</div>
            </div>
          </div>

          {/* Funnel */}
          <div style={{ marginBottom: 20 }}>
            <div style={{ fontFamily: F.mono, fontSize: 9, letterSpacing: 1.4, color: C.faint, marginBottom: 10, textTransform: 'uppercase' }}>Conversion funnel</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', border: `1px solid rgba(255,255,255,0.12)` }}>
              {funnelSteps.map((s, i) => (
                <div key={s.label} style={{ padding: '12px 10px', borderRight: i < 3 ? '1px solid rgba(255,255,255,0.12)' : 'none', textAlign: 'center' }}>
                  <div style={{ fontFamily: F.mono, fontSize: 8, letterSpacing: 1.2, color: 'rgba(242,239,233,0.4)', fontWeight: 700, marginBottom: 4, textTransform: 'uppercase' }}>{s.label}</div>
                  <div style={{ fontFamily: F.display, fontSize: 22, letterSpacing: -0.5, lineHeight: 1.1, color: i === 3 ? C.hi : C.panel }}>{s.value}</div>
                  <div style={{ fontFamily: F.mono, fontSize: 8, color: 'rgba(242,239,233,0.35)', marginTop: 4, letterSpacing: 0.4 }}>{s.note}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Revenue + installs */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}>
            {[['Monthly revenue', `$${revenue.toLocaleString()}`], ['Total investment', `$${totalIn.toLocaleString()}`]].map(([l, v]) => (
              <div key={l} style={{ padding: 14, border: `1px solid rgba(255,255,255,0.14)` }}>
                <div style={{ fontFamily: F.mono, fontSize: 9, letterSpacing: 1.4, color: C.faint, marginBottom: 4, textTransform: 'uppercase' }}>{l}</div>
                <div style={{ fontFamily: F.display, fontSize: 22, color: C.panel, letterSpacing: -0.5 }}>{v}</div>
              </div>
            ))}
          </div>

          <div style={{ padding: 14, background: profit >= 0 ? C.hi : C.caution, color: C.ink, fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, fontWeight: 700, textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
            <span>● {profit >= 0 ? 'MODEL VIABLE' : 'INCREASE SPEND OR DEAL VALUE'}</span>
            <span>{profit >= 0 ? 'POSITIVE UNIT ECONOMICS' : 'ADJUST INPUTS'}</span>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 16, fontFamily: F.mono, fontSize: 10, color: C.faint, letterSpacing: 0.8 }}>
        Plan fee (${plan.fee.toLocaleString()}/mo) deducted from profit. Min ad spend ${plan.minSpend.toLocaleString()} ($1,500/platform). Stress toggle applies ×0.7 to answer + close rates.
        {planIdx > 0 && <span style={{ color: C.hi }}> {plan.label} plan values preset: ${plan.cpl} CPL · {plan.answerRate}% answer · {plan.closeRate}% close.</span>}
      </div>

      {hasInteracted && profit > 0 && (
        <div style={{ marginTop: 16, padding: '16px 20px', background: C.ink, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', border: `2px solid ${C.hi}` }}>
          {emailSent ? (
            <span style={{ fontFamily: F.mono, fontSize: 11, color: C.hi, letterSpacing: 1.2, fontWeight: 700 }}>✓ SENT — check your inbox.</span>
          ) : (
            <>
              <span style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: C.hi, fontWeight: 700, whiteSpace: 'nowrap', flexShrink: 0 }}>// SAVE THIS MODEL</span>
              <input
                type="email" value={simEmail} onChange={e => setSimEmail(e.target.value)}
                placeholder="your@email.com"
                style={{ flex: '1 1 180px', padding: '8px 12px', fontFamily: F.mono, fontSize: 11, background: 'rgba(255,255,255,0.09)', border: '1px solid rgba(255,255,255,0.2)', color: C.panel, outline: 'none', minWidth: 0 }}
              />
              <input
                type="tel" value={simPhone} onChange={e => setSimPhone(e.target.value)}
                placeholder="Phone (optional)"
                style={{ flex: '1 1 140px', padding: '8px 12px', fontFamily: F.mono, fontSize: 11, background: 'rgba(255,255,255,0.09)', border: '1px solid rgba(255,255,255,0.2)', color: C.panel, outline: 'none', minWidth: 0 }}
              />
              <button onClick={handleSimEmail} disabled={emailSending} style={{ padding: '8px 14px', background: C.hi, color: C.ink, fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, fontWeight: 700, border: 'none', cursor: emailSending ? 'default' : 'pointer', textTransform: 'uppercase', whiteSpace: 'nowrap', flexShrink: 0, opacity: emailSending ? 0.7 : 1 }}>
                {emailSending ? 'SENDING…' : 'SEND →'}
              </button>
            </>
          )}
        </div>
      )}
    </section>
  );
}

function ProofImg() {
  const quotes = [
    {
      co: 'Surfex',
      trade: 'Wood Flooring',
      domain: 'surfex.ca',
      img: 'trade-flooring.png',
      q: 'Leads as low as $8 each. We had to hire to keep up.',
      metric: '$30K → $75K',
      label: 'MO. REVENUE · 6 MONTHS',
    },
    {
      co: 'Poxy',
      trade: 'Epoxy Flooring',
      domain: 'poxy.co',
      img: 'trade-epoxy.png',
      q: 'We did more revenue in May than we did all of last year.',
      metric: '$1.2M → $8M',
      label: 'ANNUAL RUN RATE · 4 MOS.',
    },
    {
      co: 'JCD Refrigeration',
      trade: 'HVAC',
      domain: 'jcdrefrigeration.com',
      img: 'trade-hvac.png',
      q: "We can't hire fast enough to handle the jobs.",
      metric: '$80 → $18',
      label: 'COST PER LEAD · YEAR 1',
    },
  ];
  return (
    <section id="proof" style={{ padding: '100px 40px', background: C.panel }}>
      <SectionTitle eyebrow="Field reports">Receipts.<br />Not promises.</SectionTitle>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
        {quotes.map((q, i) => (
          <div key={i} style={{ background: C.bg, border: `2px solid ${C.ink}`, overflow: 'hidden' }}>
            <div style={{ height: 320, overflow: 'hidden', borderBottom: `2px solid ${C.ink}`, position: 'relative' }}>
              <img src={`img/${q.img}`} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', top: 12, left: 12 }}>
                <Stamp color={C.hi} dark>CASE 0{i + 1}</Stamp>
              </div>
              <div style={{
                position: 'absolute', bottom: 12, left: 12, padding: '6px 10px',
                background: C.ink, color: C.panel,
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontFamily: F.mono, fontSize: 10, letterSpacing: 1.2, fontWeight: 700,
              }}>
                <img src={`https://www.google.com/s2/favicons?domain=${q.domain}&sz=64`} alt="" width={14} height={14} style={{ display: 'block' }} />
                {q.domain.toUpperCase()}
              </div>
            </div>
            <div style={{ padding: 24 }}>
              <p style={{ fontFamily: F.display, fontSize: 22, lineHeight: 1.15, color: C.ink, letterSpacing: -0.5, margin: '0 0 24px', textTransform: 'uppercase' }}>"{q.q}"</p>
              <div style={{ paddingTop: 16, borderTop: `1px solid ${C.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <div>
                  <div style={{ fontFamily: F.mono, fontSize: 12, fontWeight: 700, color: C.ink }}>{q.co.toUpperCase()}</div>
                  <div style={{ fontFamily: F.mono, fontSize: 10, color: C.muted, marginTop: 2 }}>{q.trade} · {q.domain}</div>
                  <div style={{ fontFamily: F.mono, fontSize: 9, color: C.hi, marginTop: 3, letterSpacing: 1.2, fontWeight: 700 }}>VERIFIED CLIENT ✓</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: F.display, fontSize: 22, color: C.hi, letterSpacing: -0.5, lineHeight: 0.95 }}>{q.metric}</div>
                  <div style={{ fontFamily: F.mono, fontSize: 9, color: C.muted, letterSpacing: 1.4, marginTop: 4 }}>{q.label}</div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Marquee() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', borderTop: `2px solid ${C.ink}`, borderBottom: `2px solid ${C.ink}`, background: C.ink }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 480 }}>
        <div style={{ position: 'relative', overflow: 'hidden', borderRight: `2px solid ${C.hi}` }}>
          <img src="img/crew-band.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(22,22,26,0) 0%, rgba(22,22,26,0.55) 100%)' }} />
          <div style={{ position: 'absolute', bottom: 24, left: 24, padding: '6px 10px', background: C.ink, color: C.hi, fontFamily: F.mono, fontSize: 10, letterSpacing: 1.6, fontWeight: 700 }}>// FIELD: ROOFING</div>
        </div>
        <div style={{ padding: 56, color: C.panel, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative' }}>
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: `linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)`,
            backgroundSize: '40px 40px',
          }} />
          <div style={{ position: 'relative' }}>
            <Stamp color={C.hi}>// THE WORK</Stamp>
            <h2 style={{ fontFamily: F.display, fontSize: 68, lineHeight: 0.92, letterSpacing: -1.6, color: C.panel, margin: '24px 0 32px', textTransform: 'uppercase' }}>
              Built for the<br />people who<br /><span style={{ color: C.hi }}>build things.</span>
            </h2>
            <p style={{ fontFamily: F.sans, fontSize: 17, lineHeight: 1.55, color: C.faint, margin: 0, maxWidth: 480 }}>
              Roofers. GCs. Kitchen guys. Pool builders. The trades that built this country — and got abandoned by every tech company that doesn't understand a tape measure.
            </p>
          </div>
          <div data-stat-grid="" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, paddingTop: 32, borderTop: `1px solid rgba(255,255,255,0.18)`, marginTop: 32 }}>
            {[['14', 'METROS LIVE'], ['10', 'TRADES SERVED'], ['1', 'OPERATOR / METRO']].map(([v, l]) => (
              <div key={l}>
                <div style={{ fontFamily: F.display, fontSize: 44, color: C.hi, letterSpacing: -1, lineHeight: 0.9 }}>{v}</div>
                <div style={{ fontFamily: F.mono, fontSize: 9, letterSpacing: 1.6, color: C.faint, marginTop: 8, fontWeight: 700 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeFAQ() {
  const [open, setOpen] = React.useState(null);
  const FAQS = [
    { q: 'What makes this different from a marketing agency?', a: "Marketing agencies run campaigns. We install systems. A campaign is something you rent — it stops the moment you stop paying. Infrastructure is something you own. We don't take on multiple clients in the same city and trade. A typical agency will run ads for five kitchen contractors in the same city at the same time. We work with one." },
    { q: "I've tried ads before and they didn't work.", a: "Worth understanding why. In most cases, the ads worked — everything else didn't. No fast answer on the call. No consistent follow-up. No tracking on estimates. Leads came in and went cold. That's what we install around the ads." },
    { q: 'How fast does it take to see results?', a: "The infrastructure takes time to build and calibrate. Most contractors start seeing consistent lead activity within the first few weeks of the system going live. Close rates and pipeline quality improve as the system learns your trade and your market. We don't promise a timeline because it depends on your market, your trade, your close rate, and how fast you respond." },
    { q: 'Do I still have to answer calls and close jobs myself?', a: "Yes. The AI receptionist handles the initial contact and keeps the conversation from going cold. You still show up, quote the job, follow up personally on the ones that matter, and close. The system does the consistent work around you — it doesn't replace you." },
    { q: 'What if my city is already taken?', a: "Then it's taken for your trade. We'll let you know and — if you want — we can put you on a notification list if that territory opens. If your city is open, checking sooner gives you the option to lock it. We don't hold slots open indefinitely." },
    { q: 'Why does it cost this much?', a: "It's not an ad campaign. It's a dedicated system built for your trade and your city — demand generation, AI receptionist, CRM, follow-up sequences, estimate tracking, local authority, reactivation. Each piece is built and managed. If you're comparing this to a $500/month marketing retainer, that's a different category of service. The contractors who find this worthwhile have already done the math on what a closed job is worth and what a missed one costs." },
  ];
  return (
    <section id="faq-home" style={{ padding: '100px 40px', background: C.panel, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, gap: 48, flexWrap: 'wrap' }}>
        <SectionTitle eyebrow="Straight answers">Before you sign,<br />here's what you'll ask.</SectionTitle>
        <a href="/faq" style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, color: C.hiDark, fontWeight: 700, textDecoration: 'none', whiteSpace: 'nowrap' }}>ALL FAQS →</a>
      </div>
      <div style={{ border: `2px solid ${C.ink}` }}>
        {FAQS.map((f, i) => (
          <div key={i} style={{ borderBottom: i < FAQS.length - 1 ? `1px solid ${C.rule}` : 'none', background: C.bg }}>
            <button onClick={() => setOpen(open === i ? null : i)} style={{
              width: '100%', display: 'grid', gridTemplateColumns: '1fr 32px',
              gap: 24, alignItems: 'center', padding: '22px 32px',
              background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left',
            }}>
              <span style={{ fontFamily: F.display, fontSize: 22, color: C.ink, letterSpacing: -0.4, textTransform: 'uppercase', lineHeight: 1.1 }}>{f.q}</span>
              <span style={{ fontFamily: F.display, fontSize: 28, color: C.hi, lineHeight: 1, justifySelf: 'end' }}>{open === i ? '−' : '+'}</span>
            </button>
            {open === i && (
              <div style={{ padding: '0 32px 24px', maxWidth: 760, fontFamily: F.sans, fontSize: 16, lineHeight: 1.6, color: C.text }}>
                {f.a}
              </div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

function FounderNote() {
  return (
    <section style={{ padding: '64px 40px', background: C.bg, borderTop: `2px solid ${C.ink}`, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', gap: 32, alignItems: 'center', flexWrap: 'wrap' }}>
        <div>
          <div style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 1.6, color: C.hiDark, fontWeight: 700, marginBottom: 12 }}>// BUILT BY</div>
          <h3 style={{ fontFamily: F.display, fontSize: 'clamp(28px, 3.5vw, 44px)', lineHeight: 1.05, letterSpacing: -0.6, color: C.ink, margin: '0 0 14px', textTransform: 'uppercase' }}>
            A small team in Montreal — not an offshore agency.
          </h3>
          <p style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.55, color: C.muted, margin: '0 0 22px', maxWidth: 620 }}>
            You work with the people who built the system. No SDR layer. No junior account managers. You'll know their names before you sign.
          </p>
          <a href="/about" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 16px',
            fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, fontWeight: 700, textTransform: 'uppercase',
            color: C.ink, textDecoration: 'none', border: `1.5px solid ${C.ink}`,
          }}>Meet the team →</a>
        </div>
        <div style={{
          width: 200, height: 200, flexShrink: 0,
          background: C.ink, color: C.hi,
          border: `2px solid ${C.ink}`,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          fontFamily: F.mono, fontSize: 10, letterSpacing: 1.6, fontWeight: 700,
        }}>
          <div style={{ fontFamily: F.display, fontSize: 56, color: C.hi, letterSpacing: -1, lineHeight: 1 }}>DTG</div>
          <div style={{ marginTop: 12 }}>// FOUNDED 2024</div>
          <div style={{ marginTop: 4, color: C.faint }}>MONTREAL · QC</div>
        </div>
      </div>
    </section>
  );
}

function AfterSign() {
  const steps = [
    { d: 'DAY 0',     t: 'Contract',     body: 'Signed in 20 min. Stripe + DocuSign. No paper.' },
    { d: 'DAY 1–7',   t: 'Build',        body: 'Kaching CRM, ad creatives, AI receptionist, landing pages. Ads go live by day 3.' },
    { d: 'DAY 8',     t: 'Leads flowing', body: 'Real bookings appear in your inbox + calendar. We monitor for the first 30 days.' },
    { d: 'WEEK 4',    t: 'Review + tune', body: 'Reinforcement call. Audience expansion. CPL reduction. Close-rate playbooks.' },
  ];
  return (
    <section style={{ padding: '88px 40px', background: C.bg, borderTop: `2px solid ${C.ink}`, borderBottom: `2px solid ${C.ink}` }}>
      <SectionTitle eyebrow="After you sign">No black box. Here's what happens next.</SectionTitle>
      <p style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.5, color: C.muted, margin: '0 0 40px', maxWidth: 680 }}>
        Same flow for every operator, every trade. Predictable from contract to first booked install.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {steps.map((s, i) => (
          <div key={s.d} style={{
            position: 'relative', padding: 24,
            background: C.panel, border: `2px solid ${C.ink}`,
          }}>
            <div style={{
              position: 'absolute', top: -12, left: 16, padding: '4px 10px',
              background: C.hi, color: C.ink,
              fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, fontWeight: 700,
            }}>{s.d}</div>
            <div style={{
              fontFamily: F.display, fontSize: 56, color: C.hi,
              letterSpacing: -1.2, lineHeight: 0.85, marginTop: 12, marginBottom: 14,
            }}>0{i + 1}</div>
            <h3 style={{
              fontFamily: F.display, fontSize: 20, letterSpacing: -0.3,
              textTransform: 'uppercase', margin: '0 0 8px', lineHeight: 1, color: C.ink,
            }}>{s.t}</h3>
            <p style={{ fontFamily: F.sans, fontSize: 13, lineHeight: 1.5, color: C.muted, margin: 0 }}>{s.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function GuaranteeStrip() {
  const pledges = ['Cancel any time', 'You own the assets', 'First call live in 14 days'];
  return (
    <div style={{ display: 'flex', justifyContent: 'center', gap: 12, padding: '20px 40px', background: C.ink, borderBottom: `2px solid ${C.ink}`, flexWrap: 'wrap' }}>
      {pledges.map(p => (
        <span key={p} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 16px', border: `1px solid ${C.hi}`,
          fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, fontWeight: 700,
          color: C.hi, textTransform: 'uppercase',
        }}>✓ {p}</span>
      ))}
    </div>
  );
}

function PricingCheck({ on, dark }) {
  if (on) {
    return (
      <svg width="14" height="14" viewBox="0 0 16 16" style={{ display: 'block', flexShrink: 0 }} aria-hidden="true">
        <rect x="0" y="0" width="16" height="16" fill={C.hi} />
        <path d="M3.5 8.2 L6.5 11.2 L12.5 4.8" fill="none" stroke="#16161A" strokeWidth="2.4" strokeLinecap="square" strokeLinejoin="miter" />
      </svg>
    );
  }
  return (
    <span style={{
      display: 'inline-block', width: 14, height: 14, flexShrink: 0,
      border: `1.5px solid ${dark ? 'rgba(242,239,233,0.25)' : 'rgba(22,22,26,0.25)'}`,
    }} aria-hidden="true" />
  );
}

function PricingBand() {
  const tiers = [
    {
      code: 'PLAN.01', name: 'LAUNCH', price: '1,500', sub: 'Solo operator getting the phone ringing.', featured: false,
      features: [
        ['Meta Ads', true],
        ['Ad creatives (static + carousel)', true],
        ['Kaching CRM + ad sync', true],
        ['Email + SMS follow-ups', true],
        ['Exclusive territory', true],
        ['Google Ads + LSA', false],
        ['AI receptionist', false],
        ['Reputation mgmt', false],
      ],
    },
    {
      code: 'PLAN.02', name: 'GROW', price: '2,500', sub: 'Stop chasing leads. Start closing them.', featured: true,
      features: [
        ['Meta Ads', true],
        ['Google Ads + LSA', true],
        ['Ad creatives (static + carousel)', true],
        ['Full email + SMS sequence', true],
        ['AI receptionist', true],
        ['Kaching CRM + ad sync', true],
        ['Exclusive territory', true],
        ['Reputation mgmt', false],
        ['Social media mgmt', false],
      ],
    },
    {
      code: 'PLAN.03', name: 'SCALE', price: '3,500', sub: 'Dominate your metro for your trade.', featured: false,
      features: [
        ['Meta Ads', true],
        ['Google Ads + LSA', true],
        ['Ad creatives (static + carousel + video)', true],
        ['Full + reactivation sequence', true],
        ['AI receptionist', true],
        ['Reputation mgmt', true],
        ['Social media mgmt', true],
        ['2 email campaigns / month', true],
        ['Merch design', true],
      ],
    },
  ];

  return (
    <section id="pricing-band" style={{ padding: '88px 40px', background: C.panel, borderTop: `2px solid ${C.ink}`, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 48, marginBottom: 40, alignItems: 'flex-end' }}>
        <SectionTitle eyebrow="Pricing">Get booked<br />weeks in advance.</SectionTitle>
        <p style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.55, color: C.muted, margin: 0, maxWidth: 520 }}>
          Not clicks. Infrastructure. One extra closed job a month covers the spend — most months it doubles it.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 8 }}>
        {tiers.map(t => {
          const dark = t.featured;
          const fg = dark ? C.panel : C.ink;
          const mutedFg = dark ? 'rgba(242,239,233,0.45)' : 'rgba(22,22,26,0.42)';
          const rule = dark ? 'rgba(255,255,255,0.12)' : C.rule;
          return (
            <div key={t.code} style={{
              position: 'relative', padding: 28,
              background: dark ? C.ink : C.bg,
              color: fg,
              border: `2px solid ${C.ink}`,
              display: 'flex', flexDirection: 'column',
            }}>
              {t.featured && (
                <span style={{
                  position: 'absolute', top: -12, left: 20, padding: '4px 10px',
                  background: C.hi, color: C.ink, fontFamily: F.mono, fontSize: 10,
                  fontWeight: 700, letterSpacing: 1.4,
                }}>★ MOST POPULAR</span>
              )}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                <span style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, fontWeight: 700, color: dark ? C.hi : C.hiDark }}>{t.code}</span>
                <span style={{ fontFamily: F.display, fontSize: 28, letterSpacing: -0.6 }}>{t.name}</span>
              </div>
              <p style={{ fontFamily: F.sans, fontSize: 13, lineHeight: 1.4, margin: '0 0 18px', opacity: dark ? 0.78 : 0.7 }}>{t.sub}</p>

              <div style={{ borderTop: `1px solid ${rule}`, paddingTop: 16, marginBottom: 18 }}>
                <div style={{ fontFamily: F.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.6, color: dark ? C.hi : C.hiDark, marginBottom: 10 }}>INCLUDED</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {t.features.map(([label, on]) => (
                    <li key={label} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <PricingCheck on={on} dark={dark} />
                      <span style={{
                        fontFamily: F.sans, fontSize: 13, lineHeight: 1.35,
                        color: on ? fg : mutedFg,
                        textDecoration: on ? 'none' : 'line-through',
                        opacity: on ? 1 : 0.7,
                      }}>{label}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div style={{ borderTop: `1px solid ${rule}`, paddingTop: 16, fontFamily: F.display, fontSize: 48, lineHeight: 0.9, letterSpacing: -1.4, marginBottom: 16 }}>
                ${t.price}<span style={{ fontSize: 16, letterSpacing: 0, opacity: 0.6 }}>/mo</span>
              </div>
              <a href="/pricing" style={{
                marginTop: 'auto', display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '12px 14px', textDecoration: 'none',
                border: `1.5px solid ${dark ? C.hi : C.ink}`,
                color: dark ? C.hi : C.ink,
                fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, fontWeight: 700, textTransform: 'uppercase',
              }}>See full comparison <span>→</span></a>
            </div>
          );
        })}
      </div>
      <div style={{
        marginTop: 20, padding: '14px 18px',
        background: C.ink, color: C.panel,
        fontFamily: F.mono, fontSize: 11, letterSpacing: 1.2, fontWeight: 600,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
      }}>
        <span>+ $2,000 one-time site build · You own the code, the domain, the assets.</span>
        <a href="/pricing" style={{ color: C.hi, textDecoration: 'none', whiteSpace: 'nowrap' }}>Full pricing →</a>
      </div>
      <p style={{
        margin: '14px 0 0', fontFamily: F.mono, fontSize: 10, letterSpacing: 0.6, lineHeight: 1.5,
        color: C.muted, maxWidth: 720,
      }}>
        * Revenue calculators are planning tools, not guarantees. Results depend on market, offer, response speed, sales process, close rate, budget, and execution. DTG installs the infrastructure — the contractor still answers, quotes, follows up, and closes.
      </p>
    </section>
  );
}

function NotLosing() {
  return (
    <section style={{ padding: '100px 40px', background: C.ink, color: C.panel, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 64, alignItems: 'start' }}>
        <div>
          <Eyebrow>The real problem</Eyebrow>
          <h2 style={{
            fontFamily: F.display, fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 0.95, letterSpacing: -1.4,
            margin: '16px 0 0', textTransform: 'uppercase', fontWeight: 900,
          }}>
            Hope is not a strategy.
          </h2>
          <p style={{ fontFamily: F.sans, fontSize: 18, lineHeight: 1.5, color: C.hi, margin: '20px 0 0', fontWeight: 600 }}>
            You're losing them before you ever get the chance to show up.
          </p>
        </div>
        <div style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.65, color: 'rgba(242,239,233,0.78)' }}>
          <p style={{ margin: '0 0 18px' }}>
            A homeowner searches. Your competitor shows up first — cleaner site, top of Google, picked up in under two minutes.
          </p>
          <p style={{ margin: 0, color: C.panel, fontWeight: 600 }}>
            You might be the better contractor. They'll never know.
          </p>
        </div>
      </div>
    </section>
  );
}

function ReferralSection() {
  const bullets = [
    "You can't call more referrals into existence — but you can build a system that generates leads directly.",
    "Referral volume drops when your clients get busy, move, or forget.",
    "A new competitor in your city doesn't need better referrals — they need a better system than yours.",
    "The contractor who locks their city doesn't need to wait for someone to make a recommendation.",
  ];
  return (
    <section style={{ padding: '100px 40px', background: C.panel, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 48, flexWrap: 'wrap' }}>
        <SectionTitle eyebrow="Pipeline dependency">You can't control when<br />you get referrals.</SectionTitle>
        <p style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.5, color: C.muted, maxWidth: 380, margin: 0 }}>
          Referrals are worth protecting. But if they're your only pipeline, your revenue is tied to what other people do.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)', gap: 56, alignItems: 'start' }}>
        <div style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.65, color: C.text }}>
          <p style={{ margin: '0 0 18px' }}>
            You don't control when they send someone your way. You can't predict when they'll stop.
          </p>
          <p style={{ margin: '0 0 18px' }}>
            Contractors who want to own their market build a parallel system that generates demand directly.
          </p>
          <p style={{ margin: 0, fontFamily: F.display, fontSize: 22, color: C.ink, letterSpacing: -0.4, textTransform: 'uppercase', lineHeight: 1.15 }}>
            Referrals keep you busy. Infrastructure keeps you in control.
          </p>
        </div>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, border: `2px solid ${C.ink}`, background: C.bg }}>
          {bullets.map((b, i) => (
            <li key={i} style={{
              padding: '18px 22px',
              borderBottom: i < bullets.length - 1 ? `1px solid ${C.rule}` : 'none',
              display: 'grid', gridTemplateColumns: '32px 1fr', gap: 14, alignItems: 'start',
            }}>
              <span style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, color: C.hiDark, fontWeight: 700, paddingTop: 2 }}>0{i + 1}</span>
              <span style={{ fontFamily: F.sans, fontSize: 15, lineHeight: 1.55, color: C.ink }}>{b}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function MissedCalls() {
  const installs = [
    'AI receptionist answers calls and texts 24/7 — even when you\'re on the job.',
    'Immediate callback and text confirmation so the homeowner knows you\'re on it.',
    'Automated estimate follow-up so you\'re not manually chasing quotes.',
    'Notifications when a lead goes cold so you can step in personally.',
    'Full conversation history in one place — no more missed context.',
  ];
  return (
    <section style={{ padding: '100px 40px', background: C.ink, color: C.panel, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 48, flexWrap: 'wrap' }}>
        <SectionTitle eyebrow="Speed to lead" dark>End the feast<br /><span style={{ color: C.hi }}>or famine stress.</span></SectionTitle>
        <p style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.5, color: 'rgba(242,239,233,0.7)', maxWidth: 380, margin: 0 }}>
          If you don't answer in the first few minutes, the next contractor does.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 56, alignItems: 'start' }}>
        <div style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.65, color: 'rgba(242,239,233,0.82)' }}>
          <p style={{ margin: '0 0 18px' }}>
            You're on a job. Phone rings. You can't get to it — that's the job, not negligence.
          </p>
          <p style={{ margin: '0 0 18px' }}>
            But the homeowner called two other contractors that day. One texted back in a minute. That's who got the estimate.
          </p>
          <p style={{ margin: 0, color: C.panel, fontWeight: 600 }}>
            Most lost leads aren't bad quotes. They're slow responses.
          </p>
        </div>
        <div>
          <div style={{
            fontFamily: F.mono, fontSize: 11, letterSpacing: 1.6, color: C.hi, fontWeight: 700,
            marginBottom: 16,
          }}>// WHAT WE INSTALL INSTEAD</div>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, border: `1px solid rgba(255,255,255,0.2)` }}>
            {installs.map((b, i) => (
              <li key={i} style={{
                padding: '16px 20px',
                borderBottom: i < installs.length - 1 ? `1px solid rgba(255,255,255,0.12)` : 'none',
                display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, alignItems: 'start',
                fontFamily: F.sans, fontSize: 15, lineHeight: 1.5, color: C.panel,
              }}>
                <span style={{ color: C.hi, fontWeight: 700, paddingTop: 1 }}>✓</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function CompetitorPressure() {
  return (
    <section style={{ padding: '100px 40px', background: C.bg, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 64, alignItems: 'start' }}>
        <div>
          <Eyebrow>Competitive displacement</Eyebrow>
          <h2 style={{
            fontFamily: F.display, fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 0.95, letterSpacing: -1.4,
            margin: '16px 0 24px', textTransform: 'uppercase', fontWeight: 900, color: C.ink,
          }}>
            Stand out from the competition.
          </h2>
          <p style={{ fontFamily: F.sans, fontSize: 18, lineHeight: 1.5, color: C.hiDark, margin: 0, fontWeight: 600 }}>
            They just have to look better and answer faster.
          </p>
        </div>
        <div style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.65, color: C.text }}>
          <p style={{ margin: '0 0 18px' }}>
            A contractor in your city doing worse work is booking more jobs than you.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Not better — just more visible, faster to respond, and harder to outrun once they lock the market.
          </p>
          <p style={{ margin: '0 0 24px', fontFamily: F.display, fontSize: 20, color: C.ink, letterSpacing: -0.3, textTransform: 'uppercase', lineHeight: 1.2 }}>
            This is not a threat. It's just how local markets consolidate.
          </p>
          <Btn primary href="/book-scoping-call">GET STARTED ▸</Btn>
        </div>
      </div>
    </section>
  );
}

function Territory() {
  const tiles = [
    ['01', 'YOUR TRADE', 'Specialized for your specific work.'],
    ['02', 'YOUR METRO', 'Your defined service area only.'],
    ['03', 'LOCKED', 'No competitor can take this slot.'],
  ];
  return (
    <section id="territory" style={{ padding: '72px 40px', background: C.ink, color: C.panel, borderBottom: `2px solid ${C.ink}`, position: 'relative' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)`,
        backgroundSize: '40px 40px',
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{
            fontFamily: F.mono, fontSize: 12, letterSpacing: 2, color: C.hi, fontWeight: 700,
            marginBottom: 20, textTransform: 'uppercase',
          }}>// EXCLUSIVITY</div>
          <h2 style={{
            fontFamily: F.display, fontSize: 'clamp(48px, 7vw, 112px)', lineHeight: 0.9, letterSpacing: -2,
            margin: '0 auto', textTransform: 'uppercase', fontWeight: 900,
          }}>
            <span style={{ display: 'block' }}>One trade.</span>
            <span style={{ display: 'block' }}>One city.</span>
            <span style={{ display: 'block', color: C.hi }}>One contractor.</span>
          </h2>
          <p style={{
            fontFamily: F.sans, fontSize: 17, lineHeight: 1.45, color: 'rgba(242,239,233,0.8)',
            margin: '24px auto 0', maxWidth: 560,
          }}>
            We don't work with your competitors. Your city's leads are yours alone.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 40 }}>
          {tiles.map(([code, label, body]) => (
            <div key={code} style={{
              border: `1px solid rgba(255,255,255,0.18)`,
              padding: 28,
              background: 'rgba(255,255,255,0.02)',
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 11, letterSpacing: 1.6, color: C.hi, fontWeight: 700, marginBottom: 16,
              }}>[{code}]</div>
              <div style={{
                fontFamily: F.display, fontSize: 'clamp(28px, 3vw, 44px)', color: C.panel, letterSpacing: -0.8,
                textTransform: 'uppercase', lineHeight: 0.95, marginBottom: 14, fontWeight: 900,
              }}>{label}</div>
              <div style={{
                fontFamily: F.sans, fontSize: 14, lineHeight: 1.45, color: 'rgba(242,239,233,0.7)',
              }}>{body}</div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center' }}>
          <Btn primary href="/book-scoping-call">GET STARTED ▸</Btn>
        </div>
      </div>
    </section>
  );
}

function BeforeAfter() {
  const Icon = {
    target: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill="currentColor" /></svg>,
    phone: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.81.37 1.6.72 2.34a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.74-1.29a2 2 0 012.11-.45c.74.35 1.53.59 2.34.72A2 2 0 0122 16.92z" /></svg>,
    doc: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="8" y1="13" x2="16" y2="13" /><line x1="8" y1="17" x2="16" y2="17" /></svg>,
    pipe: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="3" y="4" width="18" height="3" rx="0.5" /><rect x="3" y="10.5" width="14" height="3" rx="0.5" /><rect x="3" y="17" width="10" height="3" rx="0.5" /></svg>,
  };
  const pillars = [
    { icon: Icon.target, code: '01', name: 'LEADS',     before: 'Referrals only',     after: 'Pipeline you own' },
    { icon: Icon.phone,  code: '02', name: 'CALLS',     before: 'Missed mid-job',     after: 'Answered 24/7' },
    { icon: Icon.doc,    code: '03', name: 'ESTIMATES', before: 'Send and forget',    after: 'Tracked & chased' },
    { icon: Icon.pipe,   code: '04', name: 'PIPELINE',  before: 'Lives in your head', after: 'One CRM, all visible' },
  ];
  return (
    <section style={{ padding: '72px 40px', background: C.panel, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ marginBottom: 40 }}>
          <SectionTitle eyebrow="Before / After">Forget buying leads.<br />Own your pipeline.</SectionTitle>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {pillars.map((p) => (
            <div key={p.code} style={{
              border: `2px solid ${C.ink}`,
              background: C.bg,
              padding: 24,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ color: C.hi, marginBottom: 14 }}>{p.icon}</div>
              <div style={{
                fontFamily: F.mono, fontSize: 10, letterSpacing: 1.6, color: C.muted, fontWeight: 700, marginBottom: 4,
              }}>[{p.code}]</div>
              <div style={{
                fontFamily: F.display, fontSize: 26, color: C.ink, letterSpacing: -0.5, textTransform: 'uppercase',
                fontWeight: 900, lineHeight: 1, marginBottom: 20,
              }}>{p.name}</div>
              <div style={{
                fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: C.muted, fontWeight: 700, marginBottom: 6,
              }}>BEFORE</div>
              <div style={{
                fontFamily: F.sans, fontSize: 14, color: C.muted, textDecoration: 'line-through', marginBottom: 16,
              }}>{p.before}</div>
              <div style={{
                fontFamily: F.mono, fontSize: 10, letterSpacing: 1.4, color: C.hi, fontWeight: 700, marginBottom: 6,
              }}>AFTER</div>
              <div style={{
                fontFamily: F.sans, fontSize: 15, color: C.ink, fontWeight: 700, lineHeight: 1.3,
              }}>{p.after}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhoFor() {
  const forYou = ['Owner-operator', 'Strong work, soft pipeline', 'Ready to invest in infrastructure', 'Wants to own their metro'];
  const notForYou = ['Looking for guaranteed leads', 'Slow to respond to calls', 'Just price-shopping agencies', 'Wants the system to close for them'];
  return (
    <section style={{ padding: '72px 40px', background: C.ink, color: C.panel, borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ marginBottom: 40 }}>
          <SectionTitle eyebrow="Fit check" dark>Right fit?<br /><span style={{ color: C.hi }}>Or not.</span></SectionTitle>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 0, border: `2px solid ${C.hi}` }}>
          <div style={{ padding: 32, borderRight: `2px solid ${C.hi}` }}>
            <div style={{
              fontFamily: F.mono, fontSize: 11, letterSpacing: 1.6, color: C.hi, fontWeight: 700, marginBottom: 18,
            }}>// GOOD FIT</div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
              {forYou.map((b, i) => (
                <li key={i} style={{
                  padding: '16px 0',
                  borderBottom: i < forYou.length - 1 ? `1px solid rgba(255,255,255,0.12)` : 'none',
                  display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, alignItems: 'center',
                  fontFamily: F.sans, fontSize: 17, lineHeight: 1.3, color: C.panel, fontWeight: 600,
                }}>
                  <span style={{ color: C.hi, fontWeight: 900, fontSize: 18 }}>✓</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ padding: 32 }}>
            <div style={{
              fontFamily: F.mono, fontSize: 11, letterSpacing: 1.6, color: 'rgba(242,239,233,0.55)', fontWeight: 700, marginBottom: 18,
            }}>// WRONG FIT</div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
              {notForYou.map((b, i) => (
                <li key={i} style={{
                  padding: '16px 0',
                  borderBottom: i < notForYou.length - 1 ? `1px solid rgba(255,255,255,0.12)` : 'none',
                  display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, alignItems: 'center',
                  fontFamily: F.sans, fontSize: 17, lineHeight: 1.3, color: 'rgba(242,239,233,0.6)', fontWeight: 400,
                }}>
                  <span style={{ color: 'rgba(242,239,233,0.4)', fontWeight: 900, fontSize: 18 }}>✕</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{ padding: '100px 40px', background: C.ink, color: C.panel, borderBottom: `2px solid ${C.ink}`, position: 'relative' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(250,98,21,0.06) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(250,98,21,0.06) 1px, transparent 1px)`,
        backgroundSize: '40px 40px',
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
        <div style={{
          fontFamily: F.mono, fontSize: 12, letterSpacing: 2, color: C.hi, fontWeight: 700,
          marginBottom: 20, textTransform: 'uppercase',
        }}>// TERRITORY</div>
        <h2 style={{
          fontFamily: F.display, fontSize: 'clamp(48px, 6.5vw, 104px)', lineHeight: 0.92, letterSpacing: -1.8,
          margin: '0 0 24px', textTransform: 'uppercase', fontWeight: 900,
        }}>
          Your city might<br /><span style={{ color: C.hi }}>still be open.</span>
        </h2>
        <p style={{
          fontFamily: F.sans, fontSize: 18, lineHeight: 1.55, color: 'rgba(242,239,233,0.78)',
          margin: '0 auto 32px', maxWidth: 680,
        }}>
          You check whether your city and trade are available. If they're open, we get on a 20-minute call — not a sales pitch, a diagnostic. If it's a fit and you want to move forward, we lock your territory and start the build. If it's not, we'll tell you that too.
        </p>
        <div style={{ display: 'inline-flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginBottom: 32 }}>
          <Btn primary href="/book-scoping-call">GET STARTED ▸</Btn>
          <Btn href="#systems">SEE WHAT GETS INSTALLED</Btn>
        </div>
        <p style={{
          fontFamily: F.display, fontSize: 'clamp(18px, 2vw, 26px)', lineHeight: 1.3, letterSpacing: -0.4,
          color: C.hi, margin: 0, textTransform: 'uppercase',
        }}>
          One city. One trade. One contractor.<br />
          <span style={{ color: C.panel }}>That contractor might as well be you.</span>
        </p>
      </div>
    </section>
  );
}

window.HomeSections = { Hero, HomeJumpNav, Blueprint, Problem, Systems, Marquee, Phases, Simulator, Proof: ProofImg, HomeFAQ, GuaranteeStrip, PricingBand, FounderNote, AfterSign, NotLosing, ReferralSection, MissedCalls, CompetitorPressure, Territory, BeforeAfter, WhoFor, FinalCTA, CopyTicker: window.CopyTicker };
