// Products page — reads from window.__C (content.json)

const _ph = () => window.c('products.hero', {});
const _pw = () => window.c('products.wall', {});
const _pf = () => window.c('products.floor', {});
const _ps = () => window.c('products.structure', {});
const _pm = () => window.c('products.mixtures', {});
const _pj = () => window.c('products.joint', {});
const _papp = () => window.c('products.applications', {});
const _pcust = () => window.c('products.customization', {});

function ProductsHero() {
  const h = _ph();
  return (
    <section className="section" style={{ paddingTop: 'clamp(56px, 7vw, 112px)', paddingBottom: 0 }}>
      <div className="container">
        <div className="grid-12 prod-hero" style={{ alignItems: 'end', columnGap: 'clamp(32px, 5vw, 80px)' }}>
          <div style={{ gridColumn: 'span 7' }} className="prod-hero-l">
            <div className="eyebrow" style={{ marginBottom: 24 }}>{h.eyebrow}</div>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 160px)' }}>
              {h.headline}
            </h1>
          </div>
          <div style={{ gridColumn: 'span 5' }} className="prod-hero-r">
            <p style={{ fontSize: 'clamp(17px, 1.4vw, 20px)', color: 'var(--muted)', lineHeight: 1.55 }}>
              {h.sub}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductTabs({ active, onChange }) {
  const tabs = [
    { id: 'wall', label: _pw().title || 'Wall panel', tag: '01' },
    { id: 'floor', label: _pf().title || 'Floor panel', tag: '02' },
    { id: 'structure', label: _ps().title || 'Structure panel', tag: '03' },
  ];
  return (
    <div className="prod-tabs" style={{ display: 'flex', gap: 0, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      {tabs.map((t) => (
        <button
          key={t.id}
          onClick={() => onChange(t.id)}
          className="prod-tab"
          style={{
            flex: 1,
            padding: 'clamp(16px, 2vw, 24px) clamp(20px, 2.4vw, 32px)',
            textAlign: 'left',
            background: active === t.id ? 'var(--fg)' : 'transparent',
            color: active === t.id ? 'var(--bg)' : 'var(--fg)',
            transition: 'background 0.2s ease, color 0.2s ease',
            borderRight: '1px solid var(--line)',
            cursor: 'pointer',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 16,
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <span className="mono" style={{ fontSize: 13, opacity: 0.7 }}>{t.tag}</span>
            <span style={{ fontSize: 'clamp(18px, 2.2vw, 32px)', fontWeight: 500, letterSpacing: '-0.03em' }}>{t.label}</span>
          </div>
          <span style={{ fontSize: 22, opacity: active === t.id ? 1 : 0.4 }}>{active === t.id ? '●' : '○'}</span>
        </button>
      ))}
    </div>
  );
}

function PanelDetail({ panel }) {
  const data = panel === 'wall' ? _pw() : panel === 'floor' ? _pf() : _ps();
  const panelNum = panel === 'wall' ? '01' : panel === 'floor' ? '02' : '03';
  return (
    <div className="grid-12 page-fade panel-detail" style={{ marginTop: 0, padding: 'clamp(48px, 6vw, 96px) 0', alignItems: 'stretch' }}>
      <div style={{ gridColumn: 'span 7' }} className="panel-img">
        <Img src={data.image} label={`${data.title} · technical render`} ratio="4/3" cobalt />
      </div>
      <div className="panel-text" style={{ gridColumn: 'span 5', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 48 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Panel · {panelNum}</div>
          <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 64px)' }}>{data.title}</h2>
          <p style={{ marginTop: 24, color: 'var(--muted)', fontSize: 17, lineHeight: 1.5 }}>{data.sub}</p>
        </div>
        <table className="spec-table">
          <tbody>
            {(data.specs || []).map((spec, i) => (
              <tr key={i}>
                <th style={{ width: '40%' }}>{spec[0]}</th>
                <td style={{ fontWeight: 500 }}>{spec[1]}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a className="btn btn-primary" href="#contact" onClick={(e) => { e.preventDefault(); window.__setRoute && window.__setRoute('contact'); }}>
            Request panel specs <span className="btn-arrow">→</span>
          </a>
          <a className="btn btn-ghost" href="#">
            Download datasheet
          </a>
        </div>
      </div>
    </div>
  );
}

function MixtureSelector() {
  const m = _pm();
  const mixtures = m.options || [];
  const [active, setActive] = React.useState('solid');
  const current = mixtures.find((mx) => mx.id === active) || mixtures[0];
  if (!current) return null;

  return (
    <section className="section" style={{ background: 'var(--surface)', color: 'var(--surface-fg)' }}>
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64, columnGap: 'clamp(32px, 5vw, 80px)' }}>
          <div style={{ gridColumn: 'span 7' }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>{m.eyebrow}</div>
            <h2>{m.headline}</h2>
          </div>
          <div style={{ gridColumn: 'span 5' }} className="sec-head-r">
            <p style={{ color: 'var(--muted)', fontSize: 'clamp(16px, 1.3vw, 18px)', lineHeight: 1.55 }}>
              {m.sub}
            </p>
          </div>
        </div>

        <div className="grid-12 mixture-grid" style={{ alignItems: 'stretch', gap: 'var(--grid-gutter)' }}>
          <div style={{ gridColumn: 'span 5' }} className="mixture-list">
            {mixtures.map((mx, i) => (
              <button
                key={mx.id}
                onClick={() => setActive(mx.id)}
                style={{
                  textAlign: 'left',
                  padding: 24,
                  background: active === mx.id ? 'var(--midnight)' : 'transparent',
                  color: active === mx.id ? 'var(--rice)' : 'var(--surface-fg)',
                  border: `1px solid ${active === mx.id ? 'var(--midnight)' : 'var(--line)'}`,
                  transition: 'all 0.2s ease',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 24,
                  width: '100%',
                  marginBottom: 12,
                }}
              >
                <span className="mono" style={{ fontSize: 14, opacity: 0.6 }}>0{i + 1}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.03em' }}>{mx.name}</div>
                  <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>{mx.sub}</div>
                </div>
                <span style={{ fontSize: 18, opacity: active === mx.id ? 1 : 0.3 }}>{active === mx.id ? '●' : '○'}</span>
              </button>
            ))}
          </div>

          <div style={{ gridColumn: 'span 7' }} className="page-fade mixture-detail" key={active}>
            <div style={{ background: 'var(--midnight)', color: 'var(--rice)', padding: 'clamp(28px, 4vw, 48px)', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32, position: 'relative', overflow: 'hidden' }}>
              <HouseDeco color="var(--dodger)" opacity={0.06} count="sparse" />
              <div style={{ position: 'relative' }}>
                <div className="eyebrow" style={{ color: 'rgba(238,234,218,0.6)' }}>Selected mixture</div>
                <h3 style={{ marginTop: 12, fontSize: 'clamp(24px, 3vw, 48px)', color: 'var(--rice)' }}>{current.name}</h3>
                <p style={{ marginTop: 16, color: 'rgba(238,234,218,0.75)', maxWidth: 480, fontSize: 16, lineHeight: 1.5 }}>{current.best}</p>
              </div>

              <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <Meter label="Density" value={current.density} />
                <Meter label="Sound insulation" value={current.sound} />
                <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid rgba(238,234,218,0.18)', paddingTop: 16, marginTop: 8 }}>
                  <span className="eyebrow" style={{ color: 'rgba(238,234,218,0.6)' }}>Relative weight</span>
                  <span style={{ fontWeight: 500, color: 'var(--dodger)' }}>{current.weight}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Meter({ label, value }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <span className="eyebrow" style={{ color: 'rgba(238,234,218,0.6)' }}>{label}</span>
        <span className="mono" style={{ fontSize: 12, color: 'rgba(238,234,218,0.7)' }}>{Math.round(value * 100)}%</span>
      </div>
      <div style={{ height: 4, background: 'rgba(238,234,218,0.15)', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute',
          inset: 0,
          width: `${value * 100}%`,
          background: 'var(--dodger)',
          transition: 'width 0.6s cubic-bezier(.2,.7,.2,1)',
        }} />
      </div>
    </div>
  );
}

function JointSection() {
  const j = _pj();
  return (
    <section className="section" style={{ background: 'var(--midnight)', color: 'var(--rice)', position: 'relative', overflow: 'hidden' }}>
      <HouseDeco color="var(--dodger)" opacity={0.06} count="medium" />
      <div className="container" style={{ position: 'relative' }}>
        <div className="grid-12 joint-grid" style={{ alignItems: 'center', columnGap: 'clamp(32px, 5vw, 80px)' }}>
          <div style={{ gridColumn: 'span 5' }} className="joint-l">
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16, color: 'rgba(238,234,218,0.6)' }}>{j.eyebrow}</div>
              <h2 style={{ color: 'var(--rice)' }}>{j.headline}</h2>
              <p style={{ marginTop: 32, color: 'rgba(238,234,218,0.78)', fontSize: 'clamp(17px, 1.4vw, 19px)', lineHeight: 1.55 }}>
                {j.body}
              </p>
              <ul style={{ marginTop: 32, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 16 }}>
                {(j.bullets || []).map((s) => (
                  <li key={s} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <HouseSymbol size={12} color="var(--dodger)" />
                    <span style={{ fontSize: 16, color: 'rgba(238,234,218,0.9)' }}>{s}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
          <div style={{ gridColumn: 'span 7' }} className="joint-r">
            <Reveal delay={120}>
              <Img src={j.image} label="Patented joint · exploded diagram" ratio="4/3" cobalt />
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Applications() {
  const a = _papp();
  return (
    <section className="section" style={{ background: 'var(--midnight)', color: 'var(--rice)' }}>
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 8' }}>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16, color: 'rgba(238,234,218,0.6)' }}>{a.eyebrow}</div>
              <h2 style={{ color: 'var(--rice)' }}>{a.headline}</h2>
            </Reveal>
          </div>
        </div>
        <div className="grid-12 app-grid">
          {(a.items || []).map((it, i) => (
            <Reveal key={i} delay={i * 80} style={{ gridColumn: 'span 4' }} className="app-cell">
              <Img src={it.image} label={it.name} ratio="4/5" cobalt={i === 1} />
              <div className="mono" style={{ marginTop: 20, fontSize: 12, color: 'rgba(238,234,218,0.5)', letterSpacing: '0.1em' }}>{it.tag}</div>
              <h3 style={{ marginTop: 8, color: 'var(--rice)' }}>{it.name}</h3>
              <p style={{ marginTop: 12, color: 'rgba(238,234,218,0.7)', fontSize: 15 }}>{it.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Customization() {
  const c = _pcust();
  return (
    <section className="section" style={{ background: 'var(--surface)', color: 'var(--surface-fg)' }}>
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 8' }}>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{c.eyebrow}</div>
              <h2>{c.headline}</h2>
            </Reveal>
          </div>
        </div>

        <div className="grid-12 cust-grid">
          {(c.items || []).map((it, i) => (
            <Reveal key={i} delay={i * 70} style={{ gridColumn: 'span 3' }} className="cust-cell">
              <div style={{ borderTop: '1px solid var(--line)', padding: '32px 0', height: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <span className="mono" style={{ fontSize: 28, color: 'var(--accent)', lineHeight: 1 }}>{it.tag}</span>
                <h3 style={{ fontSize: 22 }}>{it.title}</h3>
                <p style={{ color: 'var(--muted)', fontSize: 15 }}>{it.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductsPage({ setRoute, tweaks }) {
  const [panel, setPanel] = React.useState('wall');
  React.useEffect(() => { window.__setRoute = setRoute; }, [setRoute]);
  return (
    <div className={`page page-fade house-overlay--${tweaks.houseOverlay}`}>
      <ProductsHero />
      <div className="container" style={{ marginTop: 'clamp(48px, 6vw, 96px)' }}>
        <ProductTabs active={panel} onChange={setPanel} />
        <PanelDetail panel={panel} key={panel} />
      </div>
      <MixtureSelector />
      <JointSection />
      <Applications />
      <Customization />
    </div>
  );
}

Object.assign(window, { ProductsPage });