// home.jsx — Mobile home screen

function Stars({ rating, size = 12 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 1.5, color: 'var(--ff-orange)' }}>
      {[1,2,3,4,5].map(i => (
        <IconStar key={i} filled={i <= Math.round(rating)} size={size}/>
      ))}
    </span>
  );
}

function ProductCard({ p, onOpen, compact = false }) {
  return (
    <div className="tap card" onClick={() => onOpen(p.id)}
      style={{
        background: 'var(--ff-surface)', borderRadius: 6, overflow: 'hidden',
        border: '1px solid var(--ff-border)', cursor: 'pointer',
        display: 'flex', flexDirection: 'column',
      }}>
      <div style={{ aspectRatio: '1 / 1', position: 'relative', background: '#0c0c0c' }}>
        <ProductVisual id={p.id} image={p.image}/>
        {p.tag && (
          <div style={{
            position: 'absolute', top: 10, left: 10,
            fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.14em',
            color: p.tag === 'Limited' ? 'var(--ff-warning)' : 'var(--ff-orange)',
            border: `1px solid ${p.tag === 'Limited' ? 'var(--ff-warning)' : 'var(--ff-orange)'}`,
            padding: '3px 6px', borderRadius: 2, textTransform: 'uppercase',
            background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)',
          }}>{p.tag}</div>
        )}
      </div>
      <div style={{ padding: compact ? '12px 14px 14px' : '14px 14px 16px' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ff-text-3)', letterSpacing: '0.1em', marginBottom: 6 }}>
          {p.sku}
        </div>
        <div style={{ fontFamily: 'var(--ff-display)', fontSize: 15, fontWeight: 600, lineHeight: 1.25, color: 'var(--ff-text)', marginBottom: 8, minHeight: 38 }}>
          {p.name}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
          <span className="mono" style={{ fontSize: 15, fontWeight: 600, color: 'var(--ff-text)' }}>
            {fmtPrice(p.price)}
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <Stars rating={p.rating}/>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ff-text-3)' }}>{p.rating}</span>
          </span>
        </div>
      </div>
    </div>
  );
}

function HomeScreen({ onOpenProduct, onNav, onAddCart, heroVariant = 'cinematic' }) {
  const carouselRef = React.useRef(null);
  const [carouselIdx, setCarouselIdx] = React.useState(0);

  // hero variants
  const Hero = () => {
    if (heroVariant === 'minimal') {
      return (
        <section style={{ position: 'relative', minHeight: '88svh', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '0 16px 32px' }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>NEW · ARC-FIRE V2</div>
          <h1 className="display" style={{
            fontSize: 'clamp(36px, 11vw, 52px)', lineHeight: 0.95, fontWeight: 700, margin: 0,
            color: 'var(--ff-text)', letterSpacing: '-0.03em',
          }}>
            Precision.<br/>
            Performance.<br/>
            <span style={{ color: 'var(--ff-orange)' }}>Control.</span>
          </h1>
          <p style={{ marginTop: 18, marginBottom: 24, color: 'var(--ff-text-2)', fontSize: 15, lineHeight: 1.6, maxWidth: 320 }}>
            CNC-machined trigger and safety upgrades for the AR-15 platform. Made in Texas. Backed for life.
          </p>
          <button className="btn btn-primary tap" onClick={() => onNav('shop')} style={{ width: '100%' }}>
            Shop AR-15 Triggers
            <IconArrowRight size={16}/>
          </button>
          <button className="btn btn-ghost tap" style={{ marginTop: 6, justifyContent: 'flex-start', paddingLeft: 0, color: 'var(--ff-text-2)' }}>
            <IconPlay size={14}/> Installation guide
          </button>
        </section>
      );
    }
    if (heroVariant === 'editorial') {
      return (
        <section style={{ padding: '32px 16px 0' }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--ff-orange)', marginBottom: 24 }}>
            VOL.04 · SPRING ’26
          </div>
          <h1 className="display" style={{
            fontSize: 'clamp(34px, 10vw, 48px)', lineHeight: 1, fontWeight: 700, margin: 0,
            color: 'var(--ff-text)', letterSpacing: '-0.025em',
          }}>
            Hardware for the shot that matters.
          </h1>
          <div style={{
            position: 'relative', aspectRatio: '4/5', margin: '24px -16px 0',
            background: '#0c0c0c', overflow: 'hidden',
          }}>
            <HeroVisual/>
            <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
              <div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ff-text-3)', letterSpacing: '0.12em' }}>FLAGSHIP</div>
                <div style={{ fontFamily: 'var(--ff-display)', fontSize: 16, color: '#fff', fontWeight: 600, marginTop: 2 }}>
                  ARC-Fire V2
                </div>
              </div>
              <button onClick={() => onOpenProduct('arc-fire-v2')} className="tap"
                style={{ background: 'var(--ff-orange)', border: 'none', color: '#fff',
                  padding: '10px 14px', borderRadius: 4, fontSize: 13, fontWeight: 500, cursor: 'pointer',
                  display: 'flex', alignItems: 'center', gap: 6 }}>
                Examine <IconArrowRight size={14}/>
              </button>
            </div>
          </div>
          <div style={{ marginTop: 24 }}>
            <button className="btn btn-primary tap" onClick={() => onNav('shop')} style={{ width: '100%' }}>
              Shop the line
              <IconArrowRight size={16}/>
            </button>
          </div>
        </section>
      );
    }
    // cinematic (default)
    return (
      <section style={{
        position: 'relative', minHeight: '100svh',
        marginTop: -56,
        paddingTop: 'calc(56px + var(--safe-top))',
        display: 'flex', flexDirection: 'column',
      }}>
        <HeroVisual/>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(10,10,10,0.4) 0%, transparent 30%, transparent 50%, rgba(10,10,10,0.95) 100%)',
        }}/>
        <div style={{ position: 'relative', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '0 16px calc(28px + var(--safe-bottom))' }}>
          <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--ff-orange)' }}>MACHINED IN TEXAS</div>
          <h1 className="display" style={{
            fontSize: 'clamp(36px, 11vw, 56px)', lineHeight: 0.96, fontWeight: 700, margin: 0,
            color: 'var(--ff-text)', letterSpacing: '-0.03em', textWrap: 'balance',
          }}>
            Precision.<br/>Performance.<br/>Control.
          </h1>
          <p style={{ marginTop: 18, marginBottom: 28, color: 'var(--ff-text-2)', fontSize: 15.5, lineHeight: 1.55, maxWidth: 340 }}>
            CNC-machined trigger and safety upgrades for the AR-15 platform. Drop-in fit, lifetime warranty.
          </p>
          <button className="btn btn-primary tap" onClick={() => onNav('shop')}
            style={{ width: '100%', height: 56, fontSize: 16 }}>
            Shop AR-15 Triggers
            <IconArrowRight size={18}/>
          </button>
          <button className="btn btn-secondary tap" onClick={() => onNav('how')}
            style={{ width: '100%', marginTop: 10, height: 52 }}>
            <IconPlay size={14}/> Installation guide
          </button>
        </div>
        <div style={{
          position: 'absolute', top: 'calc(72px + var(--safe-top))', right: 16,
          fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
          color: 'var(--ff-text-2)', textAlign: 'right',
          writingMode: 'vertical-rl', transform: 'rotate(180deg)',
          opacity: 0.7,
        }}>
          EST. 2019 · FFD.MFG
        </div>
      </section>
    );
  };

  // top sellers carousel handlers
  const onCarouselScroll = (e) => {
    const el = e.target;
    const cardW = el.children[0]?.offsetWidth + 12 || 280;
    setCarouselIdx(Math.round(el.scrollLeft / cardW));
  };

  return (
    <div>
      <Hero/>

      {/* Trust strip */}
      <section style={{ padding: '28px 0 4px', borderTop: '1px solid var(--ff-border)' }}>
        <div className="no-scrollbar snap-x" style={{
          display: 'flex', gap: 0, overflowX: 'auto', padding: '0 16px',
        }}>
          {FF_STATS.map((s, i) => (
            <div key={i} className="snap-start" style={{
              flex: '0 0 auto', minWidth: 140,
              padding: '0 24px',
              borderRight: i < FF_STATS.length - 1 ? '1px solid var(--ff-border)' : 'none',
              ...(i === 0 ? { paddingLeft: 0 } : {}),
            }}>
              <div className="mono" style={{ fontSize: 22, fontWeight: 600, color: 'var(--ff-text)', letterSpacing: '-0.02em' }}>
                {s.v}
              </div>
              <div className="eyebrow" style={{ fontSize: 10, marginTop: 4 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Top Sellers */}
      <section style={{ padding: '48px 0 0' }}>
        <div style={{ padding: '0 16px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>BEST SELLERS</div>
            <h2 className="display" style={{ fontSize: 26, margin: 0, fontWeight: 600, letterSpacing: '-0.02em' }}>Most-requested upgrades</h2>
          </div>
          <button className="tap" onClick={() => onNav('shop')}
            style={{ background: 'none', border: 'none', color: 'var(--ff-text-2)', fontSize: 13, cursor: 'pointer',
              display: 'flex', alignItems: 'center', gap: 4, padding: '4px 0' }}>
            All <IconArrowRight size={14}/>
          </button>
        </div>
        <div ref={carouselRef} onScroll={onCarouselScroll}
          className="no-scrollbar snap-x"
          style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 16px 8px',
            scrollPaddingLeft: 16, scrollPaddingRight: 16,
          }}>
          {FF_PRODUCTS.slice(0, 4).map((p, i) => (
            <div key={p.id} className="snap-start" style={{ flex: '0 0 78%' }}>
              <ProductCard p={p} onOpen={onOpenProduct}/>
            </div>
          ))}
        </div>
        {/* dots */}
        <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginTop: 14 }}>
          {[0,1,2,3].map(i => (
            <span key={i} style={{
              width: i === carouselIdx ? 18 : 6, height: 6, borderRadius: 3,
              background: i === carouselIdx ? 'var(--ff-orange)' : 'var(--ff-border-strong)',
              transition: 'all 200ms var(--ff-ease)',
            }}/>
          ))}
        </div>
      </section>

      {/* How It Works (from live site) */}
      <section style={{ padding: '64px 16px 0' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>SIMPLE PROCESS</div>
        <h2 className="display" style={{ fontSize: 28, margin: 0, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 8 }}>
          How It Works
        </h2>
        <p style={{ margin: '0 0 28px', color: 'var(--ff-text-2)', fontSize: 15, lineHeight: 1.55 }}>
          From order to performance in three straightforward steps.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {FF_PROCESS.map((s, i) => (
            <div key={i} style={{
              padding: '22px 0',
              borderTop: '1px solid var(--ff-border)',
              ...(i === FF_PROCESS.length - 1 ? { borderBottom: '1px solid var(--ff-border)' } : {}),
              display: 'flex', gap: 16, alignItems: 'flex-start',
            }}>
              <div className="mono" style={{ fontSize: 13, color: 'var(--ff-orange)', letterSpacing: '0.12em', flexShrink: 0, paddingTop: 2, fontWeight: 600 }}>{s.n}</div>
              <div>
                <h3 className="display" style={{ fontSize: 18, fontWeight: 600, margin: 0, marginBottom: 6, lineHeight: 1.2 }}>{s.title}</h3>
                <p style={{ margin: 0, color: 'var(--ff-text-2)', fontSize: 14, lineHeight: 1.55 }}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Why FlowFire — stacked vertically */}
      <section style={{ padding: '64px 16px 0' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>WHY FLOWFIRE</div>
        <h2 className="display" style={{ fontSize: 28, margin: 0, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 32 }}>
          Engineering you can measure.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {FF_PILLARS.map((p, i) => (
            <div key={i} style={{
              padding: '24px 0',
              borderTop: '1px solid var(--ff-border)',
              ...(i === FF_PILLARS.length - 1 ? { borderBottom: '1px solid var(--ff-border)' } : {}),
            }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ff-orange)', letterSpacing: '0.12em', marginBottom: 12 }}>
                {p.eyebrow}
              </div>
              <h3 className="display" style={{ fontSize: 22, fontWeight: 600, margin: 0, marginBottom: 10, lineHeight: 1.2 }}>
                {p.title}
              </h3>
              <p style={{ margin: 0, color: 'var(--ff-text-2)', fontSize: 15, lineHeight: 1.6 }}>
                {p.body}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Featured product full-bleed */}
      <section style={{ padding: '64px 0 0' }}>
        <div style={{ padding: '0 16px', marginBottom: 16 }}>
          <div className="eyebrow" style={{ marginBottom: 6 }}>FLAGSHIP</div>
          <h2 className="display" style={{ fontSize: 26, margin: 0, fontWeight: 600, letterSpacing: '-0.02em' }}>
            ARC-Fire Trigger V2
          </h2>
        </div>
        <div style={{
          position: 'relative', aspectRatio: '4/5',
          background: '#0c0c0c', overflow: 'hidden',
          borderTop: '1px solid var(--ff-border)',
          borderBottom: '1px solid var(--ff-border)',
        }}>
          <HeroVisual/>
          <div style={{ position: 'absolute', bottom: 24, left: 16, right: 16,
            display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ff-text-2)', letterSpacing: '0.12em' }}>
              0° / 90° / 180° · TOOL STEEL · AMBI
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
              <span className="mono" style={{ fontSize: 22, color: 'var(--ff-text)', fontWeight: 600 }}>
                $249.99
              </span>
              <button onClick={() => onOpenProduct('arc-fire-v2')} className="tap"
                style={{ background: 'var(--ff-orange)', border: 'none', color: '#fff',
                  padding: '12px 18px', borderRadius: 4, fontSize: 14, fontWeight: 500, cursor: 'pointer',
                  display: 'flex', alignItems: 'center', gap: 8, minHeight: 48 }}>
                Examine <IconArrowRight size={14}/>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Trust Tiles - 4 pillars from live site */}
      <section style={{ padding: '64px 16px 0' }}>
        <div className="eyebrow" style={{ marginBottom: 6, color: 'var(--ff-orange)' }}>TRUSTED BY SHOOTERS</div>
        <h2 className="display" style={{ fontSize: 26, margin: 0, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 24 }}>
          Built different. Designed for performance.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {FF_TRUST_TILES.map((t, i) => (
            <div key={i} style={{
              padding: 16,
              background: 'var(--ff-surface)',
              border: '1px solid var(--ff-border)',
              borderRadius: 6,
              minHeight: 130,
              display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ff-orange)', letterSpacing: '0.12em' }}>0{i+1}</div>
              <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 14, fontWeight: 600, margin: 0, lineHeight: 1.25 }}>{t.title}</h3>
              <p style={{ margin: 0, color: 'var(--ff-text-2)', fontSize: 12, lineHeight: 1.5 }}>{t.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Testimonials carousel */}
      <Testimonials/>

      {/* Field Notes preview */}
      <section style={{ padding: '64px 16px 0' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>FIELD NOTES</div>
            <h2 className="display" style={{ fontSize: 26, margin: 0, fontWeight: 600, letterSpacing: '-0.02em' }}>
              From the bench
            </h2>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {FF_NOTES.map((n, i) => (
            <button key={n.id} className="tap"
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '20px 0', textAlign: 'left',
                borderTop: '1px solid var(--ff-border)',
                ...(i === FF_NOTES.length - 1 ? { borderBottom: '1px solid var(--ff-border)' } : {}),
                background: 'none', cursor: 'pointer', color: 'inherit', width: '100%',
              }}>
              <div style={{ flex: 1 }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ff-orange)', letterSpacing: '0.12em', marginBottom: 6 }}>
                  {n.kicker.toUpperCase()}
                </div>
                <div style={{ fontFamily: 'var(--ff-display)', fontSize: 17, fontWeight: 600, color: 'var(--ff-text)', lineHeight: 1.25, marginBottom: 8 }}>
                  {n.title}
                </div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ff-text-3)' }}>
                  {n.read} · {n.date}
                </div>
              </div>
              <IconChevronRight size={18} style={{ color: 'var(--ff-text-3)', flexShrink: 0, marginLeft: 12 }}/>
            </button>
          ))}
        </div>
      </section>

      {/* Compliance note (calm) */}
      <section style={{ padding: '48px 16px 0' }}>
        <div style={{
          padding: 20, background: 'var(--ff-surface)', border: '1px solid var(--ff-border)',
          borderRadius: 6,
        }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <div style={{ width: 32, height: 32, borderRadius: 4, background: 'rgba(245,158,11,0.1)',
              border: '1px solid rgba(245,158,11,0.3)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <IconFlag size={16} color="var(--ff-warning)"/>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--ff-display)', fontSize: 15, fontWeight: 600, marginBottom: 6 }}>
                Shipping & Compliance
              </div>
              <div style={{ color: 'var(--ff-text-2)', fontSize: 13.5, lineHeight: 1.55 }}>
                We currently don’t ship to 17 states and DC due to local regulations. Check your state before ordering.
              </div>
              <button onClick={() => onNav('compliance')}
                style={{ marginTop: 10, background: 'none', border: 'none', color: 'var(--ff-orange)',
                  fontSize: 13, fontWeight: 500, padding: 0, cursor: 'pointer',
                  display: 'flex', alignItems: 'center', gap: 4 }}>
                See full list <IconArrowRight size={12}/>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Who We Are (from live site) */}
      <section style={{ padding: '64px 16px 0' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>{FF_ABOUT.eyebrow}</div>
        <h2 className="display" style={{ fontSize: 28, margin: 0, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 18 }}>
          {FF_ABOUT.title}
        </h2>
        <p style={{ margin: '0 0 16px', color: 'var(--ff-text-2)', fontSize: 15, lineHeight: 1.65 }}>{FF_ABOUT.body}</p>
        <p style={{ margin: '0 0 24px', color: 'var(--ff-text-2)', fontSize: 15, lineHeight: 1.65 }}>{FF_ABOUT.body2}</p>
        <button className="btn btn-secondary tap" onClick={() => onNav('about')} style={{ width: '100%', height: 52 }}>
          {FF_ABOUT.cta}
        </button>
      </section>

      {/* Final CTA (from live site footer block) */}
      <section style={{ padding: '64px 16px 0' }}>
        <div style={{
          padding: '32px 24px',
          background: 'linear-gradient(135deg, rgba(200,65,13,0.10), rgba(200,65,13,0.02))',
          border: '1px solid var(--ff-border-strong)',
          borderRadius: 8,
        }}>
          <div className="eyebrow" style={{ marginBottom: 8, color: 'var(--ff-orange)' }}>{FF_FOOTER_CTA.eyebrow}</div>
          <h2 className="display" style={{ fontSize: 26, margin: 0, fontWeight: 700, letterSpacing: '-0.025em', marginBottom: 12 }}>
            {FF_FOOTER_CTA.title}
          </h2>
          <p style={{ margin: '0 0 20px', color: 'var(--ff-text-2)', fontSize: 14.5, lineHeight: 1.55 }}>{FF_FOOTER_CTA.body}</p>
          <button className="btn btn-primary tap" onClick={() => onNav('shop')} style={{ width: '100%', height: 56, fontSize: 16 }}>
            {FF_FOOTER_CTA.ctaPrimary}
            <IconArrowRight size={18}/>
          </button>
          <p style={{ margin: '14px 0 0', color: 'var(--ff-text-3)', fontSize: 11, lineHeight: 1.5, fontStyle: 'italic' }}>{FF_FOOTER_CTA.legal}</p>
        </div>
      </section>

      {/* Footer */}
      <footer style={{ marginTop: 64, padding: '40px 16px calc(120px + var(--safe-bottom))', borderTop: '1px solid var(--ff-border)' }}>
        <Wordmark size={13}/>
        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {[
            { h: 'Shop', items: ['Trigger Kits', 'Safeties', 'Components', 'Accessories'] },
            { h: 'Company', items: ['About', 'Field Notes', 'Warranty', 'Support'] },
            { h: 'Legal', items: ['Compliance', 'Returns', 'Privacy', 'Terms'] },
            { h: 'Connect', items: ['Instagram', 'YouTube', 'Email', 'Dealers'] },
          ].map(col => (
            <div key={col.h}>
              <div className="eyebrow" style={{ marginBottom: 12, fontSize: 10 }}>{col.h.toUpperCase()}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {col.items.map(it => (
                  <a key={it} style={{ color: 'var(--ff-text-2)', fontSize: 13, textDecoration: 'none' }}>{it}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--ff-border)',
          fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--ff-text-3)', letterSpacing: '0.08em' }}>
          © 2026 FLOWFIRE DEFENSE · MACHINED IN TEXAS · ALL RIGHTS RESERVED
        </div>
      </footer>
    </div>
  );
}

function Testimonials() {
  const ref = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const onScroll = (e) => {
    const el = e.target;
    const w = el.clientWidth;
    setIdx(Math.round(el.scrollLeft / w));
  };
  return (
    <section style={{ padding: '64px 0 0' }}>
      <div style={{ padding: '0 16px', marginBottom: 18 }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>FROM THE RANGE</div>
        <h2 className="display" style={{ fontSize: 26, margin: 0, fontWeight: 600, letterSpacing: '-0.02em' }}>
          What shooters say.
        </h2>
      </div>
      <div ref={ref} onScroll={onScroll} className="no-scrollbar snap-x"
        style={{ display: 'flex', overflowX: 'auto' }}>
        {FF_REVIEWS.map((r, i) => (
          <div key={i} className="snap-start" style={{ flex: '0 0 100%', padding: '0 16px' }}>
            <div style={{ background: 'var(--ff-surface)', border: '1px solid var(--ff-border)', borderRadius: 6, padding: 22 }}>
              <Stars rating={r.rating} size={14}/>
              <p style={{ margin: '14px 0 18px', fontSize: 16, lineHeight: 1.5, color: 'var(--ff-text)', textWrap: 'pretty', minHeight: 96 }}>
                “{r.body}”
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 14, borderTop: '1px solid var(--ff-border)' }}>
                <div style={{ width: 32, height: 32, borderRadius: 16, background: 'var(--ff-surface-3)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--ff-display)', fontSize: 12, fontWeight: 600, color: 'var(--ff-text)' }}>
                  {r.name.split(' ').map(p => p[0]).join('')}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ff-text)' }}>{r.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--ff-text-3)' }}>{r.role}</div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginTop: 18 }}>
        {FF_REVIEWS.map((_, i) => (
          <span key={i} style={{
            width: i === idx ? 18 : 6, height: 6, borderRadius: 3,
            background: i === idx ? 'var(--ff-orange)' : 'var(--ff-border-strong)',
            transition: 'all 200ms var(--ff-ease)',
          }}/>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { HomeScreen, ProductCard, Stars });