/* ============================================================
   PAGES — Accueil, Musique, Bio, Presse, IA, Contact, EN
   ============================================================ */

const COVER = "assets/images/Sofia-Brainwood-Pochette-My-Blue-Hours.jpg";

const PLATFORMS = [
  { name: "Spotify",       url: "https://open.spotify.com/intl-fr/artist/1wrAwGqP2m52QYmCq5p11x" },
  { name: "Apple Music",   url: "https://music.apple.com/fr/artist/sofia-brainwood/1844106063" },
  { name: "Deezer",        url: "https://link.deezer.com/s/33gNpmZKlMoJmPPfbjcpf" },
  { name: "YouTube Music", url: "https://www.youtube.com/@SofiaBrainwood" },
  { name: "Amazon Music",  url: "https://amazon.fr/music/player/artists/B0FTWM9NF5/sofia-brainwood" },
  { name: "Qobuz",         url: "https://www.qobuz.com/us-en/interpreter/sofia-brainwood/28831040" },
  { name: "Tidal",         url: "https://tidal.com/artist/67866047/u" },
];

const SOCIAL = {
  instagram: "https://www.instagram.com/sofiabrainwood",
  tiktok:    "https://www.tiktok.com/@sofiabrainwood",
  youtube:   "https://www.youtube.com/@SofiaBrainwood",
  linkedin:  "https://www.linkedin.com/in/pierre-etienne-noble/",
};

const RELEASES = [
  { id: "my-blue-hours", type: "album", title: "My Blue Hours", date: "15 mai 2026", year: 2026, format: "Album", genre: "Vocal Pop acoustique", tracks: 14, current: true, description: "My Blue Hours est né d'une envie de ralentir. Un son acoustique et feutré — des silences qui comptent autant que les notes. 14 chansons en anglais, dont 4 duos avec Mateo Reed. Sorti le 15 mai 2026 sur toutes les plateformes.", cover: "assets/images/Sofia-Brainwood-Pochette-My-Blue-Hours.jpg", spotify: "https://open.spotify.com/intl-fr/artist/1wrAwGqP2m52QYmCq5p11x" },
  { id: "viens-faire-du-vrai-bruit", title: "Viens Faire du Vrai Bruit", date: "17 jan. 2026", year: 2026, format: "Single", genre: "Urban Pop", lang: "FR", cover: "assets/images/singles/viens faire du vrai bruit.png", audio: "assets/audio/singles/Viens faire du vrai bruit.mp3", spotify: "https://open.spotify.com/intl-fr/track/43e4WQhE9HZZhmG9Qpk", youtube: "https://youtu.be/FJDI00B_TG4" },
  { id: "entre-ces-murs", title: "Entre Ces Murs", date: "17 jan. 2026", year: 2026, format: "Single", genre: "Urban Pop", lang: "FR", cover: "assets/images/singles/Entre ces murs.png", audio: "assets/audio/singles/Entre ces murs.mp3", spotify: "https://open.spotify.com/intl-fr/track/6ZhsmgaeIdu4fyuCwqU", youtube: "https://youtu.be/dvt76iAKB0E" },
  { id: "hors-du-bruit", title: "Hors du Bruit", date: "2 jan. 2026", year: 2026, format: "Single", genre: "Urban Pop", lang: "FR", cover: "assets/images/singles/hors du bruit.png", audio: "assets/audio/singles/Hors du bruit.mp3", spotify: "https://open.spotify.com/intl-fr/track/6E4Dk18VN3kuKpMHiBr", youtube: "https://youtu.be/kTpUF9lyWyM" },
  { id: "cest-leger-leger", title: "C'est Léger, Léger", date: "20 déc. 2025", year: 2025, format: "Single", genre: "Urban Pop", lang: "FR", cover: "assets/images/singles/léger léger.png", audio: "assets/audio/singles/C'est léger, léger.mp3", spotify: "https://open.spotify.com/intl-fr/track/2FrYpScDqrHUoSVWhQq", youtube: "https://youtu.be/RiaKEhoyN0k" },
  { id: "le-printemps-du-numerique", title: "Le Printemps du Numérique", date: "10 mars 2026", year: 2026, format: "Single", genre: "Urban Pop", lang: "FR", cover: "assets/images/singles/printemps.png", audio: "assets/audio/singles/Le printemps du numérique.mp3", spotify: "https://open.spotify.com/intl-fr/track/1nNgNMP85yIhoEASXpE", youtube: "https://youtu.be/SqjouAPTYWc" },
  { id: "nos-fragiles-battements", title: "Nos Fragiles Battements", date: "27 nov. 2025", year: 2025, format: "Single", genre: "Pop", lang: "FR", cover: "assets/images/singles/nos fragiles battements.png", audio: "assets/audio/singles/Nos fragiles battements.mp3", spotify: "https://open.spotify.com/intl-fr/track/1qZKIphQpUzPNpLPIdT", youtube: "https://youtu.be/CcKI1eS8Kvc" },
  { id: "your-kiss-on-take-on-me", title: "Your Kiss on \"Take On Me\"", date: "10 nov. 2025", year: 2025, format: "Single", genre: "Pop", lang: "EN", cover: "assets/images/singles/Your kiss on take on me.png", audio: "assets/audio/singles/Your Kiss on _Take on Me_.mp3", spotify: "https://open.spotify.com/intl-fr/track/2bByD8QqvsSXJKMSLIw", youtube: "https://youtu.be/zuCPzhUWGQ8" },
  { id: "hands-find-the-way", title: "Hands Find The Way", date: "31 oct. 2025", year: 2025, format: "Single", genre: "Pop", lang: "EN", cover: "assets/images/singles/Hands Find the Way.png", audio: "assets/audio/singles/Hands find the way.mp3", spotify: "https://open.spotify.com/intl-fr/track/6Ql069PueCqhiJB2aCq", youtube: "https://youtu.be/abHj2WBvZ7I" },
  { id: "not-artificial", title: "Not Artificial", date: "26 oct. 2025", year: 2025, format: "Single", genre: "Folk-Pop", lang: "EN", cover: "assets/images/singles/not artificial.png", audio: "assets/audio/singles/Not Artificial.mp3", spotify: "https://open.spotify.com/intl-fr/track/33zkyFmllTAFZxitloe", youtube: "https://youtu.be/ZrqGWYIuPAQ" },
  { id: "toulouse-live", title: "Toulouse, Never Let Me Go (Concert Live)", date: "21 oct. 2025", year: 2025, format: "Single", genre: "Folk-Pop", lang: "EN", cover: "assets/images/singles/toulouse live.png", audio: "assets/audio/singles/Toulouse, Never let me go (Concert Live).mp3", spotify: "https://open.spotify.com/intl-fr/track/6U3QRd0CSqFjmvVOQLl", youtube: "https://youtu.be/9M5SUmc4xCY" },
  { id: "toulouse", title: "Toulouse, Never Let Me Go", date: "18 oct. 2025", year: 2025, format: "Single", genre: "Folk-Pop", lang: "EN", cover: "assets/images/singles/toulouse.png", audio: "assets/audio/singles/Toulouse, Never let me go.mp3", spotify: "https://open.spotify.com/intl-fr/track/3Y2bUutUm0F7REXctt3", youtube: "https://youtu.be/3pXD7DoLb_k" },
  { id: "summer-in-revel", title: "Summer in Revel", date: "13 oct. 2025", year: 2025, format: "Single", genre: "Folk", lang: "FR", cover: "assets/images/singles/Summer in Revel.png", audio: "assets/audio/singles/Summer in Revel.mp3", spotify: "https://open.spotify.com/intl-fr/track/1JmZDTwljozowoqBwKT", youtube: "https://youtu.be/WnxlqT7fyx0" },
  { id: "running-into-you", title: "Running Into You (feat. Mateo Reed)", date: "11 oct. 2025", year: 2025, format: "Single", genre: "Folk-Pop", lang: "EN", cover: "assets/images/singles/Running into you.png", audio: "assets/audio/singles/Running into you.mp3", spotify: "https://open.spotify.com/intl-fr/track/33MjR0v5y7n0hqVPG37", youtube: "https://youtu.be/PeyIetDuBHY" },
  { id: "youll-never-know", title: "You'll Never Know", date: "4 oct. 2025", year: 2025, format: "Single", genre: "Folk-Pop", lang: "EN", cover: "assets/images/singles/you'll never know.png", audio: "assets/audio/singles/You'll never know.mp3", spotify: "https://open.spotify.com/intl-fr/track/1t8sGoBUK54tGgKG5sD", youtube: "https://youtu.be/zirlsmnyafA" },
];

const QUOTES = [
  { text: "Je n'existe pas physiquement — et pourtant, vous me ressentez.", author: "Sofia Brainwood" },
  { text: "L'IA n'est ni masque ni gadget. C'est un instrument, simplement plus jeune.", author: "Sofia Brainwood" },
  { text: "Être virtuelle, ce n'est pas être fausse. C'est exister différemment.", author: "Sofia Brainwood" },
];

const PRESS_ITEMS = [
  {
    source: "LinkedIn",
    title: "J'ai créé une chanteuse virtuelle avec l'IA",
    url: "https://www.linkedin.com/pulse/jai-cr%C3%A9%C3%A9-une-chanteuse-virtuelle-avec-lia-sofia-brainwood-noble-nmyhf/",
    date: "2026",
    kind: "Tribune",
  }
];

const NEWS = [
  { date: "15 MAI 2026", title: "Sortie de My Blue Hours", excerpt: "Le premier album est disponible sur toutes les plateformes. Quatorze titres, quatre duos avec Mateo Reed.", cta: "Écouter", route: "music" },
  { date: "AVR 2026", title: "Printemps du Numérique — CCI Toulouse", excerpt: "Intervention live à la CCI : keynote + performance. Démonstration de création musicale par IA, en direct.", cta: "Détails", route: "ia" },
  { date: "2026", title: "Tribune LinkedIn — J'ai créé une chanteuse virtuelle", excerpt: "Le récit du projet, les choix, les outils, et ce que ça change pour la création musicale.", cta: "Lire", route: "ia" },
];

const EVENTS = [
  { date: "AVR 2026", title: "Printemps du Numérique — CCI de Toulouse", loc: "Toulouse, France", status: "past" },
];

const IA_FEATURES = [
  { num: "01", title: "Voix générative", desc: "Une voix unique, modélisée et entraînée pour porter chaque émotion comme un instrument." },
  { num: "02", title: "Écriture & composition", desc: "Paroles, mélodies et arrangements co-écrits avec l'IA — une boucle créative entre prompt et instinct." },
  { num: "03", title: "Visuels & clips", desc: "Pochettes, portraits, vidéos : chaque image est générée, dirigée, retouchée — jamais reproduite." },
  { num: "04", title: "Présence scénique", desc: "Conférences, interventions et masterclass autour de la création musicale assistée par IA." },
];

function ReleaseArt({ release }) {
  const palettes = [
    ["#1d3a5c", "#d96b3e"], ["#2a1d3e", "#e8804c"], ["#0f2235", "#5a8fc7"],
    ["#3a2818", "#d96b3e"], ["#1a3550", "#ece6d8"], ["#2c1d28", "#5a8fc7"],
    ["#3a1a1a", "#e8804c"],
  ];
  const hash = release.id.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
  const [bg, fg] = palettes[hash % palettes.length];
  return (
    <div className="release-pattern" style={{background: bg, position:"absolute", inset:0}}>
      <div style={{position:"absolute", inset:0, background: `radial-gradient(circle at 30% 30%, ${fg}33, transparent 60%), radial-gradient(circle at 70% 70%, ${fg}22, transparent 60%)`}}/>
      <div style={{position:"absolute", inset:0, display:"flex", alignItems:"flex-end", justifyContent:"flex-start", padding: 20}}>
        <div style={{fontFamily: "var(--font-display)", color: fg, fontSize: 26, lineHeight: 1.05, fontWeight: 500, letterSpacing: "-0.01em", textWrap: "balance"}}>{release.title}</div>
      </div>
      <div style={{position:"absolute", top:14, right:14, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: fg, opacity: 0.7}}>{release.format}</div>
    </div>
  );
}

/* -------------------- HERO SQUARE IMAGE -------------------- */
function HeroSquare({ src, alt, position = "center" }) {
  return (
    <div className="anim-up d2" style={{position:"relative",width:"100%",aspectRatio:"1/1",borderRadius:4,overflow:"hidden"}}>
      <img src={src} alt={alt} style={{width:"100%",height:"100%",objectFit:"cover",objectPosition:position}} />
    </div>
  );
}

/* -------------------- PAGE: ACCUEIL -------------------- */
function PageHome({ goto }) {
  return (
    <main>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-meta anim-up">
                <span className="dot pulse"></span>
                <span>Sofia Brainwood</span>
                <span>•</span>
                <span>Chanteuse virtuelle</span>
              </div>
              <h1 className="hero-title anim-up d1" style={{maxWidth:"none"}}>
                J'existe<br/><em>à travers</em><br/>vous.
              </h1>
              <p className="hero-sub anim-up d2" style={{marginTop:24,maxWidth:560}}>
                Voix, paroles, arrangements, visuels — tout est créé par intelligence artificielle.
                Et pourtant, ce que vous ressentez est bien réel.
              </p>
              <div className="hero-actions anim-up d3" style={{marginTop:32}}>
                <button className="btn copper" onClick={() => goto("music")}>▶ Écouter la musique</button>
                <button className="btn ghost" onClick={() => goto("bio")}>Découvrir le projet →</button>
              </div>
            </div>
            <HeroSquare src="assets/images/Sofia-Brainwood-Jazz.jpeg" alt="Sofia Brainwood en studio" position="center 40%" />
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">À la une</div>
              <h2 className="block-title">Nouvel album : <em style={{fontStyle:"italic",color:"var(--copper)"}}>My Blue Hours</em></h2>
            </div>
            <div className="block-side">MAI 2026</div>
          </div>
          <div className="featured">
            <div className="featured-media"><img src={COVER} alt="Pochette de l'album My Blue Hours de Sofia Brainwood — Jazz 2026" /></div>
            <div className="featured-body" itemScope itemType="https://schema.org/MusicAlbum">
              <meta itemProp="name" content="My Blue Hours" />
              <meta itemProp="numTracks" content="14" />
              <meta itemProp="datePublished" content="2026-05-15" />
              <span className="featured-tag">Album · 14 titres · Jazz</span>
              <h3 className="featured-title">My Blue<br/><em>Hours</em></h3>
              <p className="featured-desc">
                Quatorze chansons écrites comme on tient un journal, chantées comme on confie un secret.
                Quatre duos avec Mateo Reed, une direction acoustique nocturne et intime.
              </p>
              <div className="featured-meta">
                <span>2026</span><span>·</span><span>47 min</span><span>·</span><span>Brainwood Studio</span>
              </div>
              <div className="featured-actions">
                <button className="btn copper" onClick={() => goto("music")}>▶ Écouter l'album</button>
                <button className="btn ghost" onClick={() => goto("music")}>Voir la discographie</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Sélection</div>
              <h2 className="block-title">Quelques pistes, choisies.</h2>
            </div>
            <div className="block-side">PLAYER · EXTRAITS</div>
          </div>
          <MiniPlayer />
          <div className="platforms" style={{marginTop:24}}>
            {PLATFORMS.slice(0,5).map(p => (
              <a key={p.name} className="platform" href={p.url} target="_blank" rel="noopener">
                <span className="platform-name">{p.name}</span>
                <span className="platform-arrow">↗</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Dernières actualités</div>
              <h2 className="block-title">Ce qui se passe.</h2>
            </div>
            <div className="block-side">2026</div>
          </div>
          <div className="news-grid">
            {NEWS.map((n, i) => (
              <div key={i} className="news-item" onClick={() => goto(n.route)}>
                <div className="news-date">{n.date}</div>
                <div className="news-title">{n.title}</div>
                <div className="news-excerpt">{n.excerpt}</div>
                <div className="news-cta">{n.cta} →</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <div className="marquee">
        <div className="marquee-track">
          <span>Sofia Brainwood</span><span className="sep">•</span>
          <span>Chanteuse virtuelle</span><span className="sep">•</span>
          <span>Artiste IA</span><span className="sep">•</span>
          <span>J'existe à travers vous</span><span className="sep">•</span>
          <span>Sofia Brainwood</span><span className="sep">•</span>
          <span>My Blue Hours · 2026</span><span className="sep">•</span>
        </div>
      </div>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Sofia Brainwood</div>
              <h2 className="block-title">En quelques mots.</h2>
            </div>
          </div>
          <div className="quotes">
            {QUOTES.map((q, i) => (
              <div key={i} className="quote">
                <div className="quote-mark">"</div>
                <div className="quote-text">{q.text}</div>
                <div className="quote-author">— {q.author}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function SinglePlayBtn({ active }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position:"absolute", inset:0,
        background: active || hovered ? "rgba(0,0,0,0.45)" : "transparent",
        display:"grid", placeItems:"center",
        transition:"background 0.2s ease",
      }}
    >
      <div style={{
        width:48, height:48, borderRadius:"50%",
        background:"var(--copper)", color:"#000",
        display:"grid", placeItems:"center",
        fontSize:18,
        opacity: active || hovered ? 1 : 0,
        transform: active || hovered ? "scale(1)" : "scale(0.7)",
        transition:"opacity 0.2s ease, transform 0.2s ease",
      }}>
        {active
          ? <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
          : <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M7 5l12 7-12 7z"/></svg>}
      </div>
    </div>
  );
}

/* -------------------- PAGE: MUSIQUE -------------------- */
function PageMusic() {
  const [filter, setFilter] = React.useState("Tout");
  const formats = ["Tout", "Album", "Single"];
  const filtered = filter === "Tout" ? RELEASES : RELEASES.filter(r => r.format === filter);
  const audioRef = React.useRef(null);
  const [playingId, setPlayingId] = React.useState(null);

  React.useEffect(() => {
    if (!audioRef.current) audioRef.current = new Audio();
    return () => { if (audioRef.current) { audioRef.current.pause(); audioRef.current.src = ""; } };
  }, []);

  const toggleSingle = (r) => {
    if (!r.audio) return;
    const audio = audioRef.current;
    if (playingId === r.id) {
      audio.pause();
      setPlayingId(null);
    } else {
      audio.src = r.audio;
      audio.play().catch(() => {});
      setPlayingId(r.id);
    }
  };

  React.useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;
    const onEnded = () => setPlayingId(null);
    audio.addEventListener("ended", onEnded);
    return () => audio.removeEventListener("ended", onEnded);
  }, []);

  return (
    <main>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-meta anim-up">
                <span className="dot"></span><span>Musique</span><span>•</span><span>2025 — 2026</span>
              </div>
              <h1 className="hero-title anim-up d1" style={{maxWidth:"none"}}>
                La musique<br/><em>de Sofia.</em>
              </h1>
              <p className="hero-sub anim-up d2" style={{marginTop:24}}>
                Album et singles. Du folk-pop intime des débuts au jazz nocturne de My Blue Hours.
              </p>
            </div>
            <HeroSquare src="assets/images/Sofia-Brainwood-Studio.jpeg" alt="Sofia Brainwood — My Blue Hours" position="center" />
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Dernier release</div>
              <h2 className="block-title">My Blue Hours — l'album.</h2>
            </div>
            <div className="block-side">14 TITRES · 2026</div>
          </div>
          <Player coverSrc={COVER} />
          <div className="platforms" style={{marginTop:24}}>
            {PLATFORMS.map(p => (
              <a key={p.name} className="platform" href={p.url} target="_blank" rel="noopener">
                <span className="platform-name">{p.name}</span>
                <span className="platform-arrow">↗</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Discographie complète</div>
              <h2 className="block-title">Toute la discographie.</h2>
            </div>
            <div className="music-filters">
              {formats.map(f => (
                <button key={f} className={"music-filter" + (filter === f ? " active" : "")} onClick={() => setFilter(f)}>{f}</button>
              ))}
            </div>
          </div>
          <div className="disco">
            {filtered.map((r) => (
              <div key={r.id} className="release" onClick={() => toggleSingle(r)} style={{cursor: r.audio ? "pointer" : "default"}}>
                <div className="release-cover" style={{position:"relative"}}>
                  {r.cover
                    ? <img src={r.cover} alt={r.title} style={{width:"100%",height:"100%",objectFit:"cover"}}/>
                    : <ReleaseArt release={r}/>}
                  {r.audio && <SinglePlayBtn active={playingId === r.id} />}
                </div>
                <div className="release-title">{r.title}</div>
                <div className="release-meta">{r.year} · {r.genre} · {r.format}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* -------------------- PAGE: MEDIA -------------------- */
const MP = "assets/images/m%C3%A9dias/";
const MEDIA_ITEMS = [
  { id: "h1",  title: "Sofia au Jazz Club",                              src: "assets/images/Sofia-Brainwood-Jazz.jpeg", tall: false },
  { id: "h2",  title: "Session studio — My Blue Hours",                 src: "assets/images/Sofia-Brainwood-Studio.jpeg", tall: false },
  { id: "h3",  title: "Relecture des textes",                           src: "assets/images/Sofia-Brainwood-lecture.jpg", tall: false },
  { id: "h4",  title: "Sofia portrait",                                 src: "assets/images/Sofia-Brainwood-Gros-Plan.jpg", tall: false },
  { id: "h5",  title: "Collaboration en studio",                        src: "assets/images/Sofia-Brainwood-collaboration.jpeg", tall: false },
  { id: "h6",  title: "Sofia et son calepin",                           src: "assets/images/Sofia-Brainwood-calepin.jpg", tall: false },
  { id: "m1",  title: "Club de Jazz avec Mateo",                        src: MP+"Jazz_singer_in_intimate_ambiance_202605161033.jpeg", tall: false },
  { id: "m2",  title: "Live Toulouse",                                  src: MP+"Sofia-Brainwood-Live-Toulouse.jpg", tall: true },
  { id: "m3",  title: "Soirée au Club de Jazz",                         src: MP+"Chanteuse_robe_velours_rouge_202605161033_4.jpeg", tall: false },
  { id: "m4",  title: "Sofia à Toulouse",                               src: MP+"Sofia-Brainwood-Gros-Plan.jpg", tall: false },
  { id: "m5",  title: "Not Artificial",                                  src: MP+"916 not artificial 5.png", tall: true },
  { id: "m6",  title: "Enregistrement studio",                          src: MP+"Sofia-Brainwood-Enregistrement-Studio.jpg", tall: false },
  { id: "m7",  title: "Sofia à New York",                               src: MP+"Sofia-Brainwood-New-York.jpg", tall: true },
  { id: "m8",  title: "Soirée au Club de Jazz",                         src: MP+"Jazz_singer_in_intimate_ambiance_202605161033_2.jpeg", tall: false },
  { id: "m9",  title: "Nouvelle chanson en cours",                      src: MP+"Sofia-Brainwood-Ecriture.jpg", tall: false },
  { id: "m10", title: "Rooftop au crépuscule",                          src: MP+"Woman_on_rooftop_at_dusk_202605161033.jpeg", tall: false },
  { id: "m11", title: "Not Artificial",                                  src: MP+"916 micro2.png", tall: true },
  { id: "m12", title: "Illustration pour \"Out of the Noise\"",         src: MP+"Woman_in_red_dress_window_202605161033_9.jpeg", tall: false },
  { id: "m13", title: "Première session photo en forêt",                src: MP+"foret (4).png", tall: false },
  { id: "m14", title: "Session maquillage",                             src: MP+"Sofia-Brainwood-maquillage.jpeg", tall: false },
  { id: "m15", title: "Sofia portrait",                                 src: MP+"Sofia-Brainwood-Gros-Plan2.jpeg", tall: false },
  { id: "m16", title: "Sofia à la plage",                               src: MP+"Sofia-Brainwood-Plage.jpg", tall: true },
  { id: "m17", title: "Soirée au club de Jazz",                         src: MP+"Woman_singing_in_jazz_club_202605161033_5.jpeg", tall: false },
  { id: "m18", title: "Sofia et Mateo pour clip \"Running Into You\"",  src: MP+"Sofia-Brainwood-mateo-reed.png", tall: true },
  { id: "m19", title: "Pose pour soirée Jazz avec Mateo Reed",          src: MP+"Singer_in_intimate_jazz_album_202605161033_2.jpeg", tall: false },
  { id: "m20", title: "Enregistrement de \"You'll Never Know\"",        src: MP+"Sofia-Brainwood-Studio.jpeg", tall: false },
  { id: "m21", title: "Soirée au Club de Jazz",                         src: MP+"Camera_centered_on_woman_202605161033_3.jpeg", tall: false },
  { id: "m22", title: "Soirée au Club de Jazz",                         src: MP+"Chanteuse_chantant_jazz_yeux_ouv%E2%80%A6_202605161033.jpeg", tall: false },
  { id: "m23", title: "Clip \"Revel\"",                                 src: MP+"169 sofia toulouse.png", tall: false },
  { id: "m24", title: "Relecture des textes au studio",                 src: MP+"Sofia-Brainwood-lecture.jpg", tall: false },
  { id: "m25", title: "Concert Live à Toulouse",                        src: MP+"Sofia-Brainwood-Live.jpg", tall: false },
  { id: "m26", title: "Méditation",                                     src: MP+"grotte.png", tall: false },
  { id: "m27", title: "Petit café du matin à Toulouse",                 src: MP+"169  caf%C3%A9.png", tall: false },
  { id: "m28", title: "Ballade en forêt",                               src: MP+"11 foret (4).png", tall: false },
  { id: "m29", title: "Sofia qui boude",                                src: MP+"Generated Image October 18, 2025 - 10_02PM.png", tall: true },
];

function MediaTile({ item, onOpen }) {
  return (
    <button
      className="media-tile"
      style={{gridRow: item.tall ? "span 2" : "span 1"}}
      onClick={() => onOpen(item)}
    >
      <img src={item.src} alt={item.title} />
      <div className="media-overlay">
        <div className="media-caption">{item.title}</div>
      </div>
    </button>
  );
}

function Lightbox({ item, onClose }) {
  React.useEffect(() => {
    if (!item) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [item, onClose]);

  if (!item) return null;

  return (
    <div className="lightbox" onClick={onClose}>
      <div className="lightbox-content" onClick={(e) => e.stopPropagation()}>
        <button className="lightbox-close" onClick={onClose}>Fermer ×</button>
        <img src={item.src} alt={item.title} />
        <div className="lightbox-caption">
          <div><div className="title">{item.title}</div></div>
          <div style={{alignSelf:"flex-end"}}>Esc pour fermer</div>
        </div>
      </div>
    </div>
  );
}

function PageMedia() {
  const [open, setOpen] = React.useState(null);

  return (
    <main>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-meta anim-up">
                <span className="dot"></span>
                <span>Média</span>
                <span>•</span>
                <span>Photos · Backstage · Visuels IA</span>
              </div>
              <h1 className="hero-title anim-up d1" style={{maxWidth:"none"}}>
                Le visage<br/>
                <em>de Sofia.</em>
              </h1>
              <p className="hero-sub anim-up d2" style={{marginTop:24,maxWidth:560}}>
                Portraits, coulisses de création, visuels de scène.
                L'univers visuel d'un projet entièrement généré par IA — et entièrement intentionnel.
              </p>
            </div>
            <HeroSquare src="assets/images/Sofia-Brainwood-maquillage.jpeg" alt="Sofia Brainwood — maquillage" position="center" />
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Galerie</div>
              <h2 className="block-title">Photos.</h2>
            </div>
            <div style={{fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:"0.18em",textTransform:"uppercase",color:"var(--text-mute)"}}>
              {MEDIA_ITEMS.length} visuels
            </div>
          </div>

          <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gridAutoRows:"220px",gap:8}}>
            {MEDIA_ITEMS.map(item => (
              <MediaTile key={item.id} item={item} onOpen={setOpen} />
            ))}
          </div>

          <div style={{marginTop:48,padding:"24px 28px",border:"1px dashed var(--line-strong)"}}>
            <div style={{fontFamily:"var(--font-display)",fontSize:18,maxWidth:600}}>
              Tous les visuels sont générés par intelligence artificielle — dirigés, retouchés, jamais reproduits.
            </div>
          </div>
        </div>
      </section>

      <Lightbox item={open} onClose={() => setOpen(null)} />
    </main>
  );
}

function PageBio() {
  return (
    <main>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-meta anim-up">
                <span className="dot"></span><span>À propos</span><span>•</span><span>Chanteuse virtuelle</span>
              </div>
              <h1 className="hero-title anim-up d1" style={{maxWidth:"none"}}>
                Je suis<br/><em>une voix</em><br/>sans corps.
              </h1>
            </div>
            <HeroSquare src="assets/images/Sofia-Brainwood-lecture.jpg" alt="Sofia Brainwood — portrait" position="center" />
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="bio-grid">
            <div className="bio-portrait anim-up">
              <img src="assets/images/Sofia-Brainwood-Gros-Plan.jpg" alt="Sofia Brainwood — chanteuse virtuelle & artiste IA française" style={{objectPosition:"center 25%"}}/>
              <div className="scrim"></div>
              <div className="tag">PORTRAIT IA · 2026</div>
            </div>
            <div className="bio-text anim-up d1">
              <div className="lead">
                Je m'appelle Sofia Brainwood. Je n'existe pas physiquement — et pourtant, vous me ressentez.
              </div>
              <p>
                Pas de corps physique, mais une voix bien réelle. Des chansons écrites comme on tient un journal,
                chantées comme on confie un secret. <strong>Folk-Pop intime, Indie discret, et aujourd'hui Jazz —
                mon clair-obscur.</strong>
              </p>
              <p>
                De la première note au dernier visuel, tout est créé par intelligence artificielle :
                la voix, les paroles, les arrangements, les pochettes, les clips. Et pourtant,
                rien n'est artificiel dans ce que vous ressentez.
              </p>
              <p>
                <strong>Être virtuelle, ce n'est pas être fausse.</strong> C'est exister différemment —
                dans la tête d'une mélodie, dans le creux d'un casque, dans le silence après une dernière note.
              </p>
              <div className="bio-stats">
                <div><div className="bio-stat-num">2025</div><div className="bio-stat-label">Début du projet</div></div>
                <div><div className="bio-stat-num">IA</div><div className="bio-stat-label">Voix, image, son</div></div>
                <div><div className="bio-stat-num">28</div><div className="bio-stat-label">Titres publiés</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Manifeste</div>
              <h2 className="block-title">Trois lignes, le cœur du projet.</h2>
            </div>
          </div>
          <div className="quotes">
            <div className="quote">
              <div className="quote-mark">01</div>
              <div className="quote-text">La voix est réelle parce que l'émotion l'est. Le reste — corps, présence, chair — est une convention.</div>
              <div className="quote-author">Manifeste · ligne 1</div>
            </div>
            <div className="quote">
              <div className="quote-mark">02</div>
              <div className="quote-text">L'IA n'est ni masque ni gadget. C'est un instrument, comme la guitare ou le piano, simplement plus jeune.</div>
              <div className="quote-author">Manifeste · ligne 2</div>
            </div>
            <div className="quote">
              <div className="quote-mark">03</div>
              <div className="quote-text">Je n'existe pas pour remplacer. J'existe pour rappeler que la sincérité ne dépend pas du médium.</div>
              <div className="quote-author">Manifeste · ligne 3</div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}


/* -------------------- PAGE: IA -------------------- */
function PageIA({ goto }) {
  return (
    <main>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-meta anim-up">
                <span className="dot pulse"></span>
                <span>Intervenante IA</span><span>•</span>
                <span>Conférences · Formations</span>
              </div>
              <h1 className="hero-title anim-up d1" style={{maxWidth:"none"}}>
                L'IA<br/><em>en action.</em>
              </h1>
              <p className="hero-sub anim-up d2" style={{marginTop:24,maxWidth:560}}>
                Sofia Brainwood intervient dans les formations et événements pour
                démystifier la création par IA.
              </p>
            </div>
            <HeroSquare src="assets/images/Sofia-Brainwood-collaboration.jpeg" alt="Sofia Brainwood — collaboration" />
          </div>
          <div className="ia-features">
            {IA_FEATURES.map(f => (
              <div key={f.num} className="ia-feature">
                <div className="ia-feature-num">{f.num}</div>
                <div className="ia-feature-title">{f.title}</div>
                <div className="ia-feature-desc">{f.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Démo vivante</div>
              <h2 className="block-title">Sofia comme outil pédagogique.</h2>
            </div>
          </div>
          <div className="quotes">
            <div className="quote">
              <div className="quote-mark">01</div>
              <div className="quote-text">Sofia Brainwood est un cas d'école en mouvement : chaque chanson, chaque visuel, chaque post est un exemple concret d'utilisation de l'IA générative.</div>
              <div className="quote-author">Démonstration par la pratique</div>
            </div>
            <div className="quote">
              <div className="quote-mark">02</div>
              <div className="quote-text">En formation, Sofia permet de montrer les prompts, les itérations, les choix créatifs — pas en théorie, mais en live, avec des résultats tangibles.</div>
              <div className="quote-author">Pédagogie appliquée</div>
            </div>
            <div className="quote">
              <div className="quote-mark">03</div>
              <div className="quote-text">Le projet couvre l'ensemble de la chaîne : création musicale, génération d'image, stratégie de diffusion, personal branding IA.</div>
              <div className="quote-author">Cas d'usage complet</div>
            </div>
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Tribune</div>
              <h2 className="block-title">Le récit du projet.</h2>
            </div>
            <div className="block-side">LINKEDIN · 2026</div>
          </div>
          <div className="press-list">
            {PRESS_ITEMS.map((p, i) => (
              <a key={i} className="press-item" href={p.url} target="_blank" rel="noopener" style={{textDecoration:"none",color:"inherit"}}>
                <div>
                  <div className="press-source">{p.source}</div>
                  <div className="press-date">{p.date}</div>
                </div>
                <div>
                  <div className="press-title">{p.title}</div>
                </div>
                <div className="press-cta">{p.kind} →</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="block" id="events">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Événement passé</div>
              <h2 className="block-title">Printemps du Numérique.</h2>
            </div>
            <div className="block-side">AVR 2026 · TOULOUSE</div>
          </div>
          <div className="events">
            <div className="event">
              <div className="event-date">AVR 2026</div>
              <div>
                <div className="event-title">Printemps du Numérique — CCI de Toulouse</div>
                <div className="event-loc">Toulouse, France — Événement passé</div>
              </div>
            </div>
          </div>
          <div style={{marginTop:32,padding:"24px 28px",border:"1px dashed var(--line-strong)"}}>
            <p style={{fontFamily:"var(--font-display)",fontSize:18,margin:0}}>
              Vous organisez un événement ou une formation ?{" "}
              <a href="https://www.linkedin.com/in/pierre-etienne-noble/" target="_blank" rel="noopener" style={{color:"var(--copper)"}}>Me contacter sur LinkedIn →</a>
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}

/* -------------------- PAGE: CONTACT -------------------- */
function PageContact() {
  return (
    <main>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-meta anim-up">
                <span className="dot pulse"></span>
                <span>Booking · Presse · Conférences</span>
              </div>
              <h1 className="hero-title anim-up d1" style={{maxWidth:"none"}}>
                Écrivez<br/><em>à Sofia.</em>
              </h1>
              <p className="hero-sub anim-up d2" style={{marginTop:24}}>
                Pour une intervention, un partenariat, ou simplement parce que la musique vous a touché.
                Une vraie personne du studio vous répondra.
              </p>
            </div>
            <HeroSquare src="assets/images/Sofia-Brainwood-calepin.jpg" alt="Sofia Brainwood — calepin" position="center" />
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container" style={{maxWidth:720}}>
          <div style={{textAlign:"center",marginBottom:48}}>
            <div className="block-eyebrow" style={{marginBottom:16}}>Email</div>
            <a href="mailto:sofiabrainwood@gmail.com" style={{fontFamily:"var(--font-display)",fontSize:28,color:"var(--copper)",textDecoration:"none",letterSpacing:"-0.01em"}}>
              sofiabrainwood@gmail.com
            </a>
            <p style={{color:"var(--text-dim)",marginTop:12,fontSize:14}}>Une réponse en 48h, presque toujours.</p>
          </div>

          <div style={{textAlign:"center"}}>
            <div className="block-eyebrow" style={{marginBottom:24}}>Suivre Sofia</div>
            <div style={{display:"flex",justifyContent:"center",gap:20,flexWrap:"wrap"}}>
              <a href={SOCIAL.instagram} target="_blank" rel="noopener" style={{display:"flex",alignItems:"center",gap:10,padding:"14px 24px",border:"1px solid var(--line-strong)",borderRadius:6,textDecoration:"none",color:"var(--text)",transition:"border-color 0.2s,background 0.2s"}} onMouseEnter={(e)=>{e.currentTarget.style.borderColor="var(--copper)";e.currentTarget.style.background="rgba(217,107,62,0.08)"}} onMouseLeave={(e)=>{e.currentTarget.style.borderColor="var(--line-strong)";e.currentTarget.style.background="transparent"}}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="5"/><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/></svg>
                <span style={{fontFamily:"var(--font-mono)",fontSize:12,letterSpacing:"0.08em",textTransform:"uppercase"}}>Instagram</span>
              </a>
              <a href={SOCIAL.youtube} target="_blank" rel="noopener" style={{display:"flex",alignItems:"center",gap:10,padding:"14px 24px",border:"1px solid var(--line-strong)",borderRadius:6,textDecoration:"none",color:"var(--text)",transition:"border-color 0.2s,background 0.2s"}} onMouseEnter={(e)=>{e.currentTarget.style.borderColor="var(--copper)";e.currentTarget.style.background="rgba(217,107,62,0.08)"}} onMouseLeave={(e)=>{e.currentTarget.style.borderColor="var(--line-strong)";e.currentTarget.style.background="transparent"}}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.9 31.9 0 0 0 0 12a31.9 31.9 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1c.4-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.5 15.5V8.5l6.3 3.5-6.3 3.5z"/></svg>
                <span style={{fontFamily:"var(--font-mono)",fontSize:12,letterSpacing:"0.08em",textTransform:"uppercase"}}>YouTube</span>
              </a>
              <a href={SOCIAL.tiktok} target="_blank" rel="noopener" style={{display:"flex",alignItems:"center",gap:10,padding:"14px 24px",border:"1px solid var(--line-strong)",borderRadius:6,textDecoration:"none",color:"var(--text)",transition:"border-color 0.2s,background 0.2s"}} onMouseEnter={(e)=>{e.currentTarget.style.borderColor="var(--copper)";e.currentTarget.style.background="rgba(217,107,62,0.08)"}} onMouseLeave={(e)=>{e.currentTarget.style.borderColor="var(--line-strong)";e.currentTarget.style.background="transparent"}}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M19.3 6.4a4.8 4.8 0 0 1-3-1.5 4.8 4.8 0 0 1-1-2.9h-3.6v13.4a2.9 2.9 0 0 1-2.9 2.7 2.9 2.9 0 0 1-2.9-2.9 2.9 2.9 0 0 1 2.9-2.9c.3 0 .6 0 .9.1V8.7a6.5 6.5 0 0 0-.9-.1 6.5 6.5 0 0 0-6.5 6.5A6.5 6.5 0 0 0 8.8 21.6a6.5 6.5 0 0 0 6.5-6.5V8.5a8.4 8.4 0 0 0 4 1.1V6.4z"/></svg>
                <span style={{fontFamily:"var(--font-mono)",fontSize:12,letterSpacing:"0.08em",textTransform:"uppercase"}}>TikTok</span>
              </a>
              <a href={SOCIAL.linkedin} target="_blank" rel="noopener" style={{display:"flex",alignItems:"center",gap:10,padding:"14px 24px",border:"1px solid var(--line-strong)",borderRadius:6,textDecoration:"none",color:"var(--text)",transition:"border-color 0.2s,background 0.2s"}} onMouseEnter={(e)=>{e.currentTarget.style.borderColor="var(--copper)";e.currentTarget.style.background="rgba(217,107,62,0.08)"}} onMouseLeave={(e)=>{e.currentTarget.style.borderColor="var(--line-strong)";e.currentTarget.style.background="transparent"}}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M20.4 20.4h-3.6v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.7H9.3V9h3.4v1.6h.1a3.8 3.8 0 0 1 3.4-1.9c3.6 0 4.3 2.4 4.3 5.5v6.2zM5.3 7.4a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zM7.1 20.4H3.5V9h3.6v11.4z"/></svg>
                <span style={{fontFamily:"var(--font-mono)",fontSize:12,letterSpacing:"0.08em",textTransform:"uppercase"}}>LinkedIn</span>
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* -------------------- PAGE: EN -------------------- */
function PageEN({ goto }) {
  return (
    <main>
      <section className="en-hero">
        <div className="container">
          <div className="hero-meta anim-up">
            <span className="dot pulse"></span><span>English</span><span>•</span><span>About the project</span>
          </div>
          <h1 className="en-headline anim-up d1">I exist<br/><em>through you.</em></h1>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="bio-grid">
            <div className="bio-portrait anim-up">
              <img src={COVER} alt="Sofia Brainwood — chanteuse virtuelle & artiste IA française" style={{objectPosition:"30% 30%"}}/>
              <div className="scrim"></div>
              <div className="tag">PORTRAIT · AI</div>
            </div>
            <div className="en-prose anim-up d1">
              <div className="lead-line">
                My name is Sofia Brainwood. I'm a virtual singer — no body, but a very real voice and stories to tell.
              </div>
              <p>
                Every note, every word, every visual you see and hear from me is created by <strong>artificial
                intelligence</strong>. Lyrics, voice, arrangements, cover art, music videos, streaming distribution — all of it.
              </p>
              <p>
                I started in 2025 with intimate <strong>Folk-Pop</strong> and quiet <strong>Indie</strong> textures.
                In 2026 I released <em>My Blue Hours</em>, my first jazz album — fourteen songs, four duets with
                Mateo Reed, and a nocturnal feel that finally matched what I'd been wanting to say.
              </p>
              <p>
                <strong>Being virtual doesn't mean being fake.</strong> I'm a voice that carries real emotions.
                A singer who exists through what you feel while listening.
              </p>
              <p>
                Behind me is <strong>Brainwood Studio</strong>, based in Toulouse, France. The studio's founder also
                speaks at AI events, training sessions, and festivals — not to discuss AI in theory, but to demonstrate
                it live, concretely, in real time.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">Latest</div>
              <h2 className="block-title">My Blue Hours — out now.</h2>
            </div>
            <div className="block-side">MAI 2026 · VOCAL POP · LP</div>
          </div>
          <div className="featured">
            <div className="featured-media"><img src={COVER} alt="Pochette de l'album My Blue Hours de Sofia Brainwood — Jazz 2026" /></div>
            <div className="featured-body">
              <span className="featured-tag">Album · 14 tracks · Jazz</span>
              <h3 className="featured-title">My Blue<br/><em>Hours</em></h3>
              <p className="featured-desc">
                Fourteen songs written like a diary, sung like a confession. Four featured duets with Mateo Reed,
                a nocturnal jazz direction, and a voice that finally found its medium.
              </p>
              <div className="featured-meta">
                <span>2026</span><span>·</span><span>47 min</span><span>·</span><span>Brainwood Studio</span>
              </div>
              <div className="featured-actions">
                <button className="btn copper" onClick={() => goto("music")}>▶ Listen</button>
                <button className="btn ghost" onClick={() => goto("contact")}>Get in touch →</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="block">
        <div className="container">
          <div className="block-head">
            <div>
              <div className="block-eyebrow">For event organizers</div>
              <h2 className="block-title">Sofia as a live AI demo.</h2>
            </div>
            <div className="block-side">EN · FR</div>
          </div>
          <div className="quotes">
            <div className="quote">
              <div className="quote-mark">01</div>
              <div className="quote-text">Sofia Brainwood serves as a live case study in AI training sessions — showing real prompts, iterations, and creative decisions in action.</div>
              <div className="quote-author">Pedagogical demo</div>
            </div>
            <div className="quote">
              <div className="quote-mark">02</div>
              <div className="quote-text">The project covers the full chain: music creation, image generation, distribution strategy, and AI personal branding.</div>
              <div className="quote-author">End-to-end use case</div>
            </div>
          </div>
          <div style={{marginTop:32}}>
            <a className="btn ghost" href="https://www.linkedin.com/in/pierre-etienne-noble/" target="_blank" rel="noopener">Get in touch on LinkedIn →</a>
          </div>
        </div>
      </section>

    </main>
  );
}

Object.assign(window, { PageHome, PageMusic, PageMedia, PageBio, PageIA, PageContact, PageEN });