// Direction A — Editorial / Finance dossier (FR, single-page)
// Sections (ordre): Header · Citation fondateur · 3 activités · Témoignages
// · Portefeuille (avec exits + skills support) · Philanthropie · Recherche · Athlète · Contact

// Lightweight viewport hook — drives the responsive breakpoints below.
const useIsMobile = (breakpoint = 768) => {
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== "undefined" ? window.innerWidth <= breakpoint : false
  );
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= breakpoint);
    onResize();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [breakpoint]);
  return isMobile;
};

const DirectionEditorial = () => {
  const isMobile = useIsMobile(768);

  // Responsive helpers — single source of truth for the mobile layout.
  const sectionPad = isMobile ? "56px 24px" : "96px 64px";
  const colGap = isMobile ? 40 : 64;
  const oneOrTwo = (cols) => (isMobile ? "1fr" : cols);

  const editorialStyles = {
    root: { width: "100%", maxWidth: "100%", overflowX: "hidden", background: "var(--bsh-paper)", color: "var(--bsh-teal-deep)", fontFamily: "'Cormorant Garamond', 'EB Garamond', Georgia, serif", lineHeight: 1.5, scrollBehavior: "smooth" },
    nav: { position: "sticky", top: 0, zIndex: 10, display: "flex", alignItems: "center", justifyContent: "space-between", padding: isMobile ? "14px 24px" : "20px 64px", borderBottom: "1px solid rgba(15,51,64,0.2)", fontFamily: "'Inter', sans-serif", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", background: "rgba(237,230,215,0.92)", backdropFilter: "blur(8px)" },
    masthead: { display: "flex", gap: 16, alignItems: "baseline" },
    monogram: { fontFamily: "'Cormorant Garamond', serif", fontSize: 32, lineHeight: 1, fontWeight: 600, fontStyle: "italic", letterSpacing: "-0.02em" },
    navLinks: { display: "flex", gap: 24, color: "var(--bsh-teal)" },
    navLink: { cursor: "pointer", textDecoration: "none", color: "inherit" },
    section: { padding: sectionPad, borderBottom: "1px solid rgba(15,51,64,0.2)" },
    sectionLabel: { fontFamily: "'Inter', sans-serif", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--bsh-rust)", marginBottom: 24 },
    sectionTitle: { fontSize: isMobile ? 34 : 56, fontWeight: 500, lineHeight: 1.05, letterSpacing: "-0.02em", margin: 0, marginBottom: isMobile ? 32 : 48 },
    logoFrame: { position: "relative", aspectRatio: "1 / 1.15", width: "100%", maxWidth: isMobile ? 320 : "none", margin: isMobile ? "0 auto" : 0, background: "var(--bsh-snow)", border: "1px solid rgba(15,51,64,0.25)", padding: 24, boxShadow: "0 30px 60px -30px rgba(15,51,64,0.4)" },
    logoCorner: { position: "absolute", width: 18, height: 18, borderColor: "var(--bsh-teal)" },
  };

  const ACTIVITIES = [
    { n: "I.",   t: "Investissement",  b: "J'investis dans des startups, principalement en pre-seed et seed, sur des thématiques variées — à travers Samba (Savoie Business Angels), Ovni Capital, ou en direct." },
    { n: "II.",  t: "Philanthropie",   b: "Je soutiens des associations de quartier, des associations sportives, des associations caritatives, ainsi que des personnalités à fort impact." },
    { n: "III.", t: "Side-projects",   b: "J'explore l'avenir de l'IA à travers des side-projects — pour rester en prise directe avec ce que la technologie permet aujourd'hui." },
  ];

  const PORTFOLIO = [
    { name: "Whoz",                sector: "Web",    blurb: "Plateforme d'intelligence des effectifs pour les sociétés de services." },
    { name: "i.DO",                sector: "AI",     blurb: "IA embarquée pour la décision industrielle." },
    { name: "Alveo 3D",            sector: "Med",    blurb: "Implants et prothèses médicales en impression 3D." },
    { name: "Wheere",              sector: "Web",    blurb: "Géolocalisation indoor sans infrastructure." },
    { name: "GirlsUp",             sector: "Impact", blurb: "Engagement des jeunes femmes dans la tech et le sport." },
    { name: "Kumo",                sector: "AI",     blurb: "Orchestration de données cloud-native." },
    { name: "Finovox",             sector: "AI",     blurb: "Détection de fraude documentaire pour la finance." },
    { name: "Glycobar",            sector: "Med",    blurb: "Nutrition à index glycémique maîtrisé." },
    { name: "YUMGO",               sector: "Med",    blurb: "Alternatives végétales aux œufs." },
    { name: "Ziwig",               sector: "Med",    blurb: "Diagnostic de l'endométriose, réinventé." },
    { name: "My Digital Buildings",sector: "Web",    blurb: "Jumeaux numériques pour les bâtiments intelligents." },
    { name: "BioMemory",           sector: "Med",    blurb: "Stockage longue durée sur ADN." },
    { name: "Chat3D",              sector: "AI",     blurb: "Interfaces conversationnelles pour les mondes 3D." },
    { name: "Footbar",             sector: "Sport",  blurb: "Ballon connecté pour le football amateur." },
    { name: "Innovalpes 2",        sector: "Impact", blurb: "Fonds d'innovation alpine pour la prochaine génération." },
    { name: "Lovebox",             sector: "Web",    blurb: "Messages d'amour connectés — le design comme rituel." },
    { name: "Goodsteps",           sector: "Sport",  blurb: "Marcher pour financer les causes qui comptent.", exit: true },
    { name: "baCta",               sector: "Med",    blurb: "Biologie de synthèse pour des matériaux durables.", exit: true },
  ];

  const SKILLS_SUPPORT = [
    { name: "Belle Île aux Jeux", blurb: "Accompagnement stratégique et opérationnel — sans participation au capital." },
  ];

  const PHILANTHROPY = [
    { theme: "Sport",  blurb: "Deux clubs de football amateur et un club de ski, soutenus dans la durée pour rendre l'accès au sport simple et joyeux." },
    { theme: "École",  blurb: "Une association de parents d'élèves engagée dans la vie quotidienne d'un établissement local." },
    { theme: "Santé",  blurb: "Une association de soutien aux malades du cancer, accompagnant patients et proches au-delà du parcours médical." },
    { theme: "Diversité", blurb: "Soutien à des initiatives qui élargissent l'accès à l'entrepreneuriat et à l'investissement — mentorat, bourses, et structures qui font émerger des profils trop peu représentés." },
  ];

  const TESTIMONIALS = [
    {
      q: "Bastien a investi dans ma startup en tant que business angel en 2024. Très rapidement j'ai apprécié sa posture d'opérateur expérimenté et sa vision stratégique. On peut compter sur son regard aiguisé, notamment sur les aspects tech et go-to-market, mais surtout sur sa bienveillance en tant qu'humain lorsque les choses ne se déroulent pas comme prévu ! Après notre sortie conjointe du capital nous sommes restés amis, et j'espère pouvoir lancer et construire de nouveaux projets à ses côtés en 2026 :) affaire à suivre !",
      a: "Alexandre Meyer",
      r: "Fondateur de Good Steps (désormais partie du Groupe SGS)",
      img: "assets/alexandre-meyer.png",
    },
    {
      q: "Bastien me challenge depuis 2009. Tech et entrepreneur, une combinaison rare qui lui permet de questionner à la fois la vision et l'exécution. Il voit souvent des opportunités avant les fondateurs eux-mêmes : il m'a poussé à lancer un projet que je n'avais pas encore osé, et il avait raison.",
      a: "Alexandre Aminot",
      r: "Fondateur de Peak Editions & Dual Cat",
      img: "assets/alexandre-aminot.jpeg",
    },
  ];

  return (
    <div style={editorialStyles.root}>
      {/* NAV */}
      <header style={{ ...editorialStyles.nav, justifyContent: "space-between" }}>
        <div style={editorialStyles.masthead}>
          <a href="#top" style={{ ...editorialStyles.navLink, ...editorialStyles.monogram }}>BSH</a>
          {!isMobile && <span style={{ color: "var(--bsh-stone)" }}>— Impact par l'investissement, la philantropie et les side-projects</span>}
        </div>
      </header>

      {/* HEADER / HERO */}
      <section id="top" style={{ padding: isMobile ? "48px 24px" : "80px 64px 80px", display: "grid", gridTemplateColumns: oneOrTwo("1fr 1fr"), gap: colGap, alignItems: "center", borderBottom: "1px solid rgba(15,51,64,0.2)" }}>
        <div>
          <h1 style={{ fontSize: isMobile ? 46 : 88, lineHeight: 0.98, fontWeight: 500, letterSpacing: "-0.02em", margin: 0 }}>
            Investir avec<br/>
            <span style={{ fontStyle: "italic", color: "var(--bsh-rust)" }}>passion,</span><br/>
            dans des <span style={{ fontStyle: "italic", color: "var(--bsh-rust)" }}>projets passionnants</span>.
          </h1>
          <p style={{ marginTop: isMobile ? 24 : 32, fontSize: isMobile ? 18 : 22, lineHeight: 1.45, color: "var(--bsh-teal)", maxWidth: 540 }}>
            BSH est la société d'investissement de Bastien Siebman qui déploie trois <strong style={{ color: "var(--bsh-teal-deep)" }}>leviers</strong> : <strong style={{ color: "var(--bsh-rust)" }}>investissement en startups</strong>,
            <strong style={{ color: "var(--bsh-rust)" }}> philanthropie</strong>, et <strong style={{ color: "var(--bsh-rust)" }}>side-projects</strong>.
          </p>
          <div style={{ display: "flex", gap: 24, marginTop: 40, fontFamily: "'Inter', sans-serif", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase" }}>
            <a href="https://form.asana.com/?k=HW3BJunLdbC7ALHwLtQAVA&d=1199168271926687" style={{ color: "var(--bsh-teal)", padding: "16px 0", textDecoration: "underline", textUnderlineOffset: 6 }}>Me contacter</a>
          </div>
        </div>
        <div style={editorialStyles.logoFrame}>
          <img src="assets/bsh-logo.png" alt="BSH" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
          <span style={{ ...editorialStyles.logoCorner, top: 8, left: 8, borderTop: "1px solid", borderLeft: "1px solid" }}/>
          <span style={{ ...editorialStyles.logoCorner, top: 8, right: 8, borderTop: "1px solid", borderRight: "1px solid" }}/>
          <span style={{ ...editorialStyles.logoCorner, bottom: 8, left: 8, borderBottom: "1px solid", borderLeft: "1px solid" }}/>
          <span style={{ ...editorialStyles.logoCorner, bottom: 8, right: 8, borderBottom: "1px solid", borderRight: "1px solid" }}/>
        </div>
      </section>

      {/* CITATION FONDATEUR — avec photo */}
      <section style={{ padding: sectionPad, borderBottom: "1px solid rgba(15,51,64,0.2)", background: "var(--bsh-snow)" }}>
        <div style={{ display: "grid", gridTemplateColumns: oneOrTwo("260px 1fr"), gap: colGap, alignItems: "start" }}>
          <div>
            <div style={{ width: 240, aspectRatio: "1 / 1.2", overflow: "hidden", border: "1px solid rgba(15,51,64,0.2)", boxShadow: "0 20px 40px -20px rgba(15,51,64,0.4)" }}>
              <img src="assets/founder.png" alt="Bastien SIEBMAN" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
            </div>
            <div style={{ marginTop: 16, fontFamily: "'Inter', sans-serif", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--bsh-stone)" }}>Bastien SIEBMAN<br/><span style={{ color: "var(--bsh-rust)" }}>Fondateur de BSH</span></div>
          </div>
          <div>
            <div style={{ fontSize: 96, fontStyle: "italic", color: "var(--bsh-sunset)", lineHeight: 0.5, height: 36 }}>“</div>
            <blockquote style={{ fontSize: isMobile ? 24 : 36, lineHeight: 1.3, fontStyle: "italic", margin: "0 0 32px", color: "var(--bsh-teal-deep)", fontWeight: 400, letterSpacing: "-0.01em", maxWidth: 880 }}>
              Entrepreneur passionné, je veux partager mon expérience et apporter un regard différent à des projets de startups, soutenir des associations à l'impact concret et rester en veille active à travers des side-projects.<br/>
                En tant que business angel, je veux également montrer l’exemple et démocratiser l’investissement.
            </blockquote>
          </div>
        </div>
      </section>

      {/* TÉMOIGNAGES */}
      <section id="temoignages" style={{ ...editorialStyles.section, background: "var(--bsh-snow)" }}>
        <h2 style={editorialStyles.sectionTitle}>
          La parole des <em style={{ color: "var(--bsh-sunset)" }}>fondateurs</em> accompagnés.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: oneOrTwo("repeat(2, 1fr)"), gap: 32 }}>
          {TESTIMONIALS.map((t, i) => (
            <figure key={i} style={{ margin: 0, background: "var(--bsh-paper)", border: "1px solid rgba(15,51,64,0.2)", padding: isMobile ? 24 : 32, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div style={{ fontSize: 80, fontStyle: "italic", color: "var(--bsh-sunset)", lineHeight: 0.5, height: 32 }}>“</div>
                <blockquote style={{ fontSize: 20, lineHeight: 1.45, fontStyle: "italic", margin: "0 0 24px", color: "var(--bsh-teal-deep)" }}>{t.q}</blockquote>
              </div>
              <figcaption style={{ paddingTop: 24, borderTop: "1px solid rgba(15,51,64,0.2)", display: "flex", gap: 16, alignItems: "center" }}>
                <img src={t.img} alt={t.a} style={{ width: 56, height: 56, borderRadius: "50%", objectFit: "cover", flexShrink: 0, border: "1px solid rgba(15,51,64,0.2)" }}/>
                <div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 22, fontWeight: 500 }}>{t.a}</div>
                  <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 12, color: "var(--bsh-stone)", marginTop: 4 }}>{t.r}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </section>

      {/* SPEAKING ENGAGEMENTS */}
      <section id="speaking" style={{ ...editorialStyles.section, background: "var(--bsh-teal-deep)", color: "var(--bsh-paper)" }}>
        <div style={{ display: "grid", gridTemplateColumns: oneOrTwo("1.1fr 1fr"), gap: isMobile ? 40 : 80, alignItems: "center" }}>
          <div>
            <h2 style={{ ...editorialStyles.sectionTitle, color: "var(--bsh-paper)" }}>
              Une autre passion : <em style={{ color: "var(--bsh-coral)" }}>partager</em>.
            </h2>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 18, lineHeight: 1.6, color: "rgba(244,239,230,0.85)", margin: "0 0 24px", maxWidth: 560 }}>
              Bastien SIEBMAN est à la recherche d'occasion de partager son experience et son point de vue lors de rencontres,
              conférences, tables rondes... Ses sujets de
              prédilection : <strong style={{ color: "var(--bsh-coral)" }}>la productivité</strong>, <strong style={{ color: "var(--bsh-coral)" }}>l'entrepreneuriat</strong>, et le <strong style={{ color: "var(--bsh-coral)" }}>work management</strong>.
            </p>
            <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase" }}>
              <a href="https://form.asana.com/?k=HW3BJunLdbC7ALHwLtQAVA&d=1199168271926687" style={{ background: "var(--bsh-coral)", color: "var(--bsh-teal-deep)", padding: "16px 28px", textDecoration: "none", display: "inline-block" }}>Proposer une intervention →</a>
            </div>
          </div>
        </div>
      </section>

      {/* PORTEFEUILLE — résumé narratif */}
      <section id="portefeuille" style={editorialStyles.section}>
        <h2 style={editorialStyles.sectionTitle}>
          Un portefeuille <em style={{ color: "var(--bsh-sunset)" }}>varié</em>, en pleine <em style={{ color: "var(--bsh-sunset)" }}>expansion</em>.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: oneOrTwo("1.4fr 1fr"), gap: isMobile ? 40 : 80, alignItems: "start" }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 20 : 24, lineHeight: 1.5, color: "var(--bsh-teal-deep)" }}>
            <p style={{ margin: "0 0 24px" }}>
              À ce jour, BSH compte <strong>une vingtaine de participations</strong> dans des entreprises du <strong style={{ color: "var(--bsh-rust)" }}>web</strong>, de l'<strong style={{ color: "var(--bsh-rust)" }}>IA</strong>, de la <strong style={{ color: "var(--bsh-rust)" }}>santé</strong>,
              du <strong style={{ color: "var(--bsh-rust)" }}>sport</strong> et de l'<strong style={{ color: "var(--bsh-rust)" }}>impact</strong>.
            </p>
            <p style={{ margin: "0 0 24px" }}>
              Au-delà du capital, j'accompagne aussi certaines entreprises en offrant mon temps et mon réseau.
            </p>
            <p style={{ margin: "0 0 32px", fontStyle: "italic", color: "var(--bsh-rust)" }}>
              Aujourd'hui, je cherche à investir <strong>en pre-seed et seed</strong>, auprès de fondateurs
              déterminés qui s'attaquent à des sujets passionants.
            </p>
            <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase" }}>
              <a href="https://form.asana.com/?k=HW3BJunLdbC7ALHwLtQAVA&d=1199168271926687" style={{ background: "var(--bsh-teal-deep)", color: "var(--bsh-paper)", padding: "16px 28px", textDecoration: "none", display: "inline-block" }}>Me pitcher votre projet →</a>
            </div>
          </div>
        </div>
      </section>


      {/* ATHLÈTE — Recovery sponsor */}
      <section id="athlete" style={{ position: "relative", borderBottom: "1px solid rgba(15,51,64,0.2)", background: "var(--bsh-teal-deep)", color: "var(--bsh-paper)" }}>
        <div style={{ display: "grid", gridTemplateColumns: oneOrTwo("1fr 1fr"), minHeight: isMobile ? 0 : 720 }}>
          <div style={{ position: "relative", overflow: "hidden", background: "var(--bsh-teal)", minHeight: isMobile ? 320 : "auto" }}>
            <img src="assets/athlete.png" alt="Athlète soutenue par BSH" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
          </div>
          <div style={{ padding: sectionPad, display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <h2 style={{ fontSize: isMobile ? 38 : 64, fontWeight: 500, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "0 0 24px", color: "var(--bsh-paper)" }}>
              Revenir au plus haut <em style={{ color: "var(--bsh-coral)" }}>niveau</em>.
            </h2>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 17, lineHeight: 1.6, color: "rgba(244,239,230,0.85)", margin: "0 0 32px", maxWidth: 520 }}>
              BSH finance la période de convalescence de <a href="https://www.hauserlifestyle.com" target="_blank" rel="noreferrer" style={{ color: "var(--bsh-coral)", textDecoration: "underline", textUnderlineOffset: 4 }}>Hauser</a>,
              actuellement blessée. L'objectif est de lui donner
              les conditions matérielles d'un retour à la compétition au plus
              haut niveau : soins, préparation, accompagnement mental,
              équipement, et écoute.
            </p>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 17, lineHeight: 1.6, color: "rgba(244,239,230,0.85)", margin: "0 0 40px", maxWidth: 520 }}>
              Son palmarès parle de lui-même : 2024 Aloha Classic Champion, 2023 Vice World Champion et détentrice du record du monde de la vague la plus grande jamais surfée en planche à voile par une femme.
            </p>
          </div>
        </div>
      </section>

      {/* PORTRAYT — side-project featured */}
      <section id="portrayt" style={{ ...editorialStyles.section, background: "var(--bsh-snow)", position: "relative", overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: oneOrTwo("1.1fr 1fr"), gap: isMobile ? 40 : 80, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 24 }}>
              <h2 style={{ fontSize: isMobile ? 52 : 88, fontWeight: 500, lineHeight: 0.95, letterSpacing: "-0.03em", margin: 0, color: "var(--bsh-teal-deep)" }}>Portrayt<span style={{ color: "var(--bsh-sunset)" }}>.ai</span></h2>
            </div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", fontSize: isMobile ? 22 : 30, lineHeight: 1.25, color: "var(--bsh-rust)", margin: "0 0 32px", maxWidth: 540 }}>
              Vos agents IA méritent aussi de représenter la diversité
            </div>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 16, lineHeight: 1.6, color: "var(--bsh-teal)", margin: "0 0 24px", maxWidth: 540 }}>
              Portrayt est la réponse à une problématique rencontrée chez <a href="https://ido-clarity.com">i.DO</a> : lorsque Bastien a voulu générer des photos de profil pour nos agents qui soient cohérentes mais aussi représentatives de la diversité, je me suis heurté aux difficultés de devoir jongler avec des prompts complexes et des APIs de génération d'images capricieuses.
            </p>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 16, lineHeight: 1.6, color: "var(--bsh-teal)", margin: "0 0 40px", maxWidth: 540 }}>
              C'est pour moi un terrain d'exploration concret du monde l'IA, à travers le vibe coding, les diverses APIs de génération d'IA, la gestion du GTM...
            </p>
            <div style={{ display: "flex", gap: 24, fontFamily: "'Inter', sans-serif", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 40 }}>
              <a href="https://www.portrayt.ai/" target="_blank" rel="noreferrer" style={{ background: "var(--bsh-teal-deep)", color: "var(--bsh-paper)", padding: "16px 28px", textDecoration: "none" }}>Visiter portrayt.ai →</a>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
            {[1,2,3,4].map(i => (
              <div key={i} style={{ aspectRatio: "1 / 1", overflow: "hidden", border: "1px solid rgba(15,51,64,0.2)", boxShadow: i % 2 ? "0 20px 40px -24px rgba(15,51,64,0.5)" : "0 10px 30px -20px rgba(15,51,64,0.4)", transform: isMobile ? "none" : i === 2 ? "translateY(24px)" : i === 3 ? "translateY(-24px)" : "none" }}>
                <img src={`assets/portrayt-${i}.jpg`} alt="Portrayt sample" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HÔPITAL D'ANNECY — projet éducatif animation */}
      <section id="annecy" style={{ padding: sectionPad, borderBottom: "1px solid rgba(15,51,64,0.2)", background: "var(--bsh-paper)" }}>
        <div style={{ display: "grid", gridTemplateColumns: oneOrTwo("1.1fr 1fr"), gap: isMobile ? 40 : 80, alignItems: "center", direction: isMobile ? "ltr" : "rtl" }}>
          <div style={{ direction: "ltr" }}>
            <h2 style={{ fontSize: isMobile ? 36 : 60, fontWeight: 500, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "0 0 24px", color: "var(--bsh-teal-deep)" }}>
              Expliquer le cancer aux <em style={{ color: "var(--bsh-sunset)" }}>enfants</em>
            </h2>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 17, lineHeight: 1.6, color: "var(--bsh-teal)", margin: "0 0 24px", maxWidth: 560 }}>
              BSH co-finance, en partenariat avec l'<strong>Hôpital d'Annecy</strong>,
              une courte vidéo d'animation à portée éducative destinée aux
              enfants dont l'un des parents est atteint d'un cancer.
            </p>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 17, lineHeight: 1.6, color: "var(--bsh-teal)", margin: "0 0 24px", maxWidth: 560 }}>
              L'objectif est d'aider les plus jeunes à mettre des mots et des
              images sur ce qu'ils voient à la maison : la fatigue, les
              traitements, les absences, la peur; pour qu'ils traversent
              l'épreuve avec un peu plus de clarté, et un peu moins de
              solitude.
            </p>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 17, lineHeight: 1.6, color: "var(--bsh-teal)", margin: "0 0 40px", maxWidth: 560 }}>
              Le projet est porté par une oncologue, une psychologue, et des
              <em> professionnels du monde de l'animation</em>. BSH a fédéré plusieurs investisseurs pour financer le projet.
            </p>
          </div>

          {/* Faux extrait de film d'animation — frame style cinéma — placée à gauche */}
          <figure style={{ margin: 0, direction: "ltr" }}>
            <div style={{ background: "var(--bsh-teal-deep)", padding: 16, boxShadow: "0 30px 60px -30px rgba(15,51,64,0.5)" }}>
              <div style={{ position: "relative", width: "100%", aspectRatio: "16 / 10", overflow: "hidden", border: "1px solid rgba(244,239,230,0.15)" }}>
                <img src="assets/film-animation.png" alt="Aperçu du film d'animation" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
              </div>
            </div>
            <figcaption style={{ marginTop: 16, fontFamily: "'Inter', sans-serif", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--bsh-stone)", textAlign: "center" }}>
              Image d'illustration
            </figcaption>
          </figure>
        </div>
      </section>

      {/* CONTACT / FOOTER */}
      <footer id="contact" style={{ background: "var(--bsh-paper)", color: "var(--bsh-teal-deep)", padding: isMobile ? "56px 24px 32px" : "96px 64px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: oneOrTwo("2fr 1fr 1fr"), gap: isMobile ? 32 : 64, marginBottom: isMobile ? 40 : 64 }}>
          <div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 40 : 64, fontStyle: "italic", lineHeight: 1.05, marginBottom: 24, color: "var(--bsh-teal-deep)" }}>
              Parlons de votre projet.
            </div>
          </div>
          <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, lineHeight: 2 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--bsh-rust)", marginBottom: 12 }}>Contact</div>
            <div><a href="https://form.asana.com/?k=HW3BJunLdbC7ALHwLtQAVA&d=1199168271926687" style={{ color: "inherit", textDecoration: "none" }}>Formulaire de contact</a></div>
            <div><a href="https://www.linkedin.com/in/siebmanb" style={{ color: "inherit", textDecoration: "none" }} target="_blank" rel="noreferrer">linkedin.com/in/siebmanb</a></div>
          </div>
        </div>
      </footer>
    </div>
  );
};

window.DirectionEditorial = DirectionEditorial;
