// Shared product-page renderer (uses Nav, Footer, Tweaks from components.jsx)
function ProductPage({ slug }) {
  const p = window.LABS_DATA.products.find(x => x.slug === slug);
  const [openFaq, setOpenFaq] = React.useState(null);
  const [tweaks, setTweaks] = React.useState(window.__TWEAK_DEFAULTS || { accent: 'electric', hero: 'build', bg: 'warm', grid: 'on' });
  useThemeEffect(tweaks);

  const others = window.LABS_DATA.products.filter(x => x.slug !== slug);

  return (
    <>
      <Nav />
      <section className="product-hero">
        <div className="container">
          <div className="crumb">Products / {p.num} / {p.title}</div>
          <h1>{p.hero}</h1>
          <p className="lead">{p.lead}</p>
          <div style={{ display: 'flex', gap: 24, marginTop: 48, flexWrap: 'wrap' }}>
            <a href="index.html#contact" className="btn-line">Start a {p.slug} project <span className="arrow">→</span></a>
            <a href="index.html#products" className="btn-ghost">All products <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      <section className="modules">
        <div className="container">
          <div className="section-head">
            <div className="section-tag"><span className="dot" /><span className="label label-bright">What we build</span></div>
            <span className="label">08 modules</span>
          </div>
          <div className="module-grid">
            {p.modules.map(m => (
              <div className="module" key={m.n}>
                <span className="mn">{m.n}</span>
                <h3>{m.t}</h3>
                <p>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="stack">
        <div className="container">
          <div className="section-head">
            <div className="section-tag"><span className="dot" /><span className="label label-bright">Tech stack</span></div>
            <span className="label">Selected</span>
          </div>
          <div className="stack-list">
            {p.stack.map(t => <span key={t} className="stack-tag">{t}</span>)}
          </div>
        </div>
      </section>

      <section className="faq">
        <div className="container">
          <div className="section-head">
            <div className="section-tag"><span className="dot" /><span className="label label-bright">FAQ</span></div>
            <span className="label">{p.faq.length} questions</span>
          </div>
          {p.faq.map((f, i) => (
            <div key={i} className={`faq-item ${openFaq === i ? 'open' : ''}`} onClick={() => setOpenFaq(openFaq === i ? null : i)}>
              <div className="faq-q">
                <h4>{f.q}</h4>
                <span className="icn mono">+</span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="products" style={{ paddingTop: 80, paddingBottom: 120 }}>
        <div className="container">
          <div className="section-head">
            <div className="section-tag"><span className="dot" /><span className="label label-bright">Other products</span></div>
            <span className="label">Continue</span>
          </div>
          <div className="product-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
            {others.map(o => (
              <a key={o.slug} href={`${o.slug}.html`} className="product-card">
                <div>
                  <div className="product-num">{o.num} / PRODUCT</div>
                  <h3 className="product-title" style={{ marginTop: 16 }}>{o.title}</h3>
                  <p className="product-tag">{o.tag}</p>
                </div>
                <ul className="product-features">
                  {o.features.map((f, i) => <li key={i}>{f}</li>)}
                </ul>
                <div className="product-cta"><span>Explore</span><span className="arrow">→</span></div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="contact" style={{ paddingTop: 80 }}>
        <div className="container">
          <div className="section-head">
            <div className="section-tag"><span className="dot" /><span className="label label-bright">Next step</span></div>
            <span className="label">labs@74.fyi</span>
          </div>
          <h2 style={{ fontSize: 'clamp(40px, 6vw, 88px)', letterSpacing: '-0.035em', lineHeight: 0.98 }}>
            Start your {p.title.toLowerCase()} project.
          </h2>
          <div style={{ marginTop: 40 }}>
            <a href="index.html#contact" className="btn-line">Get in touch <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      <Footer />
      <Tweaks tweaks={tweaks} setTweaks={setTweaks} />
    </>
  );
}

window.ProductPage = ProductPage;