// ============================================================
// One Roof Labs — Home hero directions (3, switchable via Tweaks)
// ============================================================
const { StatCounter } = window;

// Shared CTA pair
function HeroCTAs({ light }) {
  return (
    <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
      <a href="#contractors" className="btn">For Contractors <span className="arrow">→</span></a>
      <a href="#carriers" className="btn btn--ghost">For Carriers <span className="arrow">→</span></a>
    </div>
  );
}

function CoordReadout({ style = {} }) {
  return (
    <div className="mono" style={{ fontSize: 11.5, letterSpacing: '0.16em', color: 'var(--faint)',
         display: 'flex', gap: 22, flexWrap: 'wrap', ...style }}>
      <span>LAT 38.8339° N</span><span>LON 104.8214° W</span>
      <span>ALT 400 ft AGL</span><span>LiDAR · 350 kHz</span>
    </div>
  );
}

// ---- Direction A: Manifesto — big left-aligned Cinzel statement ----
function HeroManifesto() {
  return (
    <div className="wrap" style={{ position: 'relative', zIndex: 2, width: '100%' }}>
      <div style={{ maxWidth: 980 }}>
        <div className="kicker reveal in" style={{ marginBottom: 28 }}>
          Aerial Roof Intelligence · Colorado Springs
        </div>
        <h1 className="display" style={{ fontSize: 'clamp(46px, 8vw, 116px)', margin: 0, color: 'var(--paper)' }}>
          Every roof<br />in the city.<br /><span style={{ fontStyle: 'normal', color: 'var(--paper-dim)' }}>Scored.</span>
        </h1>
        <p className="lead" style={{ maxWidth: 600, marginTop: 32 }}>
          We fly LiDAR over entire cities and score every roof for damage —
          so the next job is identified before anyone knocks a single door.
        </p>
        <div style={{ marginTop: 40 }}><HeroCTAs /></div>
        <CoordReadout style={{ marginTop: 56 }} />
      </div>
    </div>
  );
}

// ---- Direction B: Briefing — data-forward, the number leads ----
function HeroBriefing() {
  return (
    <div className="wrap" style={{ position: 'relative', zIndex: 2, width: '100%', textAlign: 'center' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div className="kicker reveal in" style={{ marginBottom: 36, justifyContent: 'center' }}>
          Intelligence Briefing — 165,000 parcels scanned
        </div>
        <div className="display" style={{ fontSize: 'clamp(72px, 14vw, 200px)', lineHeight: 0.92, color: 'var(--paper)' }}>
          <StatCounter value={41250} />
        </div>
        <h1 className="display" style={{ fontSize: 'clamp(24px, 3.4vw, 44px)', fontWeight: 500, margin: '18px 0 0', color: 'var(--paper-dim)' }}>
          roofs in Colorado Springs need replacement.<br />
          <span style={{ color: 'var(--paper)' }}>We know which ones.</span>
        </h1>
        <p className="lead" style={{ maxWidth: 560, margin: '30px auto 0' }}>
          City-scale LiDAR, scored by AI, delivered as qualified leads — with zero cold calls.
        </p>
        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}><HeroCTAs /></div>
      </div>
    </div>
  );
}

// ---- Direction C: Terminal — split, live scan readout ----
function ScanLog() {
  const lines = React.useMemo(() => [
    '> initializing flight log CS-0517',
    '  RTK fix acquired — 1cm vertical RMSE',
    '  LiDAR pulse rate ...... 350 kHz',
    '  return density ........ 463 pts/m²',
    '> ingesting point cloud .......... 2.4B returns',
    '  PDAL ground filter .... OK',
    '  building extraction ... 165,000 polygons',
    '> classifier pass [damage v4]',
    '  scored 0–100 ............ done',
    '  flagged ≥ threshold ..... 41,250',
    '> generating leads ......... 36h flight→leads',
    '  status: READY',
  ], []);
  const [shown, setShown] = React.useState(0);
  React.useEffect(() => {
    if (shown >= lines.length) return;
    const t = setTimeout(() => setShown((s) => s + 1), shown === 0 ? 400 : 360);
    return () => clearTimeout(t);
  }, [shown, lines.length]);
  return (
    <div className="card ticked" style={{ background: 'rgba(26,21,15,0.72)', backdropFilter: 'blur(4px)', padding: '26px 28px', minHeight: 360 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18,
           borderBottom: '1px solid var(--hair)', paddingBottom: 14 }}>
        <span className="kicker" style={{ fontSize: 10.5 }}>scan_pipeline.log</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--score-ok)' }}>● LIVE</span>
      </div>
      <div className="mono" style={{ fontSize: 13.5, lineHeight: 1.95, color: 'var(--muted)' }}>
        {lines.slice(0, shown).map((l, i) => (
          <div key={i} style={{ color: l.startsWith('>') ? 'var(--paper)' : 'var(--muted)' }}>
            {l.replace(/^> /, '')}{l.startsWith('>') ? '' : ''}
          </div>
        ))}
        {shown < lines.length && <span style={{ color: 'var(--paper)' }}>▍</span>}
        {shown >= lines.length && <span style={{ animation: 'none', color: 'var(--score-ok)' }}>▍</span>}
      </div>
    </div>
  );
}

function HeroTerminal() {
  return (
    <div className="wrap" style={{ position: 'relative', zIndex: 2, width: '100%' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,0.95fr)', gap: 56, alignItems: 'center' }}
           className="hero-split">
        <div>
          <div className="kicker reveal in" style={{ marginBottom: 26 }}>Flight CS-0517 · 100 km²/day</div>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 6vw, 86px)', margin: 0, color: 'var(--paper)' }}>
            We see<br />every roof.
          </h1>
          <p className="lead" style={{ maxWidth: 480, marginTop: 28 }}>
            Drone-mounted LiDAR, an AI damage classifier, and a city of qualified
            leads — 36 hours from flight to your portal.
          </p>
          <div style={{ marginTop: 36 }}><HeroCTAs /></div>
        </div>
        <ScanLog />
      </div>
    </div>
  );
}

function Hero({ which, density = 1 }) {
  const Comp = which === 'briefing' ? HeroBriefing : which === 'terminal' ? HeroTerminal : HeroManifesto;
  return (
    <section style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden', paddingTop: 90, paddingBottom: 60 }}>
      <div className="gridlines" />
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, opacity: 0.9 }}>
        <window.PointCloudCanvas density={density} />
      </div>
      <div style={{ position: 'absolute', inset: 0, zIndex: 1,
        background: 'radial-gradient(ellipse 70% 60% at 30% 40%, transparent, rgba(16,13,9,0.55) 80%)' }} />
      <Comp />
      <div className="mono" style={{ position: 'absolute', bottom: 26, left: '50%', transform: 'translateX(-50%)',
           fontSize: 10.5, letterSpacing: '0.3em', color: 'var(--faint)', zIndex: 2 }}>
        SCROLL ↓
      </div>
    </section>
  );
}

Object.assign(window, { Hero });
