// Home page sections — Noisy: control center for contractors.
// Self-serve branch dashboards + a Member tier with discounted pricing and marketplace access.

function HomeHero() {
  return (
    <section style={{ padding: '72px 40px 40px', textAlign: 'center', maxWidth: 1200, margin: '0 auto' }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '6px 14px 6px 8px',
        border: '1px solid var(--oat-border)', background: '#fff',
        borderRadius: 999, fontSize: 13, fontWeight: 500,
        boxShadow: 'var(--shadow-clay)', marginBottom: 32,
      }}>
        <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '1.08px', background: '#146ef5', color: '#fff', padding: '3px 8px', borderRadius: 999 }}>NEW</span>
        Production Branch dashboard is live
      </div>
      <h1 style={{
        margin: 0, fontSize: 92, fontWeight: 600, lineHeight: 0.98,
        letterSpacing: '-3.6px', fontFeatureSettings: 'var(--otf-heading)', textWrap: 'balance',
      }}>
        The Control Center<br/>for Contractors.
      </h1>
      <p style={{
        margin: '26px auto 32px', maxWidth: 680,
        fontSize: 19, fontWeight: 400, lineHeight: 1.5, color: '#55534e',
      }}>
        Purpose-built dashboards for every part of your business. Become a Member to unlock discounted monthly rates and our growing automation marketplace.
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginBottom: 56 }}>
        <a href="contact.html" style={{ textDecoration: 'none' }}>
          <ClayBtn variant="primary" size="lg" swatch="#fbbd41">Start Tracking</ClayBtn>
        </a>
        <a href="product.html" style={{ textDecoration: 'none' }}>
          <ClayBtn variant="ghost" size="lg" swatch="#c1b0ff">See the branch tools</ClayBtn>
        </a>
      </div>
      <div style={{
        background: '#fff', border: '1px solid var(--oat-border)',
        borderRadius: 24, padding: 18, boxShadow: 'var(--shadow-clay)',
        maxWidth: 1080, margin: '0 auto',
      }}>
        <ProductPreviewHome/>
      </div>
      <div style={{ marginTop: 40 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#9f9b93', textAlign: 'center', marginBottom: 18 }}>PLUGS INTO THE STACK YOU ALREADY RUN</div>
        <CrmCarousel/>
      </div>
    </section>
  );
}

// Auto-scrolling carousel of contractor CRMs the platform connects to.
// Uses CSS keyframes for an infinite marquee. Doubled list keeps it seamless.
function CrmCarousel() {
  const crms = [
    'JobNimbus','Jobber','ServiceTitan','AccuLynx','Leap','JobProgress',
    'Buildertrend','CoConstruct','Procore','Contractor Foreman','FieldPulse',
    'Housecall Pro','Service Fusion','Successware','MarketSharp','improveit 360',
    'RoofSnap','Roofr','HOVER','EagleView','HubSpot','GoHighLevel',
    'Salesforce','Zoho CRM','Pipedrive','Keap (Infusionsoft)','Close.io','Monday.com',
  ];
  const styleEl = (
    <style>{`
      @keyframes crm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      .crm-track { display: flex; gap: 48px; width: max-content; animation: crm-scroll 60s linear infinite; }
      .crm-mask { mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%); }
    `}</style>
  );
  const row = crms.concat(crms).map((c,i) => (
    <div key={i} style={{ fontSize: 15, fontWeight: 500, color: '#55534e', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap', flex: '0 0 auto' }}>
      {c.toUpperCase()}
    </div>
  ));
  return (
    <div className="crm-mask" style={{ overflow: 'hidden', width: '100%' }}>
      {styleEl}
      <div className="crm-track">{row}</div>
    </div>
  );
}

function ProductPreviewHome() {
  return (
    <div style={{
      background: '#faf9f7', borderRadius: 16, padding: 20,
      display: 'grid', gridTemplateColumns: '220px 1fr 280px', gap: 18,
      textAlign: 'left', minHeight: 440,
    }}>
      {/* Left: branch nav */}
      <div style={{ borderRight: '1px dashed var(--oat-border)', paddingRight: 14 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', textTransform: 'uppercase', color: '#55534e', marginBottom: 14 }}>BRANCHES</div>
        {[
          { n: 'Sales',       sub: 'Malik · 14 reps',      color: '#146ef5', active: true },
          { n: 'Marketing',   sub: 'Arya · 5 channels',    color: '#84e7a5' },
          { n: 'Operations',  sub: 'Eric · 23 jobs',       color: '#fbbd41' },
          { n: 'Finance',     sub: 'Alex · GM',            color: '#c1b0ff' },
          { n: 'Production',  sub: 'live',                 color: '#fc7981' },
        ].map((j, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 8px', borderRadius: 8, background: j.active ? '#fff' : 'transparent', border: j.active ? '1px solid var(--oat-border)' : '1px solid transparent', marginBottom: 4 }}>
            <div style={{ width: 8, height: 32, background: j.color, borderRadius: 4 }}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{j.n}</div>
              <div style={{ fontSize: 11, color: '#9f9b93' }}>{j.sub}</div>
            </div>
          </div>
        ))}
      </div>
      {/* Middle: Sales dashboard preview */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Sales · Rep Command Center</div>
            <div style={{ fontSize: 11, color: '#9f9b93', fontFamily: 'var(--font-mono)' }}>WK OF APR 14 · 14 REPS · 213 KNOCKS</div>
          </div>
          <span style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 600, padding: '4px 10px', borderRadius: 11, background: '#e1f8ea', color: '#078a52' }}>LIVE</span>
        </div>

        {/* KPI row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 12 }}>
          {[
            ['CLOSE RATE','27.4%','+3.1'],
            ['AVG TICKET','$18,420','+$620'],
            ['STALLED','6','−2'],
            ['ADJ. THIS WK','11',''],
          ].map(([l,v,d],i) => (
            <div key={i} style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 10, padding: '10px 12px' }}>
              <div style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '1.08px', color: '#9f9b93' }}>{l}</div>
              <div style={{ fontSize: 18, fontWeight: 600, fontFamily: 'var(--font-mono)', marginTop: 3, letterSpacing: '-0.3px' }}>{v}</div>
              {d && <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: d.startsWith('−') ? '#d04040' : '#078a52', marginTop: 2 }}>{d}</div>}
            </div>
          ))}
        </div>

        {/* Leaderboard */}
        <div style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 12, padding: '12px 14px 6px' }}>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#55534e' }}>LEADERBOARD · THIS WEEK</div>
            <div style={{ marginLeft: 'auto', fontSize: 10, fontFamily: 'var(--font-mono)', color: '#9f9b93' }}>KNOCKS · INSPECT · CLAIMS · CLOSED</div>
          </div>
          {[
            ['MA','Marco A.',  42, 14, 8, 5, '#146ef5'],
            ['RD','Rhea D.',   38, 11, 7, 4, '#84e7a5'],
            ['JT','Jorge T.',  51, 12, 6, 3, '#fbbd41'],
            ['BK','Ben K.',    29,  9, 5, 3, '#c1b0ff'],
          ].map((r,i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr 40px 40px 40px 40px', gap: 8, alignItems: 'center', padding: '7px 0', borderTop: i ? '1px dashed var(--oat-border)' : 'none' }}>
              <div style={{ width: 22, height: 22, borderRadius: 999, background: r[6], display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700 }}>{r[0]}</div>
              <div style={{ fontSize: 12, fontWeight: 600 }}>{r[1]}</div>
              {[r[2],r[3],r[4],r[5]].map((n,j) => <div key={j} style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textAlign: 'right', color: j===3 ? '#146ef5' : '#55534e', fontWeight: j===3 ? 600 : 400 }}>{n}</div>)}
            </div>
          ))}
        </div>
      </div>
      {/* Right: stalls + locked agency feature */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 12, padding: 14 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#55534e', marginBottom: 10 }}>STALL REPORT · 6</div>
          {[
            ['CLAIM FILED', '11d · Tompkins'],
            ['INSPECTING',  ' 8d · Reyes'],
            ['ADJ. SCHED',  ' 7d · Park'],
          ].map((r,i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 0', borderTop: i ? '1px dashed var(--oat-border)' : 'none' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, color: '#d04040', fontWeight: 700, width: 76 }}>{r[0]}</div>
              <div style={{ fontSize: 11, color: '#55534e' }}>{r[1]}</div>
            </div>
          ))}
        </div>
        <LockedTile
          title="Auto-alert reps on stall"
          sub="Fires SMS + JobNimbus note on day 3."
        />
      </div>
    </div>
  );
}

// Small locked-card tile used on the homepage preview
function LockedTile({ title, sub }) {
  return (
    <div style={{
      position: 'relative', background: '#fff', border: '1px dashed var(--oat-border)',
      borderRadius: 12, padding: 14, overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 8px, #fff3cc 8px 9px, transparent 9px 18px)',
        opacity: 0.6,
      }}/>
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10, fontWeight: 600, letterSpacing: '1.08px', background: '#fff3cc', color: '#7a5b00', padding: '3px 8px', borderRadius: 5, marginBottom: 8 }}>
          <span>🔒</span> MEMBER TIER
        </div>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 3 }}>{title}</div>
        <div style={{ fontSize: 11.5, color: '#55534e', lineHeight: 1.5 }}>{sub}</div>
      </div>
    </div>
  );
}

// --- Two-tier model explainer
function TwoTierRow() {
  return (
    <section style={{ padding: '40px 40px 20px', maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 56, alignItems: 'end', marginBottom: 32 }}>
        <h2 style={{ margin: 0, fontSize: 44, fontWeight: 600, letterSpacing: '-1.4px', lineHeight: 1.05, fontFeatureSettings: 'var(--otf-heading)' }}>
          Run it self-serve.<br/>Or become a Member.
        </h2>
        <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, color: '#55534e', maxWidth: 520 }}>
          Every branch tool ships with a rich self-serve dashboard. Become a Member — $4,497/yr flat or $497/yr fee + $397/mo discounted suite — to unlock the cheapest rates we offer plus member pricing on every automation in our upcoming marketplace.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {/* Self-serve card */}
        <div style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 24, padding: 28, boxShadow: 'var(--shadow-clay)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <div style={{ width: 12, height: 12, borderRadius: 3, background: '#146ef5' }}/>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#146ef5' }}>TIER 1 · SELF-SERVE</div>
          </div>
          <h3 style={{ margin: '0 0 8px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.6px', fontFeatureSettings: 'var(--otf-heading)' }}>In your hands, day one.</h3>
          <p style={{ margin: '0 0 20px', fontSize: 15, lineHeight: 1.55, color: '#55534e' }}>
            KPI dashboards, leaderboards, pipeline views, calculators, and so much more. Immediately valuable. Auto populated data, Your team enters data; Noisy does the rollups.
          </p>
          <div style={{ borderTop: '1px dashed var(--oat-border)', paddingTop: 14 }}>
            {[
              'Sales pipeline & rep performance',
              'Job costing & profit margins',
              'Revenue & collections tracking',
              'Marketing spend & lead source ROI',
              'Operations & production overview',
              'Monthly business health reports',
              'KPI scorecards & goal tracking',
              'And More',
            ].map((f,i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '6px 0', fontSize: 14 }}>
                <span style={{ color: '#146ef5', fontFamily: 'var(--font-mono)', fontWeight: 700 }}>✓</span>
                <span>{f}</span>
              </div>
            ))}
          </div>
        </div>
        {/* Member tier card */}
        <div style={{ background: '#062766', color: '#fff', borderRadius: 24, padding: 28, boxShadow: 'rgb(0,0,0) -7px 7px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 12px, rgba(251,189,65,0.06) 12px 13px, transparent 13px 24px)' }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{ width: 12, height: 12, borderRadius: 3, background: '#fbbd41' }}/>
              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#fbbd41' }}>TIER 2 · MEMBER · $4,497/YR FLAT OR MONTHLY</div>
            </div>
            <h3 style={{ margin: '0 0 8px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.6px', fontFeatureSettings: 'var(--otf-heading)' }}>Discounted rates. Marketplace pricing. Priority access.</h3>
            <p style={{ margin: '0 0 20px', fontSize: 15, lineHeight: 1.55, color: '#b6cfff' }}>
              Annual all-in for $4,497/yr flat (save $764 — actually cheaper than non-member Full Suite yearly), or monthly at $497/yr fee + $397/mo discounted suite. Member rate on every automation in the upcoming marketplace.
            </p>
            <div style={{ borderTop: '1px dashed #3d82fb', paddingTop: 14 }}>
              {[
                'Full Suite at $397/mo (save $100/mo vs non-member)',
                'À la carte dashboards at member rate',
                'Marketplace automations at $25–$65/mo (vs $40–$100 non-member)',
                'Priority setup queue when new integrations ship',
                'First access to new dashboards + branches',
                'Locked in for the year — no monthly fee surprises',
              ].map((f,i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '6px 0', fontSize: 14, color: '#e5edff' }}>
                  <span style={{ color: '#fbbd41', fontFamily: 'var(--font-mono)', fontWeight: 700 }}>✓</span>
                  <span>{f}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- Branch split section (reused: operator quotes + dashboard visuals)
function RoleSplit({ eyebrow, title, body, chart = true, bg = '#faf9f7', accent = '#146ef5', flip = false, artType = 'pipeline' }) {
  return (
    <section style={{ padding: '40px 24px' }}>
      <div style={{
        maxWidth: 1160, margin: '0 auto',
        background: bg, borderRadius: 40, padding: '64px 56px',
        border: '1px solid var(--oat-border)',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center',
      }}>
        <div style={{ order: flip ? 2 : 1 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: accent, marginBottom: 14 }}>{eyebrow}</div>
          <h2 style={{ margin: 0, fontSize: 48, fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.6px', fontFeatureSettings: 'var(--otf-heading)', textWrap: 'balance' }}>{title}</h2>
          <p style={{ margin: '20px 0 28px', fontSize: 17, lineHeight: 1.6, color: '#55534e', maxWidth: 440 }}>{body}</p>
          <a href="product.html" style={{ textDecoration: 'none' }}>
            <ClayBtn variant="primary" size="md" swatch="#fbbd41">See the dashboard →</ClayBtn>
          </a>
        </div>
        <div style={{ order: flip ? 1 : 2 }}>
          {artType === 'pipeline' && <PipelineArt accent={accent}/>}
          {artType === 'channels' && <ChannelsArt accent={accent}/>}
          {artType === 'depreciation' && <DepreciationArt accent={accent}/>}
        </div>
      </div>
    </section>
  );
}

// Operations: Job Pipeline funnel visual
function PipelineArt({ accent }) {
  const stages = [
    ['Contract signed',  17, '#146ef5'],
    ['Needs schedule',   14, '#3bd3fd'],
    ['Materials ordered',11, '#84e7a5'],
    ['Install scheduled', 9, '#fbbd41'],
    ['Depreciation',      6, '#c1b0ff'],
  ];
  const max = 17;
  return (
    <div style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 24, padding: 22, boxShadow: 'var(--shadow-clay)', color: '#1f1e1c' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#55534e' }}>ACTIVE JOBS · 57 TOTAL</div>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.56px', marginTop: 4 }}>6 stalled <span style={{ color: accent, fontSize: 15, fontFamily: 'var(--font-mono)', fontWeight: 500, marginLeft: 4 }}>past window</span></div>
        </div>
        <div style={{ fontSize: 10, fontWeight: 600, padding: '4px 10px', borderRadius: 999, background: '#eef4ff', color: accent }}>JOB PIPELINE</div>
      </div>
      <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {stages.map((s, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '130px 1fr 32px', gap: 10, alignItems: 'center' }}>
            <div style={{ fontSize: 12, fontWeight: 500, color: '#55534e' }}>{s[0]}</div>
            <div style={{ height: 22, background: '#faf9f7', borderRadius: 5, border: '1px solid var(--oat-border)', overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${(s[1]/max)*100}%`, background: s[2], borderRadius: 4 }}/>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textAlign: 'right', color: '#1f1e1c', fontWeight: 600 }}>{s[1]}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, padding: '10px 12px', background: '#fef7e0', borderRadius: 8, fontSize: 12, color: '#7a5b00' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700 }}>🔒 MEMBER:</span> auto-alert when a job sits past its stage window.
      </div>
    </div>
  );
}

// Marketing: multi-channel scorecard
function ChannelsArt({ accent }) {
  const rows = [
    ['SEO',             'Organic inbound',  '42', '$0',    '31%', '#146ef5'],
    ['PPA',             'Pay-per-appt',     '38', '$118',  '58%', '#84e7a5'],
    ['PPL',             'Pay-per-lead',     '71', '$42',   '18%', '#fbbd41'],
    ['Canvassing',      'Door knocks',     '213', '—',     '22%', '#c1b0ff'],
    ['Cold outreach',   'Outbound dial',   '340', '$8',    '11%', '#fc7981'],
  ];
  return (
    <div style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 24, padding: 18, boxShadow: 'var(--shadow-clay)' }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#55534e', padding: '6px 6px 14px' }}>UNIFIED LEAD DASHBOARD · THIS MONTH</div>
      <div style={{ display: 'grid', gridTemplateColumns: '14px 1fr 56px 56px 56px', gap: 8, padding: '0 6px 8px', borderBottom: '1px solid var(--oat-border)', fontSize: 10, fontFamily: 'var(--font-mono)', color: '#9f9b93', letterSpacing: '1.08px' }}>
        <div></div>
        <div>CHANNEL</div>
        <div style={{ textAlign: 'right' }}>LEADS</div>
        <div style={{ textAlign: 'right' }}>CPL</div>
        <div style={{ textAlign: 'right' }}>QUAL</div>
      </div>
      {rows.map((r,i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '14px 1fr 56px 56px 56px', gap: 8, alignItems: 'center', padding: '10px 6px', borderTop: i ? '1px dashed var(--oat-border)' : 'none' }}>
          <div style={{ width: 10, height: 10, borderRadius: 2, background: r[5] }}/>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{r[0]}</div>
            <div style={{ fontSize: 11, color: '#9f9b93', fontFamily: 'var(--font-mono)' }}>{r[1].toUpperCase()}</div>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textAlign: 'right', fontWeight: 600 }}>{r[2]}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textAlign: 'right', color: '#55534e' }}>{r[3]}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textAlign: 'right', color: accent, fontWeight: 600 }}>{r[4]}</div>
        </div>
      ))}
    </div>
  );
}

// Finance: depreciation tracker
function DepreciationArt({ accent }) {
  const rows = [
    ['Tompkins',   'COC sent · 3/28',   '$4,120', 'PENDING',  '#d07000'],
    ['Reyes',      'Check received',    '$3,680', 'DONE',     '#078a52'],
    ['Park',       'Awaiting adjuster', '$5,200', 'PENDING',  '#d07000'],
    ['Okafor',     'Check received',    '$2,940', 'DONE',     '#078a52'],
    ['Delgado',    'COC sent · 4/02',   '$6,110', 'PENDING',  '#d07000'],
  ];
  const total = 22050;
  return (
    <div style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 24, padding: 22, boxShadow: 'var(--shadow-clay)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#55534e' }}>OUTSTANDING REVENUE</div>
          <div style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.6px', fontFeatureSettings: 'var(--otf-heading)', marginTop: 4 }}>${total.toLocaleString()}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: '#9f9b93' }}>AVG DAYS OUT</div>
          <div style={{ fontSize: 22, fontWeight: 600, color: accent, fontFamily: 'var(--font-mono)', marginTop: 2 }}>14.2</div>
        </div>
      </div>
      <div style={{ borderTop: '1px dashed var(--oat-border)' }}>
        {rows.map((r,i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 1fr 72px 64px', gap: 8, alignItems: 'center', padding: '10px 0', borderBottom: i < rows.length - 1 ? '1px dashed var(--oat-border)' : 'none' }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{r[0]}</div>
            <div style={{ fontSize: 11.5, color: '#55534e' }}>{r[1]}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textAlign: 'right', fontWeight: 600 }}>{r[2]}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, textAlign: 'right', color: r[4], fontWeight: 700, letterSpacing: '1.08px' }}>{r[3]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// --- All-in-one — five branches, one stack
function AllInOne() {
  const branches = [
    ['SALES',      'Rep Command Center', 'Lead → estimate → close, in one view.', '#fbbd41'],
    ['MARKETING',  'Lead Flow Consolidator', 'Multiple channels stitched into one scorecard.', '#84e7a5'],
    ['OPERATIONS', 'Job Lifecycle Tracker', 'Signed → Scheduled → paid.', '#146ef5'],
    ['FINANCE',    'Job Cost Tracker', 'Live margin the moment costs commit.', '#c1b0ff'],
    ['PRODUCTION', 'Crew & Materials', 'Install schedule + PM docs in one board.', '#fc7981'],
  ];
  return (
    <section style={{ padding: '40px 24px' }}>
      <div style={{
        maxWidth: 1160, margin: '0 auto',
        background: '#062766', color: '#fff',
        borderRadius: 40, padding: '64px 56px',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 48, alignItems: 'start', marginBottom: 36 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#7ca6ff', marginBottom: 14 }}>ONE SUITE · FIVE BRANCHES</div>
            <h2 style={{ margin: 0, fontSize: 48, fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.6px', fontFeatureSettings: 'var(--otf-heading)', textWrap: 'balance' }}>
              Every seat in the house<br/>gets the right tool.
            </h2>
          </div>
          <p style={{ margin: 0, fontSize: 17, lineHeight: 1.6, color: '#b6cfff', maxWidth: 460 }}>
            Each branch of your company runs a different playbook — so each one gets a dashboard built for that playbook. No generic CRM, no duct-taped spreadsheets. Just the metrics, stages, and trackers that branch actually uses.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {branches.map(([tag,title,body,c],i) => (
            <a key={i} href="product.html" style={{ textDecoration: 'none', color: 'inherit' }}>
              <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px dashed #3d82fb', borderRadius: 18, padding: 20, height: '100%', transition: 'background .15s, border-color .15s' }}
                   onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; e.currentTarget.style.borderColor = c; }}
                   onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.borderColor = '#3d82fb'; }}>
                <div style={{ width: 10, height: 10, background: c, borderRadius: 2, marginBottom: 14 }}/>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '1.08px', color: c, marginBottom: 8 }}>{tag}</div>
                <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.3px', marginBottom: 6, fontFeatureSettings: 'var(--otf-heading)' }}>{title}</div>
                <div style={{ fontSize: 12.5, color: '#b6cfff', lineHeight: 1.5 }}>{body}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Integrations
function Integrations() {
  const tiles = [
    { tag: 'CRM',     title: 'JobNimbus',      body: 'Live two-way sync on stages, contacts, and notes.', color: '#146ef5' },
    { tag: 'BOOKS',   title: 'QuickBooks Online', body: 'Push job costs and supplement payments automatically.', color: '#84e7a5' },
    { tag: 'FIELD',   title: 'Jobber',          body: 'Pull jobs, quotes, and scheduled work into one operations view.', color: '#fbbd41' },
    { tag: 'PHOTOS',  title: 'CompanyCam',      body: 'Field photos and job docs sync straight to the right project record.', color: '#c1b0ff' },
    { tag: 'PAY',     title: 'Stripe',          body: 'Payments and invoices flow back into your job-cost dashboard automatically.', color: '#fc7981' },
    { tag: 'SHEETS',  title: 'Google Sheets',   body: 'Mirror any dashboard to a live sheet for your team.', color: '#3bd3fd' },
  ];
  return (
    <section style={{ padding: '40px 40px', maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#55534e', marginBottom: 14 }}>WORKS WITH THE STACK YOU ALREADY RUN</div>
        <h2 style={{ margin: 0, fontSize: 44, fontWeight: 600, letterSpacing: '-1.4px', lineHeight: 1.05, fontFeatureSettings: 'var(--otf-heading)' }}>
          Same tools. Way more visibility.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {tiles.map((t, i) => (
          <div key={i} style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 24, padding: 22, boxShadow: i%2?'none':'var(--shadow-clay)' }}>
            <div style={{ width: 48, height: 48, background: t.color, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, color: '#000', marginBottom: 14 }}>{t.tag}</div>
            <h3 style={{ margin: '0 0 6px', fontSize: 19, fontWeight: 600, letterSpacing: '-0.38px', fontFeatureSettings: 'var(--otf-heading)' }}>{t.title}</h3>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: '#55534e' }}>{t.body}</p>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 28, fontSize: 12, fontWeight: 600, letterSpacing: '1.4px', color: '#9f9b93', fontFamily: 'var(--font-mono)' }}>AND AN ENDLESS AMOUNT OF MORE CONNECTIONS</div>
    </section>
  );
}

// --- FAQ section
function FAQ({ items }) {
  const [open, setOpen] = React.useState(0);
  const qs = items || [
    ['Is Noisy a software, or an agency?', 'Software — built for contractors who want to run their business on real numbers. Members get the platform at discounted monthly rates plus access to our upcoming automation marketplace with member-only pricing. The platform is yours the moment you log in.'],
    ['Do I need to switch my current software to use it?', 'No. Noisy sits on top of what you already use — nothing gets ripped out, nothing gets replaced. Self-serve works from day one with manual connections inside your account. The upcoming Member marketplace will offer plug-and-play automations that handle the connections and workflows your business needs.'],
    ['Who fills out the data on the dashboards?', 'Nobody — the dashboards pull live data directly from the tools your team already uses. The moment you connect your stack, your numbers populate automatically. If you need custom KPI tracking or manual rep entry, that\u2019s available on request. Members get priority queue access to new integrations as they ship.'],
    ['What branches do you support?', 'Sales, Marketing, Operations, Finance, and Production — all live today. Members get first access to new dashboards and branches as we ship them.'],
    ['Is this only for roofing contractors?', 'No. Noisy is built for contractors across every trade: roofing, HVAC, plumbing, general contracting, and more. The dashboards, KPIs, and pipeline stages are built around how contractor businesses operate, not one specific trade. If you run jobs, manage a team, and want to know your numbers, Noisy is built for you.'],
  ];
  return (
    <section style={{ padding: '40px 40px', maxWidth: 900, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 32 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '1.08px', color: '#55534e', marginBottom: 14 }}>FREQUENTLY ASKED</div>
        <h2 style={{ margin: 0, fontSize: 44, fontWeight: 600, letterSpacing: '-1.4px', lineHeight: 1.05, fontFeatureSettings: 'var(--otf-heading)' }}>
          Questions operators ask.
        </h2>
      </div>
      <div>
        {qs.map(([q, a], i) => (
          <div key={i} style={{ background: '#fff', border: '1px solid var(--oat-border)', borderRadius: 16, padding: '18px 22px', marginBottom: 10, boxShadow: open === i ? 'var(--shadow-clay)' : 'none', transition: 'box-shadow .2s' }}>
            <button onClick={() => setOpen(open === i ? -1 : i)} style={{ background: 'none', border: 'none', padding: 0, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textAlign: 'left', cursor: 'pointer', fontFamily: 'var(--font-sans)' }}>
              <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.3px' }}>{q}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 20, color: '#146ef5', width: 24, textAlign: 'center' }}>{open === i ? '−' : '+'}</span>
            </button>
            {open === i && (
              <p style={{ margin: '14px 0 4px', fontSize: 15, lineHeight: 1.6, color: '#55534e' }}>{a}</p>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { HomeHero, TwoTierRow, RoleSplit, AllInOne, Integrations, FAQ, LockedTile });