// ============================================================
// One Roof Labs — Home sections (below the hero)
// ============================================================
const { StatCounter: SC, RingO: Ring } = window;

function SectionHead({ index, kicker, title, sub, align = 'left' }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === 'center' ? 760 : 720, margin: align === 'center' ? '0 auto' : 0 }}>
      <div className="kicker" style={{ marginBottom: 18, display: 'flex', gap: 14, justifyContent: align === 'center' ? 'center' : 'flex-start' }}>
        {index && <span style={{ color: 'var(--faint)' }}>{index}</span>}<span>{kicker}</span>
      </div>
      <h2 className="display" style={{ fontSize: 'clamp(32px, 4.6vw, 56px)', margin: 0, color: 'var(--paper)' }}>{title}</h2>
      {sub && <p className="lead" style={{ marginTop: 20, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0, maxWidth: 620 }}>{sub}</p>}
    </div>
  );
}

// ---- HOW IT WORKS — Fly / Score / Deliver ----
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Fly', d: 'A drone-mounted, survey-grade LiDAR sensor scans entire neighborhoods at 400ft — 100 km² a day, 1cm accuracy, 450+ points per square meter.',
      specs: [['Sensor', 'Survey-grade LiDAR'], ['Pulse rate', '350 kHz'], ['Accuracy', '1cm RMSE']] },
    { n: '02', t: 'Score', d: 'Every roof becomes a georeferenced 3D polygon. An AI classifier reads LiDAR geometry, RGB imagery and parcel data to score damage 0–100.',
      specs: [['Inputs', 'LiDAR + RGB'], ['Output', 'Score 0–100'], ['Throughput', '165k / 36h']] },
    { n: '03', t: 'Deliver', d: 'Roofs above threshold become qualified leads — address, owner, damage type, estimated job value and photos — routed to the contractor portal.',
      specs: [['Per lead', 'Full report'], ['Routing', 'Territory'], ['Cold calls', 'Zero']] },
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <SectionHead index="A.0" kicker="How it works" title="Fly. Score. Deliver."
          sub="A technology company that happens to fly drones — not a drone company. The pipeline, end to end." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 1, marginTop: 64,
             border: '1px solid var(--hair)', background: 'var(--hair)' }}>
          {steps.map((s) => (
            <div key={s.n} className="card reveal" style={{ border: 0, background: 'var(--bg)', padding: '40px 34px' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <span className="display" style={{ fontSize: 40, color: 'var(--paper)' }}>{s.t}</span>
                <span className="mono" style={{ fontSize: 13, color: 'var(--faint)' }}>{s.n}</span>
              </div>
              <p style={{ color: 'var(--paper-dim)', fontSize: 15.5, lineHeight: 1.62, margin: '20px 0 28px' }}>{s.d}</p>
              <div>{s.specs.map(([k, v]) => (
                <div className="spec-row" key={k}><span className="k">{k}</span><span className="v">{v}</span></div>
              ))}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 36 }}>
          <a href="#map" className="btn btn--ghost">Explore the scored map <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ---- STATS BAR ----
function StatsBar() {
  const stats = [
    { v: 165000, label: 'Roofs scanned', sfx: '' },
    { v: 41250, label: 'Above damage threshold', sfx: '' },
    { v: 0, label: 'Lead acquisition cost', prefix: '$' },
    { v: 36, label: 'Hours: flight → leads', sfx: 'h' },
  ];
  return (
    <section className="section--tight" style={{ borderTop: '1px solid var(--hair)', borderBottom: '1px solid var(--hair)', background: 'var(--bg-2)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '40px 56px' }}>
          {stats.map((s, i) => (
            <div key={i} className="reveal" style={{ borderLeft: '1px solid var(--hair)', paddingLeft: 28, paddingRight: 16 }}>
              <div className="stat-num" style={{ whiteSpace: 'nowrap' }}><SC value={s.v} prefix={s.prefix || ''} suffix={s.sfx || ''} /></div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- AUDIENCE SPLIT — Contractors / Carriers ----
function Audience() {
  const blocks = [
    { id: 'contractors', tag: 'For Contractors', title: 'Stop knocking on roofs that don\u2019t need you.',
      points: ['Pre-qualified leads — only roofs that need replacement', 'Damage type and job value scored before the first call', 'Territory exclusivity — lock your market', 'No more wasted inspections'],
      cta: 'Claim your territory' },
    { id: 'carriers', tag: 'For Insurance Carriers', title: 'Know your exposure before you renew.',
      points: ['Portfolio-wide roof condition scoring', 'Pre-renewal property intelligence', 'Post-storm assessment within 48 hours', 'Historical change detection over time'],
      cta: 'Request a data sample' },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--hair)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 28 }}>
          {blocks.map((b) => (
            <div key={b.id} id={b.id} className="card ticked reveal" style={{ padding: '44px 40px', scrollMarginTop: 90 }}>
              <div className="kicker" style={{ marginBottom: 24 }}>{b.tag}</div>
              <h3 className="display" style={{ fontSize: 'clamp(26px, 3vw, 36px)', margin: 0, color: 'var(--paper)', maxWidth: 380 }}>{b.title}</h3>
              <div style={{ margin: '30px 0 34px', display: 'flex', flexDirection: 'column', gap: 14 }}>
                {b.points.map((p) => (
                  <div key={p} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <span className="mono" style={{ color: 'var(--score-ok)', fontSize: 14, marginTop: 1 }}>+</span>
                    <span style={{ color: 'var(--paper-dim)', fontSize: 15.5, lineHeight: 1.5 }}>{p}</span>
                  </div>
                ))}
              </div>
              <a href="#contact" className="btn">{b.cta} <span className="arrow">→</span></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- ABOUT ----
function About() {
  const tech = [['Aerial collection', 'Drone-mounted LiDAR'], ['Damage classifier', 'AI vision · LiDAR + RGB'],
    ['Geospatial platform', 'PostGIS + Mapbox'], ['Positioning', 'RTK GPS · 1cm']];
  const markets = ['Colorado Springs, CO', 'St. Louis, MO', 'San Diego, CA', 'Chattanooga, TN'];
  return (
    <section className="section" id="about" style={{ scrollMarginTop: 80 }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 64 }}>
          <div>
            <SectionHead index="D.0" kicker="The mission" title="Collect what already exists." />
            <p className="lead" style={{ marginTop: 24, maxWidth: 520 }}>
              The information needed to find every roof that needs replacement already exists —
              it just hasn’t been collected. We collect it.
            </p>
            <div className="kicker" style={{ margin: '44px 0 18px' }} id="markets">Active markets</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, maxWidth: 460 }}>
              {markets.map((m, i) => (
                <div key={m} className="mono" style={{ fontSize: 14, color: 'var(--paper-dim)', display: 'flex', gap: 10, alignItems: 'center' }}>
                  <span style={{ color: i === 0 ? 'var(--score-ok)' : 'var(--faint)' }}>{i === 0 ? '◉' : '○'}</span>{m}
                </div>
              ))}
            </div>
          </div>
          <div className="card" style={{ alignSelf: 'start' }}>
            <div className="kicker" style={{ marginBottom: 8 }}>The technology</div>
            {tech.map(([k, v]) => (
              <div className="spec-row" key={k}><span className="k">{k}</span><span className="v">{v}</span></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- CLOSING CTA ----
function ClosingCTA() {
  return (
    <section className="section" id="contact" style={{ scrollMarginTop: 80, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
      <div className="gridlines" />
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <span style={{ width: 64, height: 64, display: 'inline-block', marginBottom: 28 }}><Ring size={64} /></span>
        <h2 className="display" style={{ fontSize: 'clamp(34px, 5vw, 64px)', margin: 0, color: 'var(--paper)', maxWidth: 800, marginInline: 'auto' }}>
          Your next 2,000 jobs<br />are already identified.
        </h2>
        <p className="lead" style={{ maxWidth: 520, margin: '24px auto 40px' }}>
          We scanned the city. We scored the roofs. The list is ready when you are.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#map" className="btn">Explore the map <span className="arrow">→</span></a>
          <a href="#contractors" className="btn btn--ghost">Claim your territory</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, StatsBar, Audience, About, ClosingCTA });