// ProductPage.jsx — detail view for a selected oven + collection switcher.
(function () {
  const { useState } = React;
  const { PRODUCTS, ACCESSORIES } = window.TF_DATA;

  const PRODUCT_IMAGES = {
    verona: [
      { src: 'images/Verona main.jpg',    label: 'Front view' },
      { src: 'images/Verona side.jpg',    label: 'Side view' },
      { src: 'images/Verona other.jpg',   label: 'Detail' },
      { src: 'images/Verona other 2.jpg', label: 'In use' },
    ],
  };

  function Gallery({ p }) {
    const [active, setActive] = useState(0);
    const imgs = PRODUCT_IMAGES[p.id];

    if (imgs) {
      return (
        <div>
          <img src={imgs[active].src} alt={`${p.name} · ${imgs[active].label}`}
            style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', borderRadius: 'var(--r-xl)', display: 'block' }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginTop: 12 }}>
            {imgs.map((img, i) => (
              <button key={i} onClick={() => setActive(i)} style={{ padding: 0, border: 0, background: 'none', cursor: 'pointer', borderRadius: 'var(--r-md)', outline: i === active ? '2px solid var(--accent)' : '2px solid transparent', outlineOffset: 2 }}>
                <img src={img.src} alt={img.label} style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 'var(--r-md)', display: 'block' }} />
              </button>
            ))}
          </div>
        </div>
      );
    }

    // fallback placeholder for products without images yet
    const views = ['Front view', 'Three-quarter', 'Mouth & hearth', 'Detail'];
    return (
      <div>
        <Photo tone={p.tone} label={`${p.name} · ${views[active]}`} icon="flame" style={{ aspectRatio: '4/3', borderRadius: 'var(--r-xl)' }} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginTop: 12 }}>
          {views.map((v, i) => (
            <button key={v} onClick={() => setActive(i)} style={{ padding: 0, border: 0, background: 'none', cursor: 'pointer', borderRadius: 'var(--r-md)', outline: i === active ? '2px solid var(--accent)' : '2px solid transparent', outlineOffset: 2 }}>
              <Photo tone={p.tone} label="" icon="flame" grain={false} style={{ aspectRatio: '1', borderRadius: 'var(--r-md)' }} />
            </button>
          ))}
        </div>
      </div>
    );
  }

  function BuyBox({ p, go }) {
    return (
      <div style={{ position: 'sticky', top: 96 }}>
        <Eyebrow>{p.kind}</Eyebrow>
        <h1 className="tf-h1" style={{ margin: '0 0 6px' }}>{p.name}</h1>
        <p className="tf-lead" style={{ margin: '0 0 18px' }}>{p.tagline}.</p>

        <div className="tf-spec" style={{ margin: '24px 0' }}>
          {Object.entries(p.spec).map(([k, v]) => (
            <div className="tf-spec__cell" key={k}>
              <div className="tf-spec__k">{k}</div>
              <div className="tf-spec__v">{v}</div>
            </div>
          ))}
        </div>

        <p className="tf-body" style={{ marginBottom: 24 }}>{p.blurb}</p>

        <TFButton variant="primary" size="lg" block arrow onClick={() => go('contact')}>
          {p.id === 'custom' ? 'Request a custom quote' : 'Get a quote'}
        </TFButton>
        <div style={{ display: 'flex', gap: 18, marginTop: 18, flexWrap: 'wrap' }}>
          {[['truck', 'Delivery & install across India'], ['shield', 'Quality guaranteed']].map(([ic, t]) => (
            <span key={t} className="tf-small" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name={ic} size={16} style={{ color: 'var(--accent)' }} />{t}</span>
          ))}
        </div>

        {/* gas version note */}
        {p.id !== 'custom' && (
          <div style={{ marginTop: 20, padding: '14px 16px', background: 'color-mix(in srgb, var(--accent) 10%, transparent)', borderRadius: 'var(--r-md)', border: '1px solid color-mix(in srgb, var(--accent) 30%, transparent)' }}>
            <div className="tf-small" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="flame" size={16} style={{ color: 'var(--accent)', flex: 'none' }} />
              <span>Also available as a <strong>gas-fired version</strong> — same performance, LP or natural gas. Ask us for details.</span>
            </div>
          </div>
        )}
      </div>
    );
  }

  function ProductPage({ go, productId }) {
    const root = useReveal();
    const p = PRODUCTS.find((x) => x.id === productId) || PRODUCTS[0];
    return (
      <div ref={root}>
        <div className="tf-wrap" style={{ paddingTop: 32 }}>
          <div className="tf-small" style={{ display: 'flex', gap: 8, alignItems: 'center', color: 'var(--fg-3)' }}>
            <a onClick={() => go('home')} style={{ cursor: 'pointer' }}>Home</a><Icon name="chevronRight" size={13} />
            <a onClick={() => go('product')} style={{ cursor: 'pointer' }}>Ovens</a><Icon name="chevronRight" size={13} />
            <span style={{ color: 'var(--fg-1)' }}>{p.name}</span>
          </div>
        </div>

        <section className="tf-section--tight tf-section">
          <div className="tf-wrap" style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 'clamp(32px,5vw,64px)', alignItems: 'start' }}>
            <Gallery p={p} />
            <BuyBox p={p} go={go} />
          </div>
        </section>

        {/* feature band */}
        <section className="tf-section" data-section="ember">
          <div className="tf-wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}>
            <div>
              <Eyebrow>Why it lasts</Eyebrow>
              <h2 className="tf-h2" style={{ color: '#FBF3E6', margin: '0 0 18px' }}>Thermal mass you can taste.</h2>
              <p className="tf-lead" style={{ color: '#D8C6AE' }}>The {p.spec.dome.toLowerCase()} stores radiant heat the way a great hearth always has — even, forgiving, and long-lasting. A single fire cooks a whole evening of food.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 24 }}>
                {['Reaches peak heat in under an hour', 'Holds temperature for hours after the flame dies', 'Wood-fired flavour no gas oven can replicate', 'Gas version available for convenience'].map((f) => (
                  <div key={f} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                    <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'color-mix(in srgb, var(--accent) 22%, transparent)', display: 'grid', placeItems: 'center', flex: 'none' }}><Icon name="check" size={15} style={{ color: 'var(--tf-flame)' }} /></span>
                    <span style={{ color: '#E7D8C2' }}>{f}</span>
                  </div>
                ))}
              </div>
            </div>
            <Photo tone="ember" label="Refractory dome · cross-section" icon="thermometer" style={{ aspectRatio: '1', borderRadius: 'var(--r-xl)' }} className="tf-reveal" />
          </div>
        </section>

        {/* accessories */}
        <section className="tf-section">
          <div className="tf-wrap">
            <Eyebrow>Pairs well with</Eyebrow>
            <h2 className="tf-h2" style={{ margin: '0 0 36px' }}>Tools for the fire.</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(220px,1fr))', gap: 22 }}>
              {ACCESSORIES.map((a) => (
                <article key={a.name} className="tf-card tf-card--link tf-reveal">
                  <Photo tone="cream" label={a.name} icon="hammer" grain={false} style={{ aspectRatio: '1', borderRadius: 0, border: 0 }} />
                  <div style={{ padding: '16px 18px 20px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                      <strong style={{ fontSize: 'var(--t-body)' }}>{a.name}</strong>
                      <span style={{ color: 'var(--accent)', fontWeight: 600 }}>{a.price}</span>
                    </div>
                    <div className="tf-small" style={{ marginTop: 3 }}>{a.note}</div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* full collection */}
        <section className="tf-section" style={{ background: 'var(--surface)' }}>
          <div className="tf-wrap">
            <Eyebrow>The full collection</Eyebrow>
            <h2 className="tf-h2" style={{ margin: '0 0 36px' }}>Explore every oven.</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 22 }}>
              {PRODUCTS.map((x) => (
                <article key={x.id} className={'tf-card' + (x.comingSoon ? '' : ' tf-card--link')}
                  onClick={() => { if (!x.comingSoon) { go('product', x.id); window.scrollTo({ top: 0 }); } }}
                  style={{ position: 'relative', cursor: x.comingSoon ? 'default' : 'pointer', ...(x.id === p.id ? { borderColor: 'var(--accent)' } : {}) }}>
                  {x.comingSoon && (
                    <div style={{ position: 'absolute', top: 10, left: 10, zIndex: 2, background: 'var(--tf-flame)', color: 'var(--tf-charcoal)', fontWeight: 700, fontSize: 'var(--t-xs)', letterSpacing: '.1em', textTransform: 'uppercase', padding: '5px 11px', borderRadius: 'var(--r-pill)', fontFamily: 'var(--font-body)' }}>
                      Coming Soon
                    </div>
                  )}
                  <Photo tone={x.tone} label={x.name} icon="flame" style={{ aspectRatio: '3/2', borderRadius: 0, border: 0, filter: x.comingSoon ? 'brightness(0.6)' : 'none' }} grain={false} />
                  <div style={{ padding: '18px 20px 22px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
                      <h3 className="tf-h3" style={{ margin: 0, fontSize: '1.3rem' }}>{x.name}</h3>
                      <span className="tf-small" style={{ color: x.comingSoon ? 'var(--tf-flame)' : 'var(--accent)', fontWeight: 600, whiteSpace: 'nowrap' }}>{x.comingSoon ? 'Coming Soon' : x.kind}</span>
                    </div>
                    <div className="tf-small" style={{ marginTop: 3 }}>{x.tagline}</div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>
      </div>
    );
  }

  window.ProductPage = ProductPage;
})();