// Home, client-facing landing
const Home = ({ nav }) => {
  const D = window.__DSC_DATA;
  const featured = [...D.operators].sort((a, b) => (b.rating - a.rating) || (b.fleet - a.fleet)).slice(0, 3);
  const [query, setQuery] = React.useState('');
  const [locF, setLocF] = React.useState('');

  // Rotating word animation
  const rotatingWords = ['companies', 'designers', 'manufacturers'];
  const [wordIdx, setWordIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setWordIdx(i => (i + 1) % rotatingWords.length), 2200);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="page">
      {/* Hero */}
      <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg)' }}>
        <div className="container" style={{ padding: '56px 32px 48px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>
                <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--accent)', borderRadius: '50%', marginRight: 8, verticalAlign: 'middle' }} />
                Est. 2024 · Independent world directory
              </div>
              <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 'clamp(40px, 5.5vw, 72px)', lineHeight: 1.02, letterSpacing: '-0.03em', fontWeight: 400, margin: '0 0 24px' }}>
                The world directory<br />of drone show<br />
                <RotatingWord words={rotatingWords} idx={wordIdx} />
              </h1>
              <p style={{ fontSize: 17, color: 'var(--ink-2)', maxWidth: 520, margin: '0 0 28px', lineHeight: 1.55 }}>
                Find the right team, anywhere on earth. Compare verified operators, manufacturers and designers across {new Set(D.operators.map(o => o.country)).size} countries by location, fleet size, specialty, and past work.
              </p>

              {/* Search bar */}
              <div style={{ display: 'flex', gap: 0, background: 'var(--bg)', border: '1px solid var(--line-2)', borderRadius: 999, padding: 4, maxWidth: 640 }}>
                <div style={{ flex: 1.3, display: 'flex', alignItems: 'center', padding: '0 18px' }}>
                  <span className="mono muted" style={{ fontSize: 10, marginRight: 10 }}>WHAT</span>
                  <input className="input" style={{ border: 0, padding: '10px 0', background: 'transparent' }} placeholder="Wedding · brand activation · stadium…" value={query} onChange={e => setQuery(e.target.value)} />
                </div>
                <div className="vhair" style={{ margin: '8px 0' }} />
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', padding: '0 18px' }}>
                  <span className="mono muted" style={{ fontSize: 10, marginRight: 10 }}>WHERE</span>
                  <input className="input" style={{ border: 0, padding: '10px 0', background: 'transparent' }} placeholder="City or region" value={locF} onChange={e => setLocF(e.target.value)} />
                </div>
                <button className="btn btn-primary" style={{ margin: 0 }} onClick={() => nav({ page: 'directory', query: { q: query, loc: locF } })}>
                  Search →
                </button>
              </div>

              <div style={{ marginTop: 20, display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
                <span className="mono muted" style={{ fontSize: 11 }}>POPULAR:</span>
                {['Weddings', 'Stadium shows', 'Brand activations', 'Municipal', 'Festivals'].map(t => (
                  <button key={t} className="chip" onClick={() => nav({ page: 'directory', query: { spec: t } })} style={{ cursor: 'pointer' }}>{t}</button>
                ))}
              </div>
            </div>

            <div style={{ position: 'relative' }}>
              <DotFormation variant="logo" color="#4a6fff" density={180} label="LIVE" subtitle={`${D.operators.length} verified operators`} size="square" />
              <div style={{ position: 'absolute', top: -16, right: -16, background: 'var(--bg)', border: '1px solid var(--line-2)', padding: '12px 16px', borderRadius: 4, boxShadow: '0 12px 24px -12px rgba(0,0,0,0.15)' }}>
                <div className="eyebrow" style={{ marginBottom: 4 }}>This quarter</div>
                <div style={{ fontFamily: 'var(--ff-display)', fontSize: 28, lineHeight: 1 }}>+32%</div>
                <div className="mono muted" style={{ fontSize: 11 }}>new listings</div>
              </div>
              <div style={{ position: 'absolute', bottom: -16, left: -16, background: 'var(--bg)', border: '1px solid var(--line-2)', padding: '12px 16px', borderRadius: 4, boxShadow: '0 12px 24px -12px rgba(0,0,0,0.15)' }}>
                <div className="eyebrow" style={{ marginBottom: 4 }}>Median lead response</div>
                <div style={{ fontFamily: 'var(--ff-display)', fontSize: 28, lineHeight: 1 }}>4h 12m</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Three-door */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="container" style={{ padding: '56px 32px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>The industry, in one place</div>
              <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 36, margin: 0, letterSpacing: '-0.02em', fontWeight: 400 }}>Three directories. One network.</h2>
            </div>
          </div>

          <div className="grid grid-3">
            {[
              { k: 'directory', icon: 'arc', color: '#4a6fff', title: 'Operators', count: String(D.operators.length), sub: 'Drone show companies', desc: 'Flying crews worldwide. Filter by country, fleet size, show type, insurance, and technology platform.', cta: 'Browse operators' },
              { k: 'directory-mf', icon: 'ring', color: '#ff8a4c', title: 'Manufacturers and Tools', count: String(D.manufacturers.length), sub: 'Hardware & tech suppliers', desc: 'Show drones, LEDs, batteries, RTK/GPS systems, ground control software. Vetted B2B suppliers.', cta: 'Browse manufacturers and tools' },
              { k: 'directory-ds', icon: 'star', color: '#b47cff', title: 'Designers', count: String(D.designers.length), sub: 'Formation creators', desc: 'Independent animators and studios selling formation packs, templates, and custom commissions.', cta: 'Browse designers' },
            ].map(d => (
              <div key={d.k} className="card hover-lift" style={{ cursor: 'pointer', overflow: 'hidden' }} onClick={() => nav({ page: d.k })}>
                <DotFormation variant={d.icon} color={d.color} density={90} />
                <div style={{ padding: 24 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 4 }}>
                    <h3 style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>{d.title}</h3>
                    <span className="mono muted" style={{ fontSize: 14 }}>{d.count}</span>
                  </div>
                  <div className="mono muted" style={{ fontSize: 11, marginBottom: 14, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{d.sub}</div>
                  <p style={{ margin: '0 0 20px', color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.55 }}>{d.desc}</p>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 500 }}>
                    {d.cta} <span style={{ marginLeft: 2 }}>→</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured operators */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="container" style={{ padding: '56px 32px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Featured operators</div>
              <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 32, margin: 0, letterSpacing: '-0.02em', fontWeight: 400 }}>Top-rated this month</h2>
            </div>
            <a onClick={() => nav({ page: 'directory' })} style={{ cursor: 'pointer', fontSize: 13, fontWeight: 500 }}>See all {D.operators.length} →</a>
          </div>
          <div className="grid grid-3">
            {featured.map(op => <OperatorCard key={op.id} op={op} onClick={() => nav({ page: 'operator', id: op.id })} />)}
          </div>
        </div>
      </section>

      {/* RFP strip */}
      <section style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
        <div className="container" style={{ padding: '48px 32px', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: 'oklch(70% 0.012 260)', marginBottom: 10 }}>Not sure who to pick?</div>
            <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 40, margin: '0 0 10px', letterSpacing: '-0.02em', fontWeight: 400 }}>Post one RFP. Get matched with up to five operators.</h2>
            <p style={{ margin: 0, color: 'oklch(76% 0.012 260)', fontSize: 15, maxWidth: 620 }}>
              Describe your event once. We route it to operators who match your location, date, and budget, and you hear back within 48 hours. Free for clients.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <button className="btn btn-lg" style={{ background: 'var(--bg)', color: 'var(--ink)', borderColor: 'var(--bg)' }} onClick={() => nav({ page: 'rfp' })}>Post an RFP →</button>
            <span className="mono" style={{ fontSize: 11, color: 'oklch(70% 0.012 260)', textAlign: 'center' }}>~3 min · no signup</span>
          </div>
        </div>
      </section>

      {/* By the numbers */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="container" style={{ padding: '56px 32px' }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>The network</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {[
              [String(D.operators.length),     'Listed operators',      `Across ${new Set(D.operators.map(o => o.country)).size} countries`],
              [String(D.manufacturers.length), 'Manufacturer partners', 'Drones · LEDs · RTK · batteries'],
              [String(D.designers.length),     'Listed designers',      'Independent animators and studios'],
            ].map(([n, l, s]) => (
              <div key={l} style={{ borderLeft: '1px solid var(--line)', paddingLeft: 20 }}>
                <div style={{ fontFamily: 'var(--ff-display)', fontSize: 56, lineHeight: 1, letterSpacing: '-0.03em', marginBottom: 8, fontWeight: 400 }}>{n}</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>{l}</div>
                <div className="mono muted" style={{ fontSize: 11 }}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Journal preview */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="container" style={{ padding: '56px 32px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>From the Journal</div>
              <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 32, margin: 0, letterSpacing: '-0.02em', fontWeight: 400 }}>Reporting &amp; buyer's guides</h2>
            </div>
            <a onClick={() => nav({ page: 'blog' })} style={{ cursor: 'pointer', fontSize: 13, fontWeight: 500 }}>All articles →</a>
          </div>
          <div className="grid grid-3">
            {D.posts.slice(0, 3).map(p => (
              <article key={p.id} className="card hover-lift" onClick={() => nav({ page: 'blog-post', id: p.id })} style={{ cursor: 'pointer', overflow: 'hidden' }}>
                <DotFormation variant={['grid','wave','skyline'][D.posts.indexOf(p) % 3]} color={p.hex} density={80} />
                <div style={{ padding: 20 }}>
                  <div className="mono muted" style={{ fontSize: 11, marginBottom: 10, textTransform: 'uppercase' }}>{p.category} · {p.readTime}</div>
                  <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 22, margin: '0 0 10px', fontWeight: 400, letterSpacing: '-0.01em', lineHeight: 1.15 }}>{p.title}</h3>
                  <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.55 }}>{p.excerpt}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* For operators strip */}
      <section>
        <div className="container" style={{ padding: '56px 32px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            <div className="card" style={{ padding: 32 }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>For operators</div>
              <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 28, margin: '0 0 12px', fontWeight: 400, letterSpacing: '-0.02em' }}>Your profile, working while you fly.</h3>
              <p style={{ margin: '0 0 20px', color: 'var(--ink-2)', fontSize: 14 }}>SEO-optimized listing, inbound lead form, analytics dashboard. Free tier available, upgrade when the leads start coming in.</p>
              <div style={{ display: 'flex', gap: 10 }}>
                <button className="btn btn-primary" onClick={() => nav({ page: 'pricing' })}>See pricing</button>
                <button className="btn" onClick={() => nav({ page: 'admin' })}>Example dashboard</button>
              </div>
            </div>
            <div className="card" style={{ padding: 32 }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>For manufacturers</div>
              <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 28, margin: '0 0 12px', fontWeight: 400, letterSpacing: '-0.02em' }}>Reach the exact operators who buy your gear.</h3>
              <p style={{ margin: '0 0 20px', color: 'var(--ink-2)', fontSize: 14 }}>Sponsored placements on every operator profile. Social-proof tagging. B2B lead capture built in.</p>
              <div style={{ display: 'flex', gap: 10 }}>
                <button className="btn btn-primary" onClick={() => nav({ page: 'pricing' })}>Advertiser pricing</button>
                <button className="btn" onClick={() => nav({ page: 'directory-mf' })}>See listings</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { Home });

// Rotating word, animated
const RotatingWord = ({ words, idx }) => {
  const longest = words.reduce((a, b) => a.length > b.length ? a : b);
  return (
    <span style={{ position: 'relative', display: 'inline-block', verticalAlign: 'baseline', color: 'var(--accent)' }}>
      <em style={{ fontStyle: 'italic', visibility: 'hidden', whiteSpace: 'nowrap' }}>{longest}.</em>
      <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, right: 0, overflow: 'hidden' }}>
        {words.map((w, i) => (
          <em key={w}
            style={{
              fontStyle: 'italic',
              position: 'absolute',
              left: 0,
              top: 0,
              whiteSpace: 'nowrap',
              transform: i === idx ? 'translateY(0)' : (i < idx || (idx === 0 && i === words.length - 1) ? 'translateY(-110%)' : 'translateY(110%)'),
              opacity: i === idx ? 1 : 0,
              transition: 'transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s',
            }}>{w}.</em>
        ))}
      </span>
    </span>
  );
};

Object.assign(window, { RotatingWord });