/* Aevitan website — Science: the scientific board's evaluation cycle + board consensus. */
const DSs = window.AevitanDesignSystem_6a042d;

function Standard({ go }) {
  const { Monogram } = DSs;
  // Each assessment names the FOCUS that triggers it (all focuses, or one of
  // nutrition / metabolism / aesthetics) and the product CATEGORIES it applies to.
  const assessments = [
    {
      n: '01',
      focus: 'All focuses',
      title: 'Identity & purity',
      desc: 'Molecular identity, purity and contaminant screening against the Certificate of Analysis.',
      tags: ['Every category'],
      all: true,
    },
    {
      n: '02',
      focus: 'Nutrition',
      title: 'Nutritional profile',
      desc: 'Composition, dosing and every dietary claim printed on the label.',
      tags: ['Food', 'Supplement', 'Nutraceutical'],
    },
    {
      n: '03',
      focus: 'Metabolism',
      title: 'Metabolic action',
      desc: 'Mechanism of action, physiological plausibility and bioavailability.',
      tags: ['Supplement', 'Nutraceutical', 'Medicine'],
    },
    {
      n: '04',
      focus: 'Aesthetics',
      title: 'Aesthetic performance',
      desc: 'Dermatological effect, cosmetic performance and skin tolerability.',
      tags: ['Cosmetic'],
    },
    {
      n: '05',
      focus: 'All focuses',
      title: 'Pharmacological safety',
      desc: 'Interactions, contraindications and safe dosing windows.',
      tags: ['Supplement', 'Nutraceutical', 'Medicine', 'Health product'],
    },
    {
      n: '06',
      focus: 'All focuses',
      title: 'Regulatory conformity',
      desc: 'Labeling, legal classification and permitted claims by market.',
      tags: ['Every category'],
      all: true,
    },
  ];
  const principles = [
    ['We buy anonymously', 'Our verification process simulates a real, unidentified purchase: no special treatment from manufacturers.'],
    ['We admit only what we approve', 'Every product in the catalog has passed the full standard and the scientific board. Nothing reaches the shelf on marketing alone.'],
  ];
  return (
    <div>
      {/* Section 1 is the pinned hero (site motion language): keep it short — just the intro —
          so the assessment cards and the consensus banner below float over it at full fidelity. */}
      <section className="aevsite-band aevsite-band--top aevsite-visual-hero aevsite-science-hero">
        <div className="aevsite-visual-hero__bg" aria-hidden="true">
          <img src="../../assets/hero-science-4k.jpg" alt="" loading="eager" decoding="async" />
        </div>
        <div className="aevsite-visual-hero__fog" aria-hidden="true"></div>
        <div className="aevsite-wrap aevsite-reveal aevsite-visual-hero__content">
          <div className="aevsci-kick">The scientific board</div>
          <h2 className="aevsite-h2 big">The evaluation cycle.</h2>
          <p className="aevsite-lead" style={{ maxWidth: '62ch' }}>
            Admission runs as a cycle of technical assessments. Some run on every product; others
            engage only when its focus (nutrition, metabolism, aesthetics) and category call for it.
            A product is admitted once every applicable check clears, and anything unresolved sends
            it back.
          </p>
        </div>
      </section>

      <section className="aevsite-band aevsite-mist">
        <div className="aevsite-wrap aevsite-reveal aevsci-grid">
          {assessments.map((a) => (
            <article key={a.n} className="aevsci-card">
              <div className="aevsci-card__top">
                <span className="aevsci-card__n">{a.n}</span>
                <span className="aevsci-card__focus">{a.focus}</span>
              </div>
              <h3 className="aevsci-card__t">{a.title}</h3>
              <p className="aevsci-card__d">{a.desc}</p>
              <div className="aevsci-card__tags">
                {a.tags.map((t) => (
                  <span key={t} className={a.all ? 'aevsci-chip aevsci-chip--all' : 'aevsci-chip'}>
                    {t}
                  </span>
                ))}
              </div>
            </article>
          ))}
        </div>

        <div className="aevsite-wrap aevsite-reveal">
          <div className="aevsci-consensus">
            <div className="aevsci-consensus__mono">
              <Monogram size={44} tone="gold" />
            </div>
            <div className="aevsci-consensus__body">
              <div className="aevsci-consensus__kick">Board consensus</div>
              <h3 className="aevsci-consensus__t">Admit, or return for revision.</h3>
              <p className="aevsci-consensus__d">
                The board convenes on each review round. A product carries the Aevitan name only
                when each applicable assessment clears; anything unresolved returns to sourcing and
                re-enters the cycle.
              </p>
            </div>
            <div className="aevsci-consensus__cta">
              <span className="aevsci-pill">&#8635; Repeats each round</span>
            </div>
          </div>
        </div>
      </section>

      <section className="aevsite-band">
        <div className="aevsite-wrap aevsite-reveal aevsci-principles">
          {principles.map(([t, d]) => (
            <article key={t} className="aevsci-principle">
              <h3 className="aevsci-principle__t">{t}</h3>
              <p className="aevsci-principle__d">{d}</p>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}

window.Standard = Standard;