/* global React, Logo, Bottle, Pouch, MechanismDiagram, CompositionBar, Marquee, PRODUCTS, INGREDIENTS, JOURNAL */
// pages-home.jsx — Home + Products + PDP

// ──────────────────────────────────────────────────────────────────────────
// HOME
// ──────────────────────────────────────────────────────────────────────────

function HomePage({ setRoute, openProduct }) {
  return (
    <div>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 64 }}>
        <div className="shell">
          <div className="bar" style={{ marginBottom: 48 }}>
            <span className="strong">CATALOGUE / 2026</span>
            <span>SIX FORMULATIONS</span>
            <span>NO DYES · NO OPTICAL BRIGHTENERS · NO FRAGRANCE</span>
            <span>ISSUE N° 01</span>
          </div>
          <div className="grid-12" style={{ gap: 'var(--gutter)', alignItems: 'end' }}>
            <div style={{ gridColumn: 'span 8' }}>
              <h1 className="display">
                A laundry<br />
                care system,<br />
                stripped to<br />
                <span className="accent">its actives.</span>
              </h1>
            </div>
            <div style={{ gridColumn: 'span 4' }}>
              <div className="meta" style={{ marginBottom: 12 }}>STATEMENT 01</div>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: 320 }}>
                Protocol formulations contain only what is required to perform the named function.
                Concentrations are stated. Mechanisms are documented. Nothing is included to make the wash <em>feel</em> like it worked.
              </p>
              <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
                <button className="btn" onClick={() => setRoute('products')}>View Catalogue →</button>
                <button className="btn ghost" onClick={() => setRoute('identity')}>Read Protocol</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee items={[
        'NO OPTICAL BRIGHTENERS',
        'NO DYES',
        'NO MASKING FRAGRANCE',
        'NO QUATERNARY AMMONIUM',
        'NO SLES',
        'NO DECORATIVE COLOURING',
        'NO PHOSPHATES',
        'NO EDTA',
      ]} />

      {/* MANIFESTO PRINCIPLES */}
      <section className="section">
        <div className="shell">
          <div className="section-header">
            <span className="num">01 / 06</span>
            <span className="title">The Protocol</span>
            <span className="meta">FOUR OPERATING PRINCIPLES</span>
          </div>
          <div className="grid-12">
            {[
              {
                n: '01',
                t: 'State the active.',
                d: 'Concentrations of named active ingredients are listed on the principal display panel — not the back-label fine print.'
              },
              {
                n: '02',
                t: 'Match the soil class.',
                d: 'Each formulation targets a specific soil class. A single broad-spectrum formula is a marketing claim, not a chemistry decision.'
              },
              {
                n: '03',
                t: 'Omit the masking.',
                d: 'Optical brighteners, fragrance, and dye produce a perceived clean. They do not produce a clean. We exclude them.'
              },
              {
                n: '04',
                t: 'Dose by load.',
                d: 'A precision pump replaces the cap. A reference card translates load weight to volume. The over-dose is the default failure.'
              },
            ].map((p, i) => (
              <div key={p.n} style={{ gridColumn: 'span 3', borderRight: i < 3 ? '1px solid var(--hair)' : 'none', paddingRight: 16 }}>
                <div className="meta" style={{ marginBottom: 32 }}>{p.n}</div>
                <h3 style={{ fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1.15 }}>{p.t}</h3>
                <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 13.5, lineHeight: 1.55 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* THE SYSTEM — bottles row */}
      <section className="section" style={{ background: 'var(--bg-soft)' }}>
        <div className="shell">
          <div className="section-header">
            <span className="num">02 / 06</span>
            <span className="title">The System</span>
            <span className="meta">N° 01–06 / SIX SKUs</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
            {PRODUCTS.map((p) => (
              <button key={p.id}
                      className="card-product"
                      style={{ background: 'transparent' }}
                      onClick={() => openProduct(p.id)}>
                <div className="bottle-wrap">
                  <Bottle product={p} h={260} />
                </div>
                <div className="num">N° {p.id}</div>
                <div className="title">{p.name}</div>
                <div className="actives">{p.actives}</div>
                <div className="price">£{p.price} · {p.capacity}</div>
              </button>
            ))}
          </div>
          <div className="bar" style={{ marginTop: 32, borderBottom: 0 }}>
            <span>FULL CATALOGUE</span>
            <span className="dots" style={{ flex: 1, borderBottom: '1px dotted var(--hair-strong)', height: 1, position: 'relative', top: -3 }} />
            <button onClick={() => setRoute('products')} style={{ color: 'var(--ink)', textDecoration: 'underline' }} className="meta strong">
              View all six →
            </button>
          </div>
        </div>
      </section>

      {/* WHAT WE EXCLUDE */}
      <section className="section">
        <div className="shell">
          <div className="section-header">
            <span className="num">03 / 06</span>
            <span className="title">What we exclude</span>
            <span className="meta">EXCLUSION LIST 2026</span>
          </div>
          <div className="grid-12">
            <div style={{ gridColumn: 'span 5' }}>
              <h2 className="display-sm" style={{ maxWidth: 520 }}>
                A formula is defined by what is left out, not what is added.
              </h2>
              <p style={{ marginTop: 32, color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.6, maxWidth: 460 }}>
                The conventional detergent contains 14–22 functionally inactive ingredients whose role is to manufacture a sensory experience of cleanliness. We do not include them. The full list of excluded ingredients is below, with the function each conventionally serves and our reason for omitting it.
              </p>
            </div>
            <div style={{ gridColumn: 'span 7' }}>
              {[
                ['Optical brighteners', 'Stilbene derivatives', 'Produce perceived whiteness via UV fluorescence. Not cleaning.'],
                ['Masking fragrance', '20–60 undisclosed components', 'Sensory cover for residual surfactant. Allergenic load.'],
                ['Decorative dye', 'Acid Blue 9, Acid Red 52', 'Aesthetic only. Deposits on white cottons over time.'],
                ['Quaternary ammonium', 'DTDMAC, DSDMAC', 'Persistent biocidal residue. Replaced by esterquats in N° 04.'],
                ['SLES', 'Sodium laureth sulfate', 'High foam, low function. Skin barrier disruption.'],
                ['Phosphates', 'STPP', 'Eutrophic load on freshwater systems. Banned EU 648/2004.'],
              ].map(([name, sub, why]) => (
                <div key={name} className="grid-12" style={{
                  padding: '18px 0',
                  borderTop: '1px dotted var(--hair-strong)',
                  alignItems: 'baseline',
                }}>
                  <div style={{ gridColumn: 'span 4' }}>
                    <div style={{ fontSize: 14.5 }}>{name}</div>
                    <div className="meta" style={{ marginTop: 2 }}>{sub}</div>
                  </div>
                  <div style={{ gridColumn: 'span 8', color: 'var(--ink-2)', fontSize: 13.5 }}>
                    {why}
                  </div>
                </div>
              ))}
              <hr className="hr-strong" style={{ marginTop: 8 }} />
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED PRODUCT */}
      <section className="section" style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
        <div className="shell">
          <div className="bar" style={{ borderTopColor: 'var(--bg)', borderBottomColor: 'rgba(255,255,255,.15)', color: 'rgba(255,255,255,.65)', marginBottom: 56 }}>
            <span className="strong" style={{ color: 'var(--bg)' }}>FORMULA OF THE QUARTER</span>
            <span>Q2 / 2026</span>
            <span>HIGHLIGHTED FOR ENZYME-BASED HYDROLYSIS</span>
            <span>FIG. 01</span>
          </div>
          <div className="grid-12" style={{ alignItems: 'center', gap: 80 }}>
            <div style={{ gridColumn: 'span 5', display: 'flex', justifyContent: 'center' }}>
              <Bottle product={PRODUCTS[0]} h={520} dark />
            </div>
            <div style={{ gridColumn: 'span 7' }}>
              <div className="meta" style={{ color: 'var(--accent)', marginBottom: 24 }}>PROTOCOL N° 01 / BIOLOGICAL DETERGENT</div>
              <h2 className="display-sm" style={{ color: 'var(--bg)' }}>
                Protease 5%. Lipase 3%. Nothing else does the work.
              </h2>
              <p style={{ marginTop: 24, color: 'rgba(255,255,255,.7)', fontSize: 14, lineHeight: 1.6, maxWidth: 540 }}>
                A concentrated dual-enzyme system. The protease cleaves peptide bonds in proteinaceous residue; the lipase hydrolyses triglycerides. The remainder of the formulation is structural — buffers, chelators, anionic surfactant — to maintain enzyme activity through the wash cycle and prevent re-deposition.
              </p>
              <div className="grid-3" style={{ marginTop: 40, gap: 32 }}>
                {[
                  ['ACTIVES', '8 %'],
                  ['pH', '8.4'],
                  ['TEMP', '20–60°C'],
                ].map(([k, v]) => (
                  <div key={k}>
                    <div className="meta" style={{ color: 'rgba(255,255,255,.5)' }}>{k}</div>
                    <div className="mono" style={{ fontSize: 28, marginTop: 6, letterSpacing: '-0.01em' }}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 40, display: 'flex', gap: 12 }}>
                <button className="btn" style={{ background: 'var(--bg)', color: 'var(--ink)', borderColor: 'var(--bg)' }}
                        onClick={() => openProduct('01')}>
                  Read Formulation →
                </button>
                <button className="btn ghost" style={{ borderColor: 'var(--bg)', color: 'var(--bg)' }}>
                  Add — £12.00
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* JOURNAL PREVIEW */}
      <section className="section">
        <div className="shell">
          <div className="section-header">
            <span className="num">04 / 06</span>
            <span className="title">Journal</span>
            <span className="meta">PROTOCOLS · PRIMERS · ERRATA</span>
          </div>
          <div className="grid-3">
            {JOURNAL.slice(0, 3).map((j) => (
              <article key={j.id} className="article">
                <span className="num">{j.id} · {j.read}</span>
                <h3>{j.title}</h3>
                <p>{j.excerpt}</p>
                <span className="more">Read →</span>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* REFILL CTA */}
      <section className="section bg-soft">
        <div className="shell">
          <div className="grid-12" style={{ alignItems: 'center' }}>
            <div style={{ gridColumn: 'span 5' }}>
              <Pouch product={PRODUCTS[0]} h={320} />
            </div>
            <div style={{ gridColumn: 'span 7' }}>
              <div className="meta">ON REFILL</div>
              <h2 className="display-sm" style={{ marginTop: 16, maxWidth: 540 }}>
                The vessel is bought once. The chemistry is bought again.
              </h2>
              <p style={{ marginTop: 24, color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.6, maxWidth: 540 }}>
                Every Protocol vessel is dosed for a 1L refill pouch. Pouches arrive minimally packaged, with a precision spout for re-filling, and are taken back through the post for closed-loop processing.
              </p>
              <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
                <button className="btn">Subscribe to Refills</button>
                <button className="btn ghost">How it works →</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// PRODUCTS
// ──────────────────────────────────────────────────────────────────────────

function ProductsPage({ openProduct }) {
  const [filter, setFilter] = React.useState('all');
  const filters = [
    { id: 'all', label: 'All Six' },
    { id: 'bio', label: 'Enzymatic' },
    { id: 'mild', label: 'Sensitive' },
    { id: 'oxi', label: 'Oxidising' },
    { id: 'aux', label: 'Auxiliary' },
  ];
  const matchFilter = (p) => {
    if (filter === 'all') return true;
    if (filter === 'bio') return ['01', '05'].includes(p.id);
    if (filter === 'mild') return ['02', '06'].includes(p.id);
    if (filter === 'oxi') return p.id === '03';
    if (filter === 'aux') return ['04'].includes(p.id);
    return true;
  };
  const visible = PRODUCTS.filter(matchFilter);

  return (
    <div>
      <section className="section" style={{ paddingTop: 56 }}>
        <div className="shell">
          <div className="bar" style={{ marginBottom: 40 }}>
            <span className="strong">CATALOGUE / FORMULATIONS / 2026</span>
            <span>6 OF 6 LISTED</span>
            <span>REVISION 01</span>
          </div>
          <h1 className="display-sm">The Catalogue</h1>
          <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 14, maxWidth: 540 }}>
            Six formulations. Each addresses a single soil class or fibre class. Decision support: see <a style={{ textDecoration: 'underline' }}>compatibility chart →</a>
          </p>

          <div className="row gap-sm" style={{ marginTop: 48, paddingBottom: 24, borderBottom: '1px solid var(--ink)' }}>
            {filters.map((f) => (
              <button key={f.id} onClick={() => setFilter(f.id)}
                      className={'tag' + (filter === f.id ? ' active' : '')}>
                <span>{f.label}</span>
                <span style={{ color: 'var(--ink-3)' }}>
                  {PRODUCTS.filter((p) => {
                    if (f.id === 'all') return true;
                    if (f.id === 'bio') return ['01', '05'].includes(p.id);
                    if (f.id === 'mild') return ['02', '06'].includes(p.id);
                    if (f.id === 'oxi') return p.id === '03';
                    if (f.id === 'aux') return ['04'].includes(p.id);
                    return false;
                  }).length}
                </span>
              </button>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderBottom: '1px solid var(--ink)' }}>
            {visible.map((p, i) => (
              <button key={p.id}
                      className="card-product"
                      style={{
                        borderRight: ((i + 1) % 3 === 0) ? 'none' : '1px solid var(--hair)',
                        borderTop: i >= 3 ? '1px solid var(--hair)' : 'none',
                        paddingTop: 40, paddingBottom: 40,
                      }}
                      onClick={() => openProduct(p.id)}>
                <div className="bottle-wrap" style={{ height: 360 }}>
                  <Bottle product={p} h={360} />
                </div>
                <div className="grid-2" style={{ width: '100%', alignItems: 'baseline' }}>
                  <div>
                    <div className="num">PROTOCOL N° {p.id}</div>
                    <div className="title" style={{ fontSize: 19 }}>{p.name}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div className="price">£{p.price}</div>
                    <div className="meta">{p.capacity}</div>
                  </div>
                </div>
                <div className="actives" style={{ marginTop: 12 }}>{p.actives}</div>
                <p style={{ marginTop: 12, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, textAlign: 'left' }}>
                  {p.short}
                </p>
                <div style={{ marginTop: 'auto', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
                  <span className="meta strong" style={{ color: 'var(--ink)' }}>Read formulation →</span>
                  <span className="tag accent" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>{p.mechanism}</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// PDP — Product Display Page
// ──────────────────────────────────────────────────────────────────────────

function PDPPage({ productId, openProduct }) {
  const p = PRODUCTS.find((x) => x.id === productId) || PRODUCTS[0];
  return (
    <div>
      {/* PDP header strip */}
      <div className="shell" style={{ paddingTop: 32 }}>
        <div className="bar">
          <span><a href="#products" className="strong">CATALOGUE</a> / N° {p.id} / {p.name.toUpperCase()}</span>
          <span>BATCH {p.batch}</span>
          <span>REV. 01</span>
          <span>SDS AVAILABLE</span>
        </div>
      </div>

      <section className="section" style={{ paddingTop: 48 }}>
        <div className="shell">
          <div className="grid-12" style={{ gap: 48 }}>
            {/* LEFT — bottle */}
            <div style={{ gridColumn: 'span 6', position: 'sticky', top: 80, height: 'min-content' }}>
              <div style={{
                background: 'var(--bg-soft)',
                padding: 64, display: 'flex', flexDirection: 'column', alignItems: 'center',
                gap: 24, border: '1px solid var(--hair)'
              }}>
                <Bottle product={p} h={560} />
                <div className="row gap-sm" style={{ marginTop: 16 }}>
                  {['Vessel', 'Refill', 'Diagram'].map((v, i) => (
                    <button key={v} className={'tag' + (i === 0 ? ' active' : '')}>{v}</button>
                  ))}
                </div>
              </div>
              <div className="row gap-sm" style={{ marginTop: 16 }}>
                <span className="tag">FORMAT · {p.capacity}</span>
                <span className="tag">pH {p.ph}</span>
                <span className="tag">{p.mechanism.toUpperCase()}</span>
              </div>
            </div>

            {/* RIGHT — data */}
            <div style={{ gridColumn: 'span 6' }}>
              <div className="meta">PROTOCOL N° {p.id} / {p.mechanism.toUpperCase()}</div>
              <h1 className="display-sm" style={{ marginTop: 16, letterSpacing: '-0.03em' }}>{p.name}</h1>
              <p style={{ marginTop: 20, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.55 }}>{p.short}</p>

              <div className="bar" style={{ marginTop: 40 }}>
                <span className="strong">ACTIVE INGREDIENTS</span>
                <span className="dots" style={{ flex: 1, borderBottom: '1px dotted var(--hair-strong)', position: 'relative', top: -3 }} />
                <span>VERIFIED</span>
              </div>
              <div style={{ marginTop: 24, fontSize: 22, letterSpacing: '-0.01em', lineHeight: 1.4 }}>
                {p.actives}
              </div>

              <p style={{ marginTop: 24, color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.6 }}>
                {p.desc}
              </p>

              <div style={{ marginTop: 40, display: 'flex', gap: 12, alignItems: 'center' }}>
                <button className="btn" style={{ flex: 1, height: 56, fontSize: 12 }}>Add Vessel · £{p.price}</button>
                <button className="btn ghost" style={{ height: 56 }}>Refill · £{(p.price * 0.55).toFixed(2)}</button>
              </div>

              <div className="bar" style={{ marginTop: 56 }}>
                <span className="strong">FORMULATION · % MASS</span>
                <span className="dots" style={{ flex: 1, borderBottom: '1px dotted var(--hair-strong)', position: 'relative', top: -3 }} />
                <span>TOTAL ≈ 100.0%</span>
              </div>
              <div style={{ marginTop: 24 }}>
                <CompositionBar pct={p.pct} accent="var(--accent)" />
              </div>

              <div className="bar" style={{ marginTop: 56 }}>
                <span className="strong">SPECIFICATION</span>
                <span className="dots" style={{ flex: 1, borderBottom: '1px dotted var(--hair-strong)', position: 'relative', top: -3 }} />
              </div>
              <table className="spec" style={{ marginTop: 12 }}>
                <tbody>
                  <tr><th>VOLUME</th><td><span className="v">{p.capacity}</span></td></tr>
                  <tr><th>pH (1% aq.)</th><td><span className="v">{p.ph}</span></td></tr>
                  <tr><th>DOSAGE</th><td><span className="v">{p.dosage}</span></td></tr>
                  <tr><th>TEMPERATURE RANGE</th><td><span className="v">{p.temp}</span></td></tr>
                  <tr><th>MECHANISM</th><td><span className="v">{p.mechanism}</span></td></tr>
                  <tr><th>BATCH</th><td><span className="v">{p.batch}</span></td></tr>
                  <tr><th>SHELF LIFE</th><td><span className="v">24 months unopened / 6 months in use</span></td></tr>
                </tbody>
              </table>

              <div className="bar" style={{ marginTop: 56 }}>
                <span className="strong">COMPATIBILITY</span>
                <span className="dots" style={{ flex: 1, borderBottom: '1px dotted var(--hair-strong)', position: 'relative', top: -3 }} />
              </div>
              <div className="grid-2" style={{ marginTop: 16, gap: 24 }}>
                <div>
                  <div className="meta accent" style={{ marginBottom: 12 }}>SAFE FOR</div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                    {p.fabric.map((f) => (
                      <li key={f} className="leader">
                        <span>{f}</span>
                        <span className="dots" />
                        <span>✓</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div>
                  <div className="meta" style={{ marginBottom: 12 }}>AVOID</div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                    {p.avoidFabric.length === 0 && (
                      <li className="leader"><span style={{ color: 'var(--ink-3)' }}>No restrictions</span></li>
                    )}
                    {p.avoidFabric.map((f) => (
                      <li key={f} className="leader">
                        <span>{f}</span>
                        <span className="dots" />
                        <span>×</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MECHANISM */}
      <section className="section" style={{ background: 'var(--bg-soft)' }}>
        <div className="shell">
          <div className="section-header">
            <span className="num">FIG. 01</span>
            <span className="title">Mechanism of Action</span>
            <span className="meta">{p.mechanism.toUpperCase()}</span>
          </div>
          <div style={{ background: 'var(--bg)', padding: 48, border: '1px solid var(--hair)' }}>
            <MechanismDiagram />
          </div>
        </div>
      </section>

      {/* USAGE PROTOCOL */}
      <section className="section">
        <div className="shell">
          <div className="section-header">
            <span className="num">N° {p.id}</span>
            <span className="title">Usage Protocol</span>
            <span className="meta">FOUR STEPS</span>
          </div>
          <div className="grid-12">
            {[
              ['I.', 'Weigh load', 'Use a domestic scale. Standard load = 4.5 kg dry weight.'],
              ['II.', 'Determine dose', 'Reference the dosing card. Adjust +25% for hard water (>250 mg/L CaCO₃).'],
              ['III.', 'Dispense', 'Press the precision pump. Each full stroke = 5 ml.'],
              ['IV.', 'Wash', `Programme: ${p.temp}, full rinse. Optimal cycle ≥ 40 min for full enzyme activity.`],
            ].map(([n, t, d], i) => (
              <div key={n} style={{ gridColumn: 'span 3', borderRight: i < 3 ? '1px solid var(--hair)' : 'none', paddingRight: 24 }}>
                <div className="mono" style={{ fontSize: 40, letterSpacing: '-0.02em' }}>{n}</div>
                <h4 style={{ fontSize: 18, marginTop: 16 }}>{t}</h4>
                <p style={{ marginTop: 12, color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.55 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* RELATED */}
      <section className="section">
        <div className="shell">
          <div className="section-header">
            <span className="num">REL.</span>
            <span className="title">From the Catalogue</span>
            <span className="meta">5 OTHERS</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
            {PRODUCTS.filter((x) => x.id !== p.id).slice(0, 5).map((q) => (
              <button key={q.id} className="card-product" onClick={() => openProduct(q.id)}>
                <div className="bottle-wrap" style={{ height: 220 }}>
                  <Bottle product={q} h={220} />
                </div>
                <div className="num">N° {q.id}</div>
                <div className="title" style={{ fontSize: 15 }}>{q.name}</div>
                <div className="actives" style={{ fontSize: 10.5 }}>{q.actives}</div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, ProductsPage, PDPPage });