// QualityScreen — page "Charte qualité". `m` = rendu mobile 375px.
function QualityScreen({ m = false, onNav = () => {} }) {
  const { Icon } = window;
  const { Button } = window.SinopharmaDesignSystem_d11735;
  const [open, setOpen] = React.useState(null);

  const wrap = { maxWidth: 1240, margin: '0 auto', padding: m ? '0 20px' : '0 28px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 26 : 38, lineHeight: 1.16, letterSpacing: '-0.02em', color: 'var(--gray-900)', margin: 0 };
  const eyebrow = { fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--sage-600)', margin: '0 0 14px' };
  const body = { fontFamily: 'var(--font-body)', fontSize: m ? 15 : 16.5, lineHeight: 1.72, color: 'var(--gray-700)', textWrap: 'pretty' };
  const section = (extra) => ({ padding: m ? '48px 0' : '84px 0', ...extra });
  const mono = { fontFamily: 'var(--font-mono)' };

  const engagements = [
    { t: 'Une sélection de praticien', d: 'Chaque formule est choisie et validée par Richard Zagorski, praticien et enseignant en diététique chinoise, selon la qualité de fabrication et l’intérêt réel de la formule.' },
    { t: 'Une fabrication européenne certifiée', d: 'Nos laboratoires partenaires sont établis en Europe et certifiés FSSC 22000, norme internationale de sécurité des denrées alimentaires.' },
    { t: 'Des contrôles systématiques', d: 'Chaque production est analysée avant expédition selon les bonnes pratiques de fabrication (BPF). Le détail de ces contrôles est présenté ci-dessous.' },
    { t: 'Une traçabilité complète', d: 'L’origine des plantes est documentée, le titrage des principes actifs est contrôlé, et chaque produit porte un numéro de lot et une date.' },
    { t: 'Une conformité réglementaire assumée', d: 'Nos formules sont notifiées auprès de la DGCCRF et notre étiquetage respecte la réglementation européenne des compléments alimentaires.' },
  ];
  const controls = [
    { i: 'flask-conical', t: 'Chromatographie en phase gazeuse', d: 'L’identification et la pureté des principes actifs' },
    { i: 'microscope', t: 'Analyses microbiologiques', d: 'L’absence de contamination bactérienne ou fongique' },
    { i: 'sprout', t: 'Recherche de pesticides', d: 'Le respect des limites maximales de résidus fixées par l’Union européenne' },
    { i: 'atom', t: 'Recherche de métaux lourds', d: 'Plomb, cadmium, mercure et arsenic sous les seuils réglementaires' },
    { i: 'shield-check', t: 'Recherche d’aflatoxines', d: 'L’absence de mycotoxines au-delà des limites autorisées' },
  ];
  const steps = [
    { n: '01', t: 'Sourcing', d: 'Les plantes proviennent de producteurs identifiés.' },
    { n: '02', t: 'Contrôle matières premières', d: 'Identification botanique et titrage des principes actifs à réception.' },
    { n: '03', t: 'Fabrication', d: 'Dans des laboratoires européens certifiés FSSC 22000, conditionnements pensés pour des cures d’un mois.' },
    { n: '04', t: 'Contrôle avant expédition', d: 'La batterie d’analyses BPF, production par production.' },
    { n: '05', t: 'Chez vous', d: 'Un numéro de lot et une date sur chaque produit, pour retracer l’historique complet du flacon.' },
  ];
  const faq = [
    ['Où sont fabriqués les produits Sino-Pharma ?', 'En Europe, par des laboratoires partenaires certifiés FSSC 22000, norme internationale de sécurité des denrées alimentaires.'],
    ['Quels contrôles sont réalisés sur les produits ?', 'Chaque production passe une batterie d’analyses conformes aux bonnes pratiques de fabrication : chromatographie en phase gazeuse, analyses microbiologiques, recherche de pesticides, de métaux lourds et d’aflatoxines.'],
    ['Puis-je connaître l’origine d’un produit que j’ai acheté ?', 'Oui. Chaque produit porte un numéro de lot et une date qui permettent de retracer sa fabrication. Contactez-nous à contact@sino-pharma.net avec votre numéro de lot.'],
    ['Vos formules sont-elles déclarées auprès des autorités ?', 'Oui, nos formules sont notifiées auprès de la DGCCRF pour leur commercialisation en France.'],
  ];
  const liens = [
    { t: 'Qui sommes-nous', nav: 'about' },
    { t: 'Espace pro', nav: 'pro' },
    { t: 'Univers MTC', nav: 'shop' },
    { t: 'Univers MTV', nav: 'shop' },
  ];

  return (
    <main style={{ background: 'var(--surface-page)' }}>
      {/* 1 · HERO — sobre, sans image */}
      <section style={{ background: 'var(--cream-50)', borderBottom: '1px solid var(--border-hairline)', padding: m ? '40px 0 36px' : '76px 0 64px' }}>
        <div style={wrap}>
          <p style={eyebrow}>Charte qualité</p>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: m ? 30 : 46, lineHeight: 1.1, letterSpacing: '-0.026em', color: 'var(--gray-900)', margin: '0 0 18px', maxWidth: 780 }}>
            Notre charte qualité, du champ au flacon
          </h1>
          <p style={{ ...body, fontSize: m ? 16 : 18.5, color: 'var(--gray-600)', margin: 0, maxWidth: 680 }}>
            Tous les compléments alimentaires Sino-Pharma sont fabriqués en Europe par des laboratoires certifiés FSSC 22000, contrôlés selon les bonnes pratiques de fabrication (BPF) et notifiés auprès de la DGCCRF.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 26 }}>
            {['FSSC 22000', 'BPF', 'DGCCRF'].map((b) => (
              <span key={b} style={{ display: 'inline-flex', alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.06em', color: 'var(--green-700)', background: 'var(--sage-50)', border: '1px solid var(--sage-200)', borderRadius: 'var(--radius-pill)', padding: '7px 14px' }}>{b}</span>
            ))}
          </div>
        </div>
      </section>

      {/* 2 · LES 5 ENGAGEMENTS */}
      <section style={section()}>
        <div style={wrap}>
          <p style={eyebrow}>Nos engagements</p>
          <h2 style={{ ...h2, marginBottom: m ? 28 : 44 }}>Cinq engagements, appliqués à chaque référence</h2>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {engagements.map((e, i) => (
              <div key={e.t} style={{ display: 'grid', gridTemplateColumns: m ? '48px 1fr' : '96px 1fr', gap: m ? 16 : 32, padding: m ? '20px 0' : '28px 0', borderTop: i === 0 ? '1px solid var(--border-hairline)' : 'none', borderBottom: '1px solid var(--border-hairline)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 30 : 44, letterSpacing: '-0.02em', color: 'var(--sage-300)', lineHeight: 1 }}>{String(i + 1).padStart(2, '0')}</div>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 17 : 20, color: 'var(--gray-900)', margin: '0 0 8px' }}>{e.t}</h3>
                  <p style={{ ...body, fontSize: m ? 14.5 : 15.5, margin: 0, maxWidth: 620 }}>{e.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3 · TABLEAU DES CONTRÔLES */}
      <section style={section({ background: 'var(--cream-50)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)' })}>
        <div style={wrap}>
          <p style={eyebrow}>Ce que nous vérifions avant expédition</p>
          <h2 style={{ ...h2, marginBottom: m ? 24 : 36 }}>Une batterie d’analyses, production par production</h2>
          {m ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {controls.map((c) => (
                <div key={c.t} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: '16px 16px' }}>
                  <Icon name={c.i} size={22} color="var(--green-600)" />
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--gray-900)', marginTop: 10 }}>{c.t}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--gray-600)', marginTop: 4, lineHeight: 1.5 }}>{c.d}</div>
                </div>
              ))}
            </div>
          ) : (
            <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', padding: '14px 24px', background: 'var(--sage-50)' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gray-500)' }}>Le contrôle</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gray-500)' }}>Ce qu’il garantit</span>
              </div>
              {controls.map((c, i) => (
                <div key={c.t} style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', alignItems: 'center', gap: 20, padding: '20px 24px', borderTop: i > 0 ? '1px solid var(--border-hairline)' : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <Icon name={c.i} size={22} color="var(--green-600)" />
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: 'var(--gray-900)' }}>{c.t}</span>
                  </div>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--gray-600)', lineHeight: 1.5 }}>{c.d}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* 4 · TRAÇABILITÉ EN 5 ÉTAPES */}
      <section style={section()}>
        <div style={wrap}>
          <p style={eyebrow}>Traçabilité</p>
          <h2 style={{ ...h2, marginBottom: m ? 28 : 44 }}>Le parcours d’une formule, du champ au flacon</h2>
          <div style={{ display: m ? 'flex' : 'grid', flexDirection: m ? 'column' : undefined, gridTemplateColumns: m ? undefined : 'repeat(5, 1fr)', gap: m ? 0 : 16 }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{ display: 'flex', flexDirection: m ? 'row' : 'column', gap: m ? 16 : 0, alignItems: m ? 'stretch' : undefined }}>
                <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--sage-50)', border: '1px solid var(--sage-200)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...mono, fontSize: 12.5, fontWeight: 600, color: 'var(--green-700)', flexShrink: 0 }}>{s.n}</span>
                  {m ? (i < steps.length - 1 ? <span style={{ flex: 1, width: 1, background: 'var(--border-soft)', minHeight: 14 }} /> : null) : (i < steps.length - 1 ? <span style={{ flex: 1, height: 1, background: 'var(--border-soft)', margin: '0 8px' }} /> : null)}
                </div>
                <div style={{ padding: m ? '0 0 24px' : '16px 4px 0', flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 15.5 : 15, color: 'var(--gray-900)', marginBottom: 5 }}>{s.t}</div>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: 'var(--gray-600)', margin: 0 }}>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 5 · CATALOGUE RESSERRÉ */}
      <section style={section({ background: 'var(--sage-50)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)' })}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: m ? '1fr' : '260px 1fr', gap: m ? 18 : 44, alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 56 : 84, lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--green-600)' }}>40 <span style={{ fontSize: m ? 18 : 24, fontWeight: 500, color: 'var(--gray-600)', letterSpacing: 0 }}>formules</span></div>
          <div>
            <h2 style={{ ...h2, fontSize: m ? 21 : 27, marginBottom: 12 }}>Un catalogue volontairement resserré</h2>
            <p style={{ ...body, margin: 0, maxWidth: 640 }}>
              Environ 40 formules composent notre catalogue, là où d’autres en référencent des centaines. Ce choix est délibéré : chaque référence gagne sa place par sa qualité de fabrication, l’intérêt réel de sa formule et la confiance des thérapeutes qui l’utilisent.
            </p>
          </div>
        </div>
      </section>

      {/* 6 · CONFORMITÉ ET TRANSPARENCE */}
      <section style={section()}>
        <div style={wrap}>
          <div style={{ background: 'var(--cream-50)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-lg)', padding: m ? '22px 20px' : '36px 42px' }}>
            <p style={eyebrow}>Conformité et transparence</p>
            <h2 style={{ ...h2, fontSize: m ? 19 : 24, marginBottom: 14 }}>Ce que nous disons, et comment nous le disons</h2>
            <p style={{ ...body, fontSize: m ? 14.5 : 15.5, margin: 0, maxWidth: 720 }}>
              Les compléments alimentaires relèvent d’un cadre réglementaire précis, et nous l’appliquons dans nos contenus comme sur nos étiquettes : composition complète et dosages sur chaque fiche produit, posologie et précautions d’emploi indiquées clairement, sans allégation de traitement ou de guérison.
            </p>
          </div>
        </div>
      </section>

      {/* 7 · FAQ */}
      <section style={section({ background: 'var(--cream-50)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)' })}>
        <div style={{ ...wrap, maxWidth: 880 }}>
          <p style={eyebrow}>Vos questions sur la qualité</p>
          <h2 style={{ ...h2, marginBottom: m ? 20 : 30 }}>Questions fréquentes</h2>
          <div style={{ borderTop: '1px solid var(--border-hairline)' }}>
            {faq.map(([q, a], i) => (
              <div key={q} style={{ borderBottom: '1px solid var(--border-hairline)' }}>
                <button onClick={() => setOpen(open === i ? null : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: m ? '16px 0' : '20px 2px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 15 : 17, color: 'var(--gray-900)' }}>{q}</span>
                  <Icon name={open === i ? 'minus' : 'plus'} size={18} color="var(--green-600)" />
                </button>
                {open === i ? <p style={{ ...body, fontSize: m ? 14.5 : 15.5, margin: '0 0 20px', maxWidth: 720 }}>{a}</p> : null}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 8 · CTA FINAL + MENTIONS */}
      <section style={section({ paddingBottom: m ? 36 : 60 })}>
        <div style={wrap}>
          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-lg)', padding: m ? '26px 20px' : '44px 48px', display: 'grid', gridTemplateColumns: m ? '1fr' : '1.1fr 0.9fr', gap: m ? 24 : 48, alignItems: 'center' }}>
            <div>
              <h2 style={{ ...h2, fontSize: m ? 21 : 27, marginBottom: 12 }}>Une question sur un produit, un lot, une analyse ?</h2>
              <p style={{ ...body, fontSize: m ? 14.5 : 15.5, margin: 0, maxWidth: 460 }}>Écrivez-nous ou appelez-nous : un praticien vous répond.</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <a href="mailto:contact@sino-pharma.net" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', background: 'var(--sage-50)', borderRadius: 'var(--radius-md)' }}>
                <Icon name="mail" size={22} color="var(--green-600)" />
                <span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--gray-500)' }}>Par email</span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 15.5 : 17.5, color: 'var(--gray-900)', letterSpacing: '-0.01em' }}>contact@sino-pharma.net</span>
                </span>
              </a>
              <a href="tel:+33980777705" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', background: 'var(--sage-50)', borderRadius: 'var(--radius-md)' }}>
                <Icon name="phone" size={22} color="var(--green-600)" />
                <span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--gray-500)' }}>Par téléphone</span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 17 : 19, color: 'var(--gray-900)', letterSpacing: '-0.01em' }}>09 80 77 77 05</span>
                </span>
              </a>
            </div>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: m ? 16 : 28, marginTop: m ? 26 : 34 }}>
            {liens.map((l) => (
              <a key={l.t} href="#" onClick={(e) => { e.preventDefault(); onNav(l.nav); }} style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: 'var(--accent-link)' }}>{l.t}</a>
            ))}
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, lineHeight: 1.65, color: 'var(--gray-400)', margin: m ? '24px 0 0' : '32px 0 0', maxWidth: 820 }}>
            Les compléments alimentaires ne se substituent pas à une alimentation variée et équilibrée ni à un mode de vie sain. SPRL Sinopharma, rue de l’Âtre 59, B-7700 Mouscron (Belgique). TVA BE 0641 889 877.
          </p>
        </div>
      </section>
    </main>
  );
}
window.QualityScreen = QualityScreen;
