// AboutScreen — page "À propos" (E-E-A-T). `m` = rendu mobile 375px. `pfx` = préfixe des ids de slots photo.
function AboutScreen({ m = false, pfx = 'd', onNav = () => {} }) {
  const { Icon } = window;
  const { Button, Card, Badge, TrustBlock, Rating } = 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 slot = (id, alt, style) => React.createElement('image-slot', { id: `${pfx}-${id}`, shape: 'rounded', radius: 4, placeholder: alt, style: { display: 'block', ...style } });

  const stats = [
    { n: '2015', l: 'Année de création' },
    { n: '3', l: 'Associés praticiens et spécialistes' },
    { n: '200+', l: 'Thérapeutes et élèves nous font confiance' },
    { n: '30 ans', l: 'De pratique des médecines orientales' },
  ];
  const timeline = [
    { y: '2015', t: 'Création de Sino-Pharma à Mouscron, en Belgique, autour de Richard Zagorski, praticien et enseignant en diététique chinoise, et de Marc Mézard, praticien, chercheur et enseignant en médecines traditionnelles orientales.' },
    { y: '2019', t: 'Jacques Penna, ancien directeur des laboratoires Dolisos et fondateur de Novabio, rejoint le capital et apporte son expérience de l\u2019industrie de la pharmacopée chinoise.' },
    { y: '2022', t: 'Partenariat avec l\u2019un des principaux fournisseurs d\u2019herbes chinoises en Europe pour sécuriser qualité et approvisionnement.' },
    { y: '2024', t: 'Recentrage complet du catalogue sur les compléments alimentaires MTC et MTV, notre cœur de métier.' },
    { y: 'Aujourd\u2019hui', t: 'Une gamme resserrée et exigeante, choisie formule par formule, au service des particuliers comme des professionnels.' },
  ];
  const team = [
    { id: 'richard', n: 'Richard Zagorski', r: 'Gérant et conseil MTC', b: 'Ingénieur de formation, Richard Zagorski se consacre depuis plus de 25 ans à la médecine traditionnelle chinoise, avec une spécialité : la diététique chinoise et la pharmacopée (formation IMTC). Il assure la gérance et répond aux questions des clients.' },
    { id: 'marc', n: 'Marc Mézard', r: 'La caution scientifique', b: 'Praticien, chercheur et enseignant en médecines traditionnelles orientales, Marc Mézard consacre sa vie depuis plus de 30 ans à l\u2019étude et à la transmission de la médecine traditionnelle vietnamienne. Il supervise la gamme MTV.', more: true },
    { id: 'jacques', n: 'Jacques Penna', r: 'La qualité et la logistique', b: 'Ancien directeur des laboratoires Dolisos et fondateur de Novabio, laboratoire spécialisé en pharmacopée chinoise, Jacques Penna apporte plus de 30 ans d\u2019expérience de l\u2019industrie et veille à la qualité comme à la logistique.' },
  ];
  const controls = [
    { i: 'flask-conical', t: 'Chromatographie', d: 'En phase gazeuse' },
    { i: 'microscope', t: 'Microbiologie', d: 'Analyses complètes' },
    { i: 'sprout', t: 'Pesticides', d: 'Recherche de résidus' },
    { i: 'atom', t: 'Métaux lourds', d: 'Recherche de traces' },
    { i: 'shield-check', t: 'Aflatoxines', d: 'Recherche systématique' },
  ];
  const faq = [
    ['Qui est Sino-Pharma ?', 'Sino-Pharma est une boutique en ligne spécialisée en pharmacopée traditionnelle chinoise (MTC) et vietnamienne (MTV), fondée en 2015 et basée à Mouscron, en Belgique. Elle est dirigée par des praticiens et enseignants des médecines traditionnelles orientales.'],
    ['Qui est Marc Mézard ?', 'Marc Mézard est praticien, chercheur et enseignant en médecines traditionnelles orientales, formé à partir de 1991 auprès du Dr Truong Thin à Hô Chi Minh-Ville. Directeur de l\u2019IFVMTO depuis 1995, il supervise la gamme MTV de Sino-Pharma.'],
    ['Vos produits sont-ils contrôlés ?', 'Oui. Nos compléments alimentaires sont fabriqués en Europe par des laboratoires certifiés FSSC 22000 et contrôlés selon les bonnes pratiques de fabrication : analyses microbiologiques, recherche de pesticides, de métaux lourds et d\u2019aflatoxines, chromatographie.'],
    ['Proposez-vous des conseils avant l\u2019achat ?', 'Oui, c\u2019est même notre marque de fabrique. Vos questions (posologie, précautions, choix d\u2019une formule) sont traitées personnellement par des praticiens formés, par email ou par téléphone, avant comme après la commande.'],
    ['Livrez-vous en outre-mer ?', 'Oui, nous expédions en France métropolitaine comme en outre-mer, où nous comptons de nombreux clients fidèles, notamment à La Réunion.'],
    ['Travaillez-vous avec les professionnels de santé ?', 'Oui, plus de 200 thérapeutes, praticiens et élèves en formation s\u2019approvisionnent régulièrement chez nous. Un Espace pro leur est dédié.'],
  ];
  const univers = [
    { t: 'MTC', d: 'Pharmacopée chinoise', i: 'leaf' },
    { t: 'MTV', d: 'Pharmacopée vietnamienne', i: 'flower-2' },
    { t: 'Diététique', d: 'Diététique chinoise', i: 'soup' },
    { t: 'Beauté & bien-être', d: 'Soins du quotidien', i: 'sparkles' },
  ];

  return (
    <main style={{ background: 'var(--surface-page)' }}>
      {/* 1 · HERO */}
      <section style={{ background: 'var(--cream-50)', backgroundImage: 'var(--glow-sage)', borderBottom: '1px solid var(--border-hairline)', padding: m ? '32px 0 40px' : '68px 0 76px' }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: m ? '1fr' : '1.02fr 0.98fr', gap: m ? 28 : 56, alignItems: 'center' }}>
          <div>
            <p style={eyebrow}>À propos de Sino-Pharma</p>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: m ? 32 : 52, lineHeight: 1.08, letterSpacing: '-0.028em', color: 'var(--gray-900)', margin: '0 0 20px' }}>
              Sino-Pharma, la pharmacopée chinoise et vietnamienne portée par des praticiens
            </h1>
            <p style={{ ...body, fontSize: m ? 16 : 18.5, color: 'var(--gray-600)', margin: 0, maxWidth: 560 }}>
              Sino-Pharma est une boutique en ligne spécialisée en pharmacopée traditionnelle chinoise (MTC) et vietnamienne (MTV), fondée en octobre 2015 par des spécialistes des médecines traditionnelles orientales.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 28 }}>
              <Button variant="primary" size={m ? 'md' : 'lg'} rightIcon={<Icon name="arrow-right" size={18} />}>Découvrir la boutique</Button>
              <Button variant="ghost" size={m ? 'md' : 'lg'}>Nous contacter</Button>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            {slot('hero', 'Photo équipe / locaux de Mouscron', { width: '100%', aspectRatio: m ? '4 / 3' : '5 / 4', border: '1px solid var(--border-hairline)' })}
            <span style={{ position: 'absolute', bottom: 12, left: 12, background: 'rgba(35,42,32,0.82)', color: 'var(--cream-100)', fontFamily: 'var(--font-body)', fontSize: 12, padding: '6px 11px', borderRadius: 'var(--radius-pill)' }}>Nos locaux · Mouscron, Belgique</span>
          </div>
        </div>
        {/* bandeau chiffres clés */}
        <div style={{ ...wrap, marginTop: m ? 32 : 52 }}>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr 1fr' : 'repeat(4, 1fr)', gap: m ? 10 : 16 }}>
            {stats.map((s) => (
              <div key={s.l} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: m ? '14px 14px' : '20px 22px' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 24 : 32, letterSpacing: '-0.02em', color: 'var(--green-600)', lineHeight: 1.05 }}>{s.n}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: m ? 12.5 : 13.5, color: 'var(--gray-600)', marginTop: 6, lineHeight: 1.4 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 2 · NOTRE HISTOIRE */}
      <section style={section()}>
        <div style={wrap}>
          <p style={eyebrow}>Notre histoire</p>
          <h2 style={h2}>Une aventure née sur le terrain, entre l’Europe et le Vietnam</h2>
          <p style={{ ...body, maxWidth: 700, marginTop: 18 }}>
            Sino-Pharma est née de la rencontre de praticiens et d’enseignants des médecines traditionnelles orientales qui partageaient une même conviction : les formules traditionnelles méritent une source fiable et un conseil compétent.
          </p>
          <div style={{ marginTop: m ? 32 : 48, display: 'flex', flexDirection: 'column' }}>
            {timeline.map((e, i) => (
              <div key={e.y} style={{ display: 'grid', gridTemplateColumns: m ? '20px 1fr' : '148px 20px 1fr', gap: m ? 16 : 24, alignItems: 'start' }}>
                {!m ? (
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 30, letterSpacing: '-0.02em', color: 'var(--gray-900)', textAlign: 'right', paddingBottom: 34 }}>{e.y}</div>
                ) : null}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', alignSelf: 'stretch' }}>
                  <span style={{ width: 11, height: 11, borderRadius: '50%', background: 'var(--green-500)', marginTop: m ? 7 : 12, flexShrink: 0 }} />
                  {i < timeline.length - 1 ? <span style={{ flex: 1, width: 1, background: 'var(--border-soft)', minHeight: m ? 24 : 30 }} /> : null}
                </div>
                <div style={{ paddingBottom: i < timeline.length - 1 ? (m ? 26 : 34) : 0 }}>
                  {m ? <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, letterSpacing: '-0.02em', color: 'var(--gray-900)', marginBottom: 4 }}>{e.y}</div> : null}
                  <p style={{ ...body, margin: 0, maxWidth: 640 }}>{e.t}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3 · L'ÉQUIPE */}
      <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}>L’équipe</p>
          <h2 style={{ ...h2, marginBottom: m ? 26 : 40 }}>Trois associés, trois expertises complémentaires</h2>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 16 : 24 }}>
            {team.map((p) => (
              <Card key={p.id} padding="none" tone="card">
                <div style={{ padding: m ? 0 : 0 }}>
                  {slot(p.id, `Portrait ${p.n}`, { width: '100%', aspectRatio: '4 / 5', borderRadius: 'var(--radius-md) var(--radius-md) 0 0' })}
                </div>
                <div style={{ padding: m ? '18px 18px 20px' : '22px 24px 26px' }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 18 : 20, color: 'var(--gray-900)', margin: 0 }}>{p.n}</h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 500, color: 'var(--plum-500)', margin: '5px 0 12px', letterSpacing: '0.01em' }}>{p.r}</p>
                  <p style={{ ...body, fontSize: 14.5, margin: 0 }}>{p.b}</p>
                  {p.more ? (
                    <a href="#focus-marc" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 14, fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: 'var(--accent-link)' }}>
                      En savoir plus <Icon name="arrow-down-right" size={16} color="var(--accent-link)" />
                    </a>
                  ) : null}
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 4 · FOCUS MARC MÉZARD */}
      <section id="focus-marc" style={section({ background: 'var(--sage-50)', backgroundImage: 'var(--wave-sage)' })}>
        <div style={wrap}>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '0.86fr 1.14fr', gap: m ? 24 : 52, alignItems: 'start' }}>
            <div>
              {slot('marc-situation', 'Marc Mézard en situation (acupuncture / enseignement)', { width: '100%', aspectRatio: m ? '4 / 3' : '4 / 5' })}
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--sage-600)', margin: '10px 0 0' }}>Marc Mézard, séminaire de transmission au Vietnam.</p>
            </div>
            <div>
              <p style={eyebrow}>Focus</p>
              <h2 style={h2}>Marc Mézard, un pont vivant entre l’Orient et l’Occident</h2>
              <p style={{ ...body, marginTop: 18 }}>
                La crédibilité de Sino-Pharma repose sur une chaîne de transmission rare. En 1991, Marc Mézard commence l’étude de la théorie des cinq éléments (Wu Xing) auprès du Dr Truong Thin, alors président de l’institut de médecine traditionnelle de Hô Chi Minh-Ville.
              </p>
              <p style={body}>
                En 1995, il fonde l’IFVMTO (Institut franco-vietnamien des médecines traditionnelles orientales), qu’il dirige aujourd’hui encore. Depuis 2001, il emmène chaque année des groupes de thérapeutes se former au Vietnam.
              </p>
              <p style={body}>
                Chez Sino-Pharma, Marc Mézard supervise la gamme de médecine traditionnelle vietnamienne, dont il a élaboré les formules au fil de ses années de pratique et de recherche. Il est l’auteur de 7 ouvrages et de 7 vidéos pédagogiques.
              </p>
              <blockquote style={{ margin: m ? '22px 0 0' : '26px 0 0', padding: m ? '18px 20px' : '22px 26px', background: 'var(--cream-50)', borderLeft: '3px solid var(--green-500)', borderRadius: '0 var(--radius-md) var(--radius-md) 0' }}>
                <p style={{ fontFamily: 'var(--font-serif)', fontSize: m ? 17 : 20, lineHeight: 1.55, color: 'var(--gray-800)', margin: 0, fontStyle: 'italic' }}>
                  « La médecine traditionnelle vietnamienne est une pratique vivante, qui se transmet de maître à élève. Mon rôle est de faire vivre cette transmission entre le Vietnam et l’Europe. »
                </p>
                <footer style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--gray-500)', marginTop: 12 }}>Marc Mézard, directeur de l’IFVMTO</footer>
              </blockquote>
            </div>
          </div>
          {/* vignettes livres & vidéos */}
          <div style={{ marginTop: m ? 32 : 48, display: 'flex', flexDirection: 'column', gap: m ? 22 : 30 }}>
            {[{ k: 'livres', label: '7 ouvrages', icon: 'book-open', n: 7, cta: 'Voir les ouvrages' }, { k: 'videos', label: '7 vidéos pédagogiques', icon: 'play-circle', n: 7, cta: 'Voir les vidéos' }].map((g) => (
              <div key={g.k}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 15.5 : 17, color: 'var(--gray-900)', margin: 0, display: 'inline-flex', alignItems: 'center', gap: 9 }}>
                    <Icon name={g.icon} size={18} color="var(--sage-600)" /> {g.label}
                  </h3>
                  <a href="#" style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 600, color: 'var(--accent-link)' }}>{g.cta}</a>
                </div>
                <div style={{ display: m ? 'flex' : 'grid', gridTemplateColumns: m ? undefined : 'repeat(7, 1fr)', gap: 12, overflowX: m ? 'auto' : undefined, paddingBottom: m ? 6 : 0 }}>
                  {Array.from({ length: g.n }).map((_, i) => (
                    <div key={i} style={{ flex: m ? '0 0 108px' : undefined, minWidth: m ? 108 : 0 }}>
                      {slot(`${g.k}-${i}`, g.k === 'livres' ? `Couverture ${i + 1}` : `Miniature vidéo ${i + 1}`, { width: '100%', aspectRatio: g.k === 'livres' ? '3 / 4' : '16 / 10', border: '1px solid rgba(35,42,32,0.08)' })}
                    </div>
                  ))}
                </div>
                {m ? <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--sage-600)', margin: '4px 0 0' }}>Faites défiler →</p> : null}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 5 · QUALITÉ ET SÉCURITÉ */}
      <section style={section()}>
        <div style={wrap}>
          <p style={eyebrow}>Qualité et sécurité</p>
          <h2 style={h2}>Une exigence de qualité à chaque étape</h2>
          <p style={{ ...body, maxWidth: 760, marginTop: 18 }}>
            Tous nos compléments alimentaires sont fabriqués en Europe par des laboratoires partenaires sélectionnés, dont la certification <strong style={{ fontWeight: 600, color: 'var(--gray-900)' }}>FSSC 22000</strong> (norme internationale de sécurité des denrées alimentaires) atteste la maîtrise des procédés. Avant de nous être expédiés, les produits passent une batterie de contrôles conformes aux bonnes pratiques de fabrication (BPF).
          </p>
          <div style={{ marginTop: m ? 26 : 36, display: 'grid', gridTemplateColumns: m ? '1fr 1fr' : 'repeat(5, 1fr)', gap: m ? 10 : 16 }}>
            {controls.map((c) => (
              <div key={c.t} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: m ? '16px 14px' : '22px 20px' }}>
                <Icon name={c.i} size={m ? 22 : 26} color="var(--green-600)" />
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 14.5 : 15.5, color: 'var(--gray-900)', marginTop: 12 }}>{c.t}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--gray-500)', marginTop: 4 }}>{c.d}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: m ? 18 : 24, display: 'grid', gridTemplateColumns: m ? '1fr' : '0.9fr 1.1fr', gap: m ? 14 : 24, alignItems: 'stretch' }}>
            <div style={{ background: 'var(--surface-sunken)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: m ? '18px' : '24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ width: 54, height: 54, borderRadius: '50%', background: 'var(--cream-50)', border: '1px solid var(--border-soft)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name="award" size={24} color="var(--plum-500)" />
                </span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: 'var(--gray-900)' }}>Certification FSSC 22000</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--gray-600)' }}>Laboratoires partenaires, fabrication en Europe</div>
                </div>
              </div>
              <div style={{ borderTop: '1px solid var(--border-hairline)', paddingTop: 14, display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <Icon name="file-check" size={18} color="var(--sage-600)" />
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.6, color: 'var(--gray-600)', margin: 0 }}>
                  Nos formules sont notifiées auprès de la DGCCRF pour leur commercialisation en France. Nos conditionnements sont pensés pour des cures d’un mois.
                </p>
              </div>
            </div>
            <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderLeft: '3px solid var(--sage-400)', borderRadius: 'var(--radius-md)', padding: m ? '18px' : '24px 26px' }}>
              <div style={{ ...eyebrow, marginBottom: 10 }}>Comment nous choisissons nos produits</div>
              <p style={{ ...body, fontSize: m ? 14.5 : 15.5, margin: 0 }}>
                Le catalogue reste volontairement resserré : chaque référence y 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>
        </div>
      </section>

      {/* 6 · LE CONSEIL */}
      <section style={section({ background: 'var(--cream-50)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)' })}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 0.85fr', gap: m ? 24 : 48, alignItems: 'center' }}>
          <div>
            <p style={eyebrow}>Le conseil, notre différence</p>
            <h2 style={h2}>Ici, une question trouve toujours une réponse</h2>
            <p style={{ ...body, marginTop: 18, maxWidth: 560 }}>
              Posologie, précautions d’emploi, compatibilité avec vos compléments actuels, choix entre deux formules : chez Sino-Pharma, chaque question reçoit la réponse d’un praticien formé, qui connaît les formules et leurs précautions d’emploi.
            </p>
          </div>
          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-lg)', padding: m ? '20px' : '28px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--gray-600)', margin: 0 }}>Une question avant de commander ? Un conseil après réception ?</p>
            <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>
      </section>

      {/* 7 · PROFESSIONNELS */}
      <section style={{ background: 'var(--wave-dark)', color: 'var(--text-on-dark)', padding: m ? '40px 0' : '68px 0' }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: m ? '1fr' : '200px 1fr auto', gap: m ? 20 : 44, alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 44 : 64, lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--sage-300)' }}>200+</div>
          <div>
            <h2 style={{ ...h2, color: 'var(--cream-100)', fontSize: m ? 22 : 30 }}>Thérapeutes, praticiens, élèves en formation : un espace pensé pour vous</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: m ? 14.5 : 16, lineHeight: 1.68, color: 'var(--text-on-dark-muted)', margin: '12px 0 0', maxWidth: 620 }}>
              Praticiens MTC, acupuncteurs, naturopathes, podologues, médecins : plus de 200 professionnels et élèves en formation s’approvisionnent chez Sino-Pharma, dont les 150 thérapeutes formés par Marc Mézard.
            </p>
          </div>
          <Button variant="primary" size="lg" fullWidth={m} onClick={() => onNav('pro')} rightIcon={<Icon name="arrow-right" size={18} />}>Découvrir l’Espace pro</Button>
        </div>
      </section>

      {/* 8 · PREUVES ET PARTENAIRES */}
      <section style={section()}>
        <div style={wrap}>
          <p style={eyebrow}>Preuves et partenaires</p>
          <h2 style={{ ...h2, marginBottom: m ? 22 : 34 }}>Ils nous font confiance</h2>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 14 : 24 }}>
            <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: m ? '18px' : '24px', display: 'flex', alignItems: 'center', gap: m ? 16 : 22 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 34 : 42, lineHeight: 1, color: 'var(--gray-900)', letterSpacing: '-0.02em' }}>4,8</div>
                <Rating value={4.8} size={15} />
              </div>
              <div style={{ borderLeft: '1px solid var(--border-hairline)', paddingLeft: m ? 16 : 22 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--gray-900)' }}>Avis Google vérifiés</div>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--gray-500)', margin: '5px 0 0', lineHeight: 1.55 }}>Widget avis Google · note et derniers commentaires clients.</p>
              </div>
            </div>
            <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: m ? '18px' : '24px', display: 'flex', alignItems: 'center', gap: 18 }}>
              <div style={{ width: 96, flexShrink: 0 }}>{slot('cfmtc', 'Logo CFMTC', { width: '100%', aspectRatio: '3 / 2' })}</div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--gray-900)' }}>Partenaire de la CFMTC</div>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--gray-500)', margin: '5px 0 6px', lineHeight: 1.55 }}>Confédération Française de Médecine Traditionnelle Chinoise.</p>
                <a href="https://cfmtc.fr" style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--accent-link)' }}>cfmtc.fr</a>
              </div>
            </div>
          </div>
          <div style={{ marginTop: m ? 18 : 24 }}>
            <div style={{ ...eyebrow, marginBottom: 12 }}>Vus dans la presse</div>
            <div style={{ display: m ? 'flex' : 'grid', gridTemplateColumns: m ? undefined : 'repeat(4, 1fr)', gap: 12, overflowX: m ? 'auto' : undefined }}>
              {['Magazine santé', 'Presse seniors', 'Télévision', 'Web'].map((p, i) => (
                <div key={p} style={{ flex: m ? '0 0 150px' : undefined }}>
                  {slot(`presse-${i}`, `Parution — ${p}`, { width: '100%', aspectRatio: '16 / 10', border: '1px solid var(--border-hairline)' })}
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--gray-500)', marginTop: 7 }}>{p}</div>
                </div>
              ))}
            </div>
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--gray-500)', marginTop: 18 }}>Clients fidèles en métropole comme en outre-mer, notamment à La Réunion.</p>
        </div>
      </section>

      {/* 9 · 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}>FAQ</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>

      {/* 10 · CTA FINAL + MENTIONS */}
      <section style={section({ paddingBottom: m ? 36 : 60 })}>
        <div style={wrap}>
          <h2 style={{ ...h2, fontSize: m ? 22 : 30, marginBottom: m ? 18 : 28 }}>Découvrez nos univers</h2>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr 1fr' : 'repeat(4, 1fr)', gap: m ? 10 : 16 }}>
            {univers.map((u) => (
              <a key={u.t} href="#" style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: m ? '16px 14px' : '22px 22px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <Icon name={u.i} size={22} color="var(--sage-600)" />
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 15 : 17, color: 'var(--gray-900)' }}>{u.t}</span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--gray-500)' }}>{u.d}</span>
                <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--accent-link)' }}>
                  Explorer <Icon name="arrow-right" size={14} color="var(--accent-link)" />
                </span>
              </a>
            ))}
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, lineHeight: 1.65, color: 'var(--gray-400)', margin: m ? '26px 0 0' : '34px 0 0', maxWidth: 820 }}>
            SPRL Sinopharma, rue de l’Âtre 59, B-7700 Mouscron (Belgique). TVA BE 0641 889 877. Les compléments alimentaires ne se substituent pas à une alimentation variée et équilibrée ni à un mode de vie sain.
          </p>
        </div>
      </section>
    </main>
  );
}
window.AboutScreen = AboutScreen;