// PRODUCTS / WHAT WE TRADE
// Five categories, presented as a horizontal ledger of large editorial cards.
// Clicking a row expands it inline to reveal a product photograph and
// extended detail — no page navigation. Only one row open at a time.
function Products() {
  const items = [
    {
      n: '01',
      slug: 'shrimp',
      latin: 'Penaeus spp.',
      name: 'Shrimp',
      source: 'Ecuador · Venezuela · Honduras · Guatemala',
      forms: ['Head-on', 'HLSO', 'P&D', 'PPV'],
      blurb: 'Vannamei from accredited Latin American sources — sized 10/20 through 100/200, full traceability from pond to port.',
      photo: 'img/shrimp-hand.jpg',
      photo2: 'img/shrimp-tails.jpg',
      photoCaption: 'Live Penaeus vannamei — El Bajo, Ecuador',
      detail: 'Whiteleg shrimp (Penaeus vannamei) from accredited Latin American farms and selected wild fisheries. Cold-chain integrity from harvest pond to ocean container; BAP-, ASC- and HACCP-certified processing partners. Available block-frozen, IQF, raw or cooked, in retail-ready or bulk export packaging.',
      sizes: '10/20 · 16/20 · 21/25 · 26/30 · 31/40 · 41/50 · 51/60 · 61/70 · 71/90 · 100/200',
    },
    {
      n: '02',
      slug: 'fish',
      latin: 'Various spp.',
      name: 'Fish',
      source: 'Pacific · Atlantic',
      forms: ['Whole', 'H&G', 'Fillet', 'Loin'],
      blurb: 'Mahi-mahi, tilapia, salmon, hake, snapper and grouper — wild-caught and aquaculture from Latin American waters, harvested under MSC and ASC standards.',
      photo: null,
      photoCaption: 'Photography forthcoming',
      detail: 'A rotating roster of pelagic and demersal species sourced across both seaboards of the Americas — mahi-mahi, tilapia, Atlantic salmon, Pacific hake, red snapper, and grouper. Wild stocks landed from MSC-certified vessels; aquaculture from ASC-accredited operators. Cut to spec: whole-round, headed-and-gutted, skin-on or pin-bone-out fillets, center-cut loins.',
      sizes: 'Custom grading by weight or count — discuss with desk',
    },
    {
      n: '03',
      slug: 'lobster',
      latin: 'Homarus & Panulirus',
      name: 'Lobster',
      source: 'Honduras · Nicaragua · Brazil · Venezuela',
      forms: ['Whole live', 'Whole cooked', 'Tails', 'Meat'],
      blurb: 'Warm-water spiny lobster from the Caribbean and Brazilian coast — graded, sized, and shipped under continuous cold chain.',
      photo: null,
      photoCaption: 'Photography forthcoming',
      detail: 'Caribbean and Brazilian spiny lobster (Panulirus argus) from licensed artisanal fleets, with seasonal Homarus americanus from North-Atlantic suppliers. All product graded against export specifications, blast-frozen within hours of landing, and shipped under continuous cold-chain custody.',
      sizes: '3oz · 4oz · 5oz · 6oz · 8oz · 10oz · 12oz · 16oz+ tails',
    },
    {
      n: '04',
      slug: 'octopus',
      latin: 'Octopus vulgaris',
      name: 'Octopus',
      source: 'Mexico · Venezuela · Peru',
      forms: ['Whole', 'T1–T8', 'Tentacles', 'Carpaccio'],
      blurb: 'Day-boat caught, flash-frozen at source. Sized T1 through T8 with consistent grading and quality assurance.',
      photo: null,
      photoCaption: 'Photography forthcoming',
      detail: 'Octopus vulgaris and O. maya from artisanal day-boat fleets along the Yucatán, Venezuelan and Peruvian coasts. Hand-graded and flash-frozen on arrival to lock in texture. Available whole, double-cleaned, or as separated tentacles for foodservice plating.',
      sizes: 'T1 (>3kg) · T2 · T3 · T4 · T5 · T6 · T7 · T8 (300–500g)',
    },
    {
      n: '05',
      slug: 'squid',
      latin: 'Loligo & Illex',
      name: 'Squid',
      source: 'Argentina · Peru',
      forms: ['Whole', 'Tubes & tentacles', 'Rings', 'IQF'],
      blurb: 'Loligo, Illex and Humboldt squid from regulated jigger fisheries — cleaned, sized, and IQF processed to international specification.',
      photo: null,
      photoCaption: 'Photography forthcoming',
      detail: 'Loligo gahi, Illex argentinus and Humboldt (Dosidicus gigas) from the South-Atlantic and Peruvian jigger fleets. Operations regulated under quota and observer programmes. Cleaned tubes, T+T packs, calibrated rings, or IQF whole — packed to international foodservice specification.',
      sizes: 'U/3 · U/5 · U/7 · 3/5 · 5/8 · 8/12 · 12/20 · 20/40 (count/lb)',
    },
  ];

  const [open, setOpen] = React.useState(null); // index of open row, or null

  return (
    <>
      <style>{`
        .products{background:var(--paper);padding:120px 0 80px}
        .products .section-head .meta{color:rgba(20,29,36,.55)}
        .prod-list{margin-top:48px;border-top:1px solid rgba(20,33,51,.18)}
        .prod-item{border-bottom:1px solid rgba(20,33,51,.18)}
        .prod-row{
          display:grid;
          grid-template-columns:80px 1fr 1.4fr 280px 60px;
          gap:32px;
          align-items:stretch;
          padding:36px 0;
          cursor:pointer;
          transition:background .35s ease, padding .35s ease;
          position:relative;
          background:transparent;
          border:0;
          width:100%;
          text-align:left;
          color:inherit;
          font:inherit;
        }
        .prod-row:hover{background:rgba(20,33,51,.03);padding-left:8px;padding-right:8px}
        .prod-item.is-open .prod-row{background:rgba(20,33,51,.04);padding-left:8px;padding-right:8px}
        .prod-row .num{
          font-family:var(--mono);
          font-size:11px;letter-spacing:.18em;text-transform:uppercase;
          color:var(--brass-2);
          padding-top:12px;
        }
        .prod-row .name{
          font-family:var(--serif);
          font-weight:500;font-style:italic;
          font-size:clamp(40px, 5vw, 72px);
          line-height:.95;letter-spacing:-0.01em;
          margin:0;
          color:var(--ink);
        }
        .prod-row .latin{
          font-family:var(--serif);
          font-style:italic;
          font-size:14px;
          color:rgba(20,33,51,.55);
          margin-top:10px;
        }
        .prod-row .blurb{
          font-size:15px;
          line-height:1.55;
          color:rgba(20,33,51,.78);
          font-weight:300;
          padding-top:14px;
          max-width:46ch;
          margin:0;
        }
        .prod-row .meta-col{padding-top:14px}
        .prod-row .meta-label{
          font-family:var(--mono);font-size:10px;letter-spacing:.18em;
          text-transform:uppercase;color:rgba(20,33,51,.45);
          margin-bottom:8px;
        }
        .prod-row .source{
          font-size:13px;color:var(--ink);font-weight:500;
          margin-bottom:18px;
        }
        .prod-row .forms{display:flex;flex-wrap:wrap;gap:6px}
        .prod-row .form-tag{
          font-family:var(--mono);
          font-size:10px;letter-spacing:.06em;text-transform:uppercase;
          padding:5px 9px;
          border:1px solid rgba(20,33,51,.25);
          color:rgba(20,33,51,.7);
          border-radius:0;
        }
        .prod-row .arr{
          align-self:center;
          justify-self:end;
          width:42px;height:42px;border-radius:50%;
          border:1px solid rgba(20,33,51,.3);
          display:flex;align-items:center;justify-content:center;
          color:var(--ink);
          transition:.25s;
          font-size:18px;
        }
        .prod-row:hover .arr,
        .prod-item.is-open .prod-row .arr{
          background:var(--ink);color:var(--paper);border-color:var(--ink);
        }
        .prod-item.is-open .prod-row .arr{transform:rotate(45deg)}

        /* expanding panel */
        .prod-panel{
          display:grid;
          grid-template-rows:0fr;
          transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1);
        }
        .prod-item.is-open .prod-panel{grid-template-rows:1fr}
        .prod-panel-inner{
          overflow:hidden;
          min-height:0;
        }
        .prod-panel-content{
          display:grid;
          grid-template-columns: 1.2fr 1fr;
          gap:48px;
          padding:8px 0 56px;
          opacity:0;
          transform:translateY(12px);
          transition:opacity .5s ease .15s, transform .5s ease .15s;
        }
        .prod-item.is-open .prod-panel-content{
          opacity:1;
          transform:translateY(0);
        }
        .prod-photo{
          position:relative;
          aspect-ratio: 4 / 3;
          background:#0e1722;
          overflow:hidden;
        }
        .prod-photo img{
          width:100%;height:100%;
          object-fit:cover;
          display:block;
        }
        .prod-photo-empty{
          width:100%;height:100%;
          display:flex;align-items:center;justify-content:center;
          background:
            repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px),
            linear-gradient(135deg, #1a2433, #0e1722);
          color:rgba(255,255,255,.45);
          font-family:var(--mono);
          font-size:10px;letter-spacing:.2em;text-transform:uppercase;
        }
        .prod-photo-caption{
          position:absolute;left:14px;bottom:12px;
          font-family:var(--mono);
          font-size:10px;letter-spacing:.16em;text-transform:uppercase;
          color:rgba(255,255,255,.85);
          background:rgba(0,0,0,.45);
          padding:6px 10px;
          backdrop-filter: blur(4px);
        }
        .prod-photo-strip{
          margin-top:10px;
          aspect-ratio: 16/6;
          overflow:hidden;
        }
        .prod-photo-strip img{
          width:100%;height:100%;object-fit:cover;display:block;
          filter: grayscale(20%);
        }
        .prod-detail{
          padding-top:8px;
        }
        .prod-detail h4{
          font-family:var(--mono);
          font-size:10px;letter-spacing:.2em;text-transform:uppercase;
          color:rgba(20,33,51,.5);
          margin:0 0 12px;
          font-weight:500;
        }
        .prod-detail p{
          font-size:16px;line-height:1.65;
          color:rgba(20,33,51,.85);
          font-weight:300;
          margin:0 0 28px;
          max-width:54ch;
        }
        .prod-sizes{
          font-family:var(--mono);
          font-size:11px;letter-spacing:.06em;
          color:var(--ink);
          line-height:1.9;
          padding:14px 0;
          border-top:1px solid rgba(20,33,51,.15);
          border-bottom:1px solid rgba(20,33,51,.15);
          margin-bottom:24px;
        }
        .prod-cta{
          display:inline-flex;align-items:center;gap:10px;
          font-family:var(--mono);
          font-size:11px;letter-spacing:.16em;text-transform:uppercase;
          color:var(--ink);
          text-decoration:none;
          padding-bottom:4px;
          border-bottom:1px solid var(--ink);
        }
        .prod-cta:hover{color:var(--brass-2);border-color:var(--brass-2)}

        @media (max-width:980px){
          .prod-row{grid-template-columns:60px 1fr; gap:20px;}
          .prod-row .blurb,
          .prod-row .meta-col,
          .prod-row .arr{grid-column:2}
          .prod-row .meta-col{padding-top:6px}
          .prod-panel-content{grid-template-columns:1fr; gap:24px; padding-bottom:40px}
        }
      `}</style>

      <section id="trade" className="products">
        <div className="container">
          <div className="section-head">
            <div className="num">§ 01 — Catalogue</div>
            <h2>What we trade</h2>
            <div className="meta">
              Five core categories<br/>
              Wild &amp; aquaculture
            </div>
          </div>

          <div className="prod-list">
            {items.map((it, idx) => {
              const isOpen = open === idx;
              return (
                <div key={it.n} className={`prod-item ${isOpen ? 'is-open' : ''}`}>
                  <button
                    className="prod-row"
                    onClick={() => setOpen(isOpen ? null : idx)}
                    aria-expanded={isOpen}
                  >
                    <div className="num">{it.n}</div>
                    <div>
                      <h3 className="name">{it.name}</h3>
                      <div className="latin">{it.latin}</div>
                    </div>
                    <p className="blurb">{it.blurb}</p>
                    <div className="meta-col">
                      <div className="meta-label">Sourced from</div>
                      <div className="source">{it.source}</div>
                      <div className="meta-label">Available forms</div>
                      <div className="forms">
                        {it.forms.map(f => <span key={f} className="form-tag">{f}</span>)}
                      </div>
                    </div>
                    <div className="arr">+</div>
                  </button>

                  <div className="prod-panel">
                    <div className="prod-panel-inner">
                      <div className="prod-panel-content">
                        <div>
                          <div className="prod-photo">
                            {it.photo ? (
                              <>
                                <img src={it.photo} alt={`${it.name} — ${it.photoCaption}`} loading="lazy" />
                                <div className="prod-photo-caption">{it.photoCaption}</div>
                              </>
                            ) : (
                              <div className="prod-photo-empty">Photography forthcoming</div>
                            )}
                          </div>
                          {it.photo2 && (
                            <div className="prod-photo-strip">
                              <img src={it.photo2} alt={`${it.name} — secondary`} loading="lazy" />
                            </div>
                          )}
                        </div>
                        <div className="prod-detail">
                          <h4>About the product</h4>
                          <p>{it.detail}</p>
                          <h4>Sizes &amp; counts</h4>
                          <div className="prod-sizes">{it.sizes}</div>
                          <a className="prod-cta" href={`product.html?slug=${it.slug}`}>
                            Full specification sheet →
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}

window.Products = Products;
