// EspaceProScreen — page "Espace pro". `m` = rendu mobile 375px.
function EspaceProScreen({ 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 avantages = [
    { i: 'percent', t: 'Tarifs préférentiels', d: 'Des conditions tarifaires réservées aux professionnels, appliquées automatiquement dès la validation de votre compte.' },
    { i: 'file-text', t: 'Facturation professionnelle', d: 'Une facture d’achat conforme émise à chaque commande, avec vos coordonnées professionnelles, prête pour votre comptabilité.' },
    { i: 'calendar-clock', t: 'Commandes programmées', d: 'Planifiez vos réapprovisionnements sur l’année : votre stock est toujours assuré et vos livraisons sont prioritaires.' },
    { i: 'headset', t: 'Support dédié', d: 'Un accès facilité à l’équipe, avec un traitement prioritaire de vos demandes et un interlocuteur qui connaît votre historique.' },
    { i: 'message-circle', t: 'Conseils sur mesure', d: 'Posologie, choix entre deux formules, accompagnement d’un cas de figure : Richard Zagorski et l’équipe répondent en confrères.' },
    { i: 'award', t: 'Programme fidélité', d: 'Votre volume d’achat annuel est reconnu et récompensé : remise progressive et avantages en nature.' },
  ];
  const etapes = [
    { n: '01', t: 'Créez votre compte', d: 'Formulaire en 2 minutes, vous nous transmettez par email votre justificatif professionnel.' },
    { n: '02', t: 'Validation sous 5 jours', d: 'L’équipe vérifie votre profil et active vos conditions pro.' },
    { n: '03', t: 'Commandez aux conditions pro', d: 'Vos tarifs s’appliquent automatiquement, votre facture est disponible dans votre espace à chaque commande.' },
  ];
  const cibles = ['Praticiens MTC et acupuncteurs', 'Naturopathes', 'Podologues, médecins et professionnels de santé', 'Herboristes et revendeurs spécialisés', 'Élèves en formation dans les écoles de médecines traditionnelles orientales'];
  const faq = [
    ['Qui peut ouvrir un compte pro ?', 'Tout professionnel des pratiques de santé naturelle en exercice ou en formation : praticiens MTC, acupuncteurs, naturopathes, podologues, professionnels de santé, revendeurs spécialisés et élèves en formation.'],
    ['Quels justificatifs fournir ?', 'Votre diplôme ou votre Kbis d’activité, ou pour les élèves en formation un justificatif d’étude, à transmettre par email à sinopharma@orange.fr.'],
    ['Comment sont appliqués les tarifs préférentiels ?', 'Automatiquement, sur l’ensemble du catalogue, dès la validation de votre compte. Ils apparaissent directement lors de votre navigation connectée.'],
    ['Comment fonctionnent les commandes programmées ?', 'Vous définissez avec nous les quantités et le rythme de réapprovisionnement sur l’année. Votre stock est toujours assuré, vos livraisons sont prioritaires et votre facture est disponible à chaque commande.'],
    ['Puis-je obtenir un conseil pour ma pratique ?', 'Oui, c’est le cœur de notre métier. L’équipe répond à vos questions de praticien à praticien, par email ou par téléphone.'],
  ];
  const liens = [
    { t: 'Qui sommes-nous', nav: 'about' },
    { t: 'Univers MTC', nav: 'shop' },
    { t: 'Univers MTV', nav: 'shop' },
  ];

  return (
    <main style={{ background: 'var(--surface-page)' }}>
      {/* 1 · HERO */}
      <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}>Espace pro</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 }}>
            L’Espace pro : la pharmacopée au service de votre pratique
          </h1>
          <p style={{ ...body, fontSize: m ? 16 : 18.5, color: 'var(--gray-600)', margin: '0 0 26px', maxWidth: 680 }}>
            Praticiens MTC, acupuncteurs, naturopathes, élèves en formation : plus de 200 professionnels s’approvisionnent déjà chez Sino-Pharma. Créez votre compte pro et bénéficiez de conditions dédiées.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'center' }}>
            <Button variant="primary" size="lg" fullWidth={m} rightIcon={<Icon name="arrow-right" size={18} />}>Créer mon compte pro</Button>
            <Button variant="secondary" size="lg" fullWidth={m}>J’ai déjà un compte</Button>
          </div>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--gray-500)', marginTop: 18 }}>plus de 200 professionnels · formules exclusives MTV · depuis 2015</p>
        </div>
      </section>

      {/* 2 · LES 6 AVANTAGES */}
      <section style={section()}>
        <div style={wrap}>
          <p style={eyebrow}>Votre compte pro</p>
          <h2 style={{ ...h2, marginBottom: m ? 28 : 44 }}>Six avantages concrets</h2>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 14 : 22 }}>
            {avantages.map((a) => (
              <div key={a.t} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: m ? '18px 18px' : '26px 24px' }}>
                <Icon name={a.i} size={24} color="var(--green-600)" />
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 16 : 17.5, color: 'var(--gray-900)', margin: '14px 0 8px' }}>{a.t}</h3>
                <p style={{ ...body, fontSize: m ? 14 : 14.5, margin: 0 }}>{a.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3 · COMMENT ÇA MARCHE */}
      <section style={section({ background: 'var(--sage-50)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)' })}>
        <div style={wrap}>
          <p style={eyebrow}>Comment ça marche</p>
          <h2 style={{ ...h2, marginBottom: m ? 28 : 44 }}>Votre compte pro en trois étapes</h2>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 20 : 32 }}>
            {etapes.map((s) => (
              <div key={s.n}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 34 : 44, letterSpacing: '-0.02em', color: 'var(--sage-400)', lineHeight: 1, marginBottom: 10 }}>{s.n}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 16.5 : 18, color: 'var(--gray-900)', margin: '0 0 8px' }}>{s.t}</h3>
                <p style={{ ...body, fontSize: m ? 14 : 14.5, margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 4 · À QUI ÇA S'ADRESSE */}
      <section style={section()}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 22 : 48, alignItems: 'start' }}>
          <div>
            <p style={eyebrow}>À qui s’adresse l’Espace pro</p>
            <h2 style={{ ...h2, fontSize: m ? 22 : 30, marginBottom: 16 }}>Pensé pour tous les professionnels des pratiques de santé naturelle</h2>
            <p style={{ ...body, margin: 0 }}>
              Vous y trouverez les grandes formules classiques de la pharmacopée chinoise, les formules exclusives MTV de Marc Mézard et un interlocuteur qui parle votre langage.
            </p>
          </div>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {cibles.map((c) => (
              <li key={c} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <Icon name="check" size={18} color="var(--green-600)" style={{ marginTop: 3, flexShrink: 0 }} />
                <span style={{ ...body, fontSize: m ? 14.5 : 15.5 }}>{c}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* 5 · 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 l’Espace pro</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>

      {/* 6 · CTA FINAL */}
      <section style={section({ paddingBottom: m ? 36 : 60 })}>
        <div style={wrap}>
          <div style={{ background: 'var(--ink-900)', color: 'var(--text-on-dark)', borderRadius: 'var(--radius-lg)', padding: m ? '32px 22px' : '52px 56px', textAlign: m ? 'left' : 'center' }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 23 : 32, lineHeight: 1.2, letterSpacing: '-0.02em', color: 'var(--text-on-dark)', margin: '0 0 22px', maxWidth: 640, marginInline: m ? 0 : 'auto' }}>Rejoignez les 200 professionnels qui nous font confiance</h2>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: m ? 'flex-start' : 'center', gap: 12 }}>
              <Button variant="primary" size="lg" fullWidth={m} rightIcon={<Icon name="arrow-right" size={18} />}>Créer mon compte pro</Button>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-on-dark-muted)', margin: 0 }}>Création en 2 minutes, validation sous 5 jours, sans engagement.</p>
            </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>
        </div>
      </section>
    </main>
  );
}
window.EspaceProScreen = EspaceProScreen;