// Home page — hero variants + about + process + specs strip

function HeroSpectrum({ onNavigate }) {
  const clock = useClock();
  return (
    <div className="hero">
      <div className="hero-topbar">
        <div className="chip">FEBLOW.PRODUCTION / v2026.04 <span>· LIVE SOUND ENGINEERING</span></div>
        <div>SESSION {fmtDate(clock)} — {fmtTime(clock)}</div>
        <div style={{ textAlign: 'right' }}>CH 01/48 · 48 kHz / 24-bit</div>
      </div>
      <div className="hero-grid">
        <div>
          <h1 className="hero-title">
            <span>用技術和愛</span><br />
            <span className="stroke">做音響</span><br />
            <span className="accent">—— sound by design.</span>
          </h1>
          <p className="hero-sub">
            <Bi
              zh="我們相信音響不只是經驗與手感，更是可以被測量、被計算、被驗證的專業工程。鐵吹製作以完善的工作流程和數據化工具，為每一場演出打造最準確的聲音體驗。"
              en="Sound is more than instinct — it's measured, modelled, verified. Feblow applies engineering rigor to every live event, so every seat gets the same honest signal."
            />
          </p>
          <div className="hero-cta-row">
            <button className="btn btn-primary" onClick={() => onNavigate('services')}>
              探索服務 EXPLORE <span className="arr">→</span>
            </button>
            <button className="btn" onClick={() => onNavigate('cases')}>
              製作案例 CASE LOG <span className="arr">→</span>
            </button>
          </div>
        </div>
        <div className="hero-right">
          <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
            <div style={{ flex: 1 }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 12 }}>
                FREQUENCY RESPONSE · REAL-TIME
              </div>
              <SpectrumAnalyzer height={220} />
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', marginTop: 10, display: 'flex', justifyContent: 'space-between' }}>
                <span>SPAN: 20 Hz – 20 kHz</span>
                <span>RTA · 1/24 OCT</span>
                <span style={{ color: 'var(--accent)' }}>● CAPTURING</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, paddingTop: 22 }}>
              <LevelMeter label="L" target={0.72} />
              <LevelMeter label="R" target={0.68} />
            </div>
          </div>
        </div>
      </div>
      <div className="hero-metrics">
        <div className="hero-metric"><div className="k">PROJECTS · 累計製作</div><div className="v">284<span className="unit">場</span></div></div>
        <div className="hero-metric"><div className="k">MAX SPL · 最大聲壓</div><div className="v">138<span className="unit">dB</span></div></div>
        <div className="hero-metric"><div className="k">COVERAGE · 涵蓋精度</div><div className="v">±1.5<span className="unit">dB</span></div></div>
        <div className="hero-metric"><div className="k">SINCE · 成立於</div><div className="v">2018</div></div>
      </div>
    </div>
  );
}

function HeroManifesto({ onNavigate }) {
  return (
    <div className="hero" style={{ padding: '56px 32px 0' }}>
      <div className="hero-topbar">
        <div className="chip">MANIFESTO / 01</div>
        <div>FEBLOW PRODUCTION</div>
        <div style={{ textAlign: 'right' }}>鐵吹製作</div>
      </div>
      <div style={{ padding: '32px 0 48px', textAlign: 'center' }}>
        <h1 style={{ fontSize: 'clamp(40px, 7vw, 110px)', lineHeight: 0.95, letterSpacing: '-0.035em', fontWeight: 500, maxWidth: '14ch', margin: '0 auto' }}>
          每一個<span style={{ color: 'var(--accent)' }}>座位</span>，<br/>
          都值得一個<span style={{ WebkitTextStroke: '1px var(--text)', color: 'transparent' }}>誠實</span>的聲音。
        </h1>
        <p className="mono" style={{ color: 'var(--muted)', fontSize: 13, letterSpacing: '0.1em', marginTop: 32 }}>
          EVERY SEAT DESERVES AN HONEST SIGNAL.
        </p>
        <div style={{ marginTop: 48, display: 'flex', justifyContent: 'center', gap: 12 }}>
          <button className="btn btn-primary" onClick={() => onNavigate('services')}>EXPLORE SERVICES <span className="arr">→</span></button>
          <button className="btn" onClick={() => onNavigate('contact')}>START PROJECT <span className="arr">→</span></button>
        </div>
        <div style={{ marginTop: 64, display: 'flex', justifyContent: 'center' }}>
          <SignalChain />
        </div>
      </div>
      <div className="hero-metrics">
        <div className="hero-metric"><div className="k">PROJECTS</div><div className="v">284</div></div>
        <div className="hero-metric"><div className="k">VENUES</div><div className="v">96</div></div>
        <div className="hero-metric"><div className="k">ENGINEERS</div><div className="v">12</div></div>
        <div className="hero-metric"><div className="k">SINCE</div><div className="v">2018</div></div>
      </div>
    </div>
  );
}

function HeroWaveform({ onNavigate }) {
  return (
    <div className="hero" style={{ padding: 0, border: '1px solid var(--line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 560 }}>
        <div style={{ padding: '56px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', borderRight: '1px solid var(--line)' }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.12em' }}>
            FEBLOW · 鐵吹製作 · EST. 2018
          </div>
          <div>
            <h1 style={{ fontSize: 'clamp(48px, 6vw, 88px)', lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 500 }}>
              把每一個<br/>
              <span className="accent" style={{ color: 'var(--accent)' }}>決定</span>都<br/>
              <span style={{ WebkitTextStroke: '1px var(--text)', color: 'transparent' }}>算清楚。</span>
            </h1>
            <p className="mono" style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 32, lineHeight: 1.8, maxWidth: 420 }}>
              SIMULATION · MEASUREMENT · CALIBRATION<br/>
              <span style={{ color: 'var(--muted)' }}>我們用 3D 模擬、測量軟體與校正工具取代經驗法則，讓每場演出都有憑有據。</span>
            </p>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <button className="btn btn-primary" onClick={() => onNavigate('cases')}>VIEW CASE LOG <span className="arr">→</span></button>
            <button className="btn" onClick={() => onNavigate('tech')}>TECH NOTES <span className="arr">→</span></button>
          </div>
        </div>
        <div style={{ position: 'relative', background: '#0a0b0d', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 32, padding: 32 }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 8 }}>L · 127.4 dB SPL</div>
            <Waveform height={100} seed={2} />
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 8 }}>R · 126.9 dB SPL</div>
            <Waveform height={100} seed={7} />
          </div>
          <div style={{ borderTop: '1px dashed var(--line)', paddingTop: 24 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 12 }}>DISPERSION · 90° × 40°</div>
            <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
              <PolarPattern size={160} />
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-2)', lineHeight: 1.9 }}>
                <div>COVERAGE <span style={{ color: 'var(--accent)' }}>±1.5 dB</span></div>
                <div>REVERB  <span style={{ color: 'var(--text)' }}>1.8 s</span></div>
                <div>STI     <span style={{ color: 'var(--green)' }}>0.64 GOOD</span></div>
                <div>CROSSFIRE <span style={{ color: 'var(--text)' }}>NONE</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="hero-metrics" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="hero-metric"><div className="k">PROJECTS</div><div className="v">284<span className="unit">場</span></div></div>
        <div className="hero-metric"><div className="k">MAX SPL</div><div className="v">138<span className="unit">dB</span></div></div>
        <div className="hero-metric"><div className="k">COVERAGE</div><div className="v">±1.5<span className="unit">dB</span></div></div>
        <div className="hero-metric"><div className="k">SINCE</div><div className="v">2018</div></div>
      </div>
    </div>
  );
}

function AboutSection() {
  return (
    <section className="section" id="about">
      <div className="sec-head">
        <div className="sec-label"><span className="sec-label-num">01</span>關於鐵吹 / ABOUT</div>
        <h2 className="sec-title">
          <span className="zh">用技術和愛做音響，讓你的音樂<br/>聽起來好聽又感人。</span>
          <span className="en">SCIENCE-DRIVEN LIVE SOUND</span>
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64 }}>
        <div style={{ color: 'var(--text-2)', fontSize: 15, lineHeight: 1.8 }}>
          <p>
            我們（康＆星奎＆鐵吹的大家）相信在音響的世界裡，除了主觀的音樂性之外，
            <span style={{ color: 'var(--text)' }}>科學技術的應用與計算</span>，
            也是決定現場演出成音成敗很大一部分的關鍵。
          </p>
          <p style={{ marginTop: 20 }}>
            我們希望做事能有憑有據，建立<span style={{ color: 'var(--text)' }}>標準有效率的製作流程</span>，
            期許自己能讓每次的演出更順利，也能讓每位觀眾都有最完整的觀賞體驗。
          </p>
          <p style={{ marginTop: 20 }}>
            隨著現代軟體與電腦的進步，各大音響品牌開始陸續釋出模擬軟體和更完整的技術資料。
            音響製作不再像以往只能憑經驗和土法煉鋼，而是可以透過事前的計算、規劃，在進場前即可針對不同場地提出解決方案。
          </p>
          <p style={{ marginTop: 20, color: 'var(--text)' }}>
            鐵吹製作致力推動各種軟體、校正工具的普及，除了固定舉辦課程講座，也不定期接受各音響公司邀請提供技術探討。
          </p>
        </div>
        <div style={{ border: '1px solid var(--line)' }}>
          <div style={{ aspectRatio: '4/3' }}>
            <Placeholder label="FOH / LIVE VENUE SHOT" />
          </div>
          <div style={{ padding: 20, borderTop: '1px solid var(--line)', display: 'grid', gap: 12 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em' }}>CORE CAPABILITIES</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontFamily: 'var(--mono)', fontSize: 11 }}>
              {[
                ['3D 聲學模擬',   'ACOUSTIC SIM'],
                ['系統校正',     'SYSTEM TUNING'],
                ['現場測量',     'LIVE MEASURE'],
                ['技術講座',     'WORKSHOPS'],
                ['硬體統籌',     'HARDWARE MGMT'],
                ['工程管理',     'PROJECT OPS'],
              ].map(([zh, en], i) => (
                <div key={i} style={{ padding: '8px 10px', border: '1px solid var(--line)', display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <span style={{ color: 'var(--text)' }}>{zh}</span>
                  <span style={{ color: 'var(--muted)', fontSize: 9, letterSpacing: '0.08em' }}>{en}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProcessSection() {
  const steps = [
    { n: '01', zh: '需求溝通', en: 'BRIEF',    desc: '理解演出內容、場地條件與預算限制，提出最適合的技術路線與器材組合。' },
    { n: '02', zh: '設計統籌', en: 'DESIGN',   desc: '以 3D 模擬、測量數據與場勘結果為基礎，完成聲學設計與工程文件。' },
    { n: '03', zh: '準備進場', en: 'PREP',     desc: '定稿文件、理貨、測試、協調工班。把所有能預想到的變因都先處理完。' },
    { n: '04', zh: '現場執行', en: 'EXECUTE',  desc: '裝台、校正、彩排、演出、拆台。每個環節都有可追溯的測量紀錄。' },
  ];
  return (
    <section className="section">
      <div className="sec-head">
        <div className="sec-label"><span className="sec-label-num">02</span>製作流程 / PROCESS</div>
        <h2 className="sec-title">
          <span className="zh">標準化的工作流程</span>
          <span className="en">STANDARDIZED WORKFLOW · 4-STAGE</span>
        </h2>
      </div>
      <div className="process">
        {steps.map((s, i) => (
          <div key={s.n} className="process-step">
            <div className="n">PHASE {s.n}</div>
            <h4>{s.zh}<span className="en">{s.en}</span></h4>
            <p>{s.desc}</p>
            <div className="glyph">
              <span>■ ■ □ □</span>
              <span>T-{14 - i*3}d</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SpecsStrip() {
  const items = [
    '48 kHz · 24 bit', 'DANTE / AES67', 'SMAART v9', 'd&b ArrayCalc', 'Meyer MAPP XT',
    'L-Acoustics SOUNDVISION', 'AFMG EASE', 'RATIONAL ACOUSTICS', '3D ACOUSTIC SIM',
    'FOH CALIBRATION', 'RTA 1/24 OCT', 'IMPULSE RESPONSE', 'CROSSFIRE CONTROL',
    'STI MEASURE', 'LINE ARRAY PREDICTION', 'SUBWOOFER ALIGNMENT',
  ];
  const all = [...items, ...items];
  return (
    <div className="specs-strip">
      <div className="track">
        {all.map((s, i) => <span key={i}>{s}</span>)}
      </div>
    </div>
  );
}

function HomePage({ onNavigate, heroVariant }) {
  const Hero = heroVariant === 'manifesto' ? HeroManifesto
             : heroVariant === 'waveform'  ? HeroWaveform
             : HeroSpectrum;
  return (
    <div className="page shell">
      <Hero onNavigate={onNavigate} />
      <SpecsStrip />
      <AboutSection />
      <ProcessSection />
    </div>
  );
}

Object.assign(window, { HomePage });