// TRUST & STANDARDS — certifications only.
// A row of certification cards (BAP / ASC / MSC / HACCP / FDA), each
// rendered as a tagged seal with full name and what it certifies.
function Trust() {
  const certs = [
    { code:'BAP',  name:'Best Aquaculture Practices', body:'Four-star certified facilities across our farmed shrimp and fish supply.' },
    { code:'ASC',  name:'Aquaculture Stewardship Council', body:'Responsibly farmed, traceable, and environmentally accountable.' },
    { code:'MSC',  name:'Marine Stewardship Council', body:'Wild-caught seafood from fisheries that meet rigorous sustainability standards.' },
    { code:'HACCP',name:'Hazard Analysis Critical Control Point', body:'Food-safety controls applied at every critical point of the cold chain.' },
    { code:'FDA',  name:'U.S. Food & Drug Administration', body:'Registered importer, fully compliant with U.S. seafood import requirements.' },
  ];

  return (
    <>
      <style>{`
        .trust{background:var(--paper);padding:120px 0}
        .trust .section-head .meta{color:rgba(20,29,36,.55)}

        .cert-grid{
          display:grid;
          grid-template-columns:repeat(5,1fr);
          gap:1px;
          margin-top:48px;
          background:rgba(20,33,51,.15);
          border:1px solid rgba(20,33,51,.15);
        }
        .cert{
          background:var(--paper);
          padding:32px 26px;
          display:flex;flex-direction:column;gap:16px;
          min-height:220px;
        }
        .cert .seal{
          width:54px;height:54px;border-radius:50%;
          border:1.5px solid var(--ink);
          display:flex;align-items:center;justify-content:center;
          font-family:var(--serif);font-style:italic;font-weight:600;
          font-size:14px;letter-spacing:0;color:var(--ink);
          flex-shrink:0;
        }
        .cert .nm{
          font-family:var(--serif);
          font-style:italic;font-weight:500;
          font-size:18px;line-height:1.15;color:var(--ink);
        }
        .cert .bd{
          font-size:12.5px;line-height:1.55;color:rgba(20,33,51,.7);
          font-weight:300;margin-top:auto;
        }

        @media (max-width:980px){
          .cert-grid{grid-template-columns:repeat(2,1fr)}
        }
        @media (max-width:560px){
          .cert-grid{grid-template-columns:1fr}
        }
      `}</style>

      <section id="trust" className="trust">
        <div className="container">
          <div className="section-head">
            <div className="num">§ 04 — Standards</div>
            <h2>Trust, on paper.</h2>
            <div className="meta">
              5 active certifications<br/>
              Lot-level traceability
            </div>
          </div>

          <div className="cert-grid">
            {certs.map(c => (
              <div key={c.code} className="cert">
                <div className="seal">{c.code}</div>
                <div className="nm">{c.name}</div>
                <div className="bd">{c.body}</div>
              </div>
            ))}
          </div>

        </div>
      </section>
    </>
  );
}

window.Trust = Trust;