// portfolio.jsx — Sections for Isaac Hassani's portfolio.

const { useState, useEffect, useRef } = React;

/* ─────────────────────────────────────────────────────────────────────────────
   Icons
   ───────────────────────────────────────────────────────────────────────────── */
const Ico = {
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M7 17L17 7" /><path d="M9 7h8v8" /></svg>,
  calendar: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="4.5" width="18" height="16" rx="2" /><path d="M3 9.5h18M8 2.5v4M16 2.5v4" /></svg>,
  mail: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></svg>,
  github: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2C6.48 2 2 6.59 2 12.25c0 4.52 2.87 8.36 6.84 9.71.5.1.68-.22.68-.49v-1.7c-2.78.62-3.37-1.21-3.37-1.21-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.62.07-.62 1 .07 1.53 1.06 1.53 1.06.89 1.57 2.34 1.12 2.91.85.09-.66.35-1.12.63-1.38-2.22-.26-4.55-1.14-4.55-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.27 2.75 1.05A9.4 9.4 0 0112 6.84c.85.004 1.7.12 2.5.34 1.9-1.32 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.79-4.57 5.05.36.32.68.94.68 1.9v2.81c0 .27.18.59.69.49C19.13 20.6 22 16.77 22 12.25 22 6.59 17.52 2 12 2z" /></svg>,
  linkedin: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v14H.22V8zm7.5 0h4.37v1.92h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.47 3.04 5.47 6.99V22h-4.56v-6.62c0-1.58-.03-3.62-2.2-3.62-2.21 0-2.55 1.72-2.55 3.5V22H7.72V8z" /></svg>,
  copy: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15V5a2 2 0 012-2h10" /></svg>,
  check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12l5 5L20 7" /></svg>,
  award: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="9" r="6" /><path d="M9 13.5L7.5 22 12 19l4.5 3-1.5-8.5" /></svg>,
  chevron: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9 6l6 6-6 6" /></svg>,
  cube: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 2L3 7v10l9 5 9-5V7l-9-5z" /><path d="M3 7l9 5 9-5M12 12v10" /></svg>,
  globe: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18" /><path d="M12 3a14 14 0 010 18M12 3a14 14 0 000 18" /></svg>,
  chat: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 12c0 4.4-4 8-9 8a10 10 0 01-3.9-.8L3 21l1.8-5.1A8 8 0 013 12c0-4.4 4-8 9-8s9 3.6 9 8z" /></svg>,
  cynaIcon: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z" /></svg>,
  // Power Apps style block icons (line-art, not the real brand)
  form: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M8 8h8M8 12h8M8 16h5" /></svg>,
  flow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="6" cy="6" r="2.4" /><circle cx="18" cy="6" r="2.4" /><circle cx="12" cy="18" r="2.4" /><path d="M7.5 7.6L11 16M16.5 7.6L13 16M8.4 6h7.2" /></svg>,
  chart: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 20V8M10 20V4M16 20v-8M22 20H2" /></svg>,
  sun: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></svg>,
  moon: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" /></svg>
};

/* ─────────────────────────────────────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────────────────────────────────────── */
function Nav() {
  const [open, setOpen] = useState(false);
  // Close menu on link click or escape
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === 'Escape') setOpen(false);};
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open]);

  const links = [
  { href: '#pivot', n: '01', l: 'Le pivot' },
  { href: '#projets', n: '02', l: 'Projets' },
  { href: '#parcours', n: '03', l: 'Parcours' },
  { href: '#contact-cta', n: '04', l: 'Me contacter' }];


  return (
    <React.Fragment>
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand" style={{ gap: 0 }}>
          <span aria-hidden="true" style={{
              position: 'relative',
              width: 30, height: 30,
              display: 'inline-grid',
              placeItems: 'center',
              background: 'var(--ink)',
              color: 'var(--bg)',
              borderRadius: 8,
              overflow: 'hidden',
              fontFamily: "'Geist Mono', ui-monospace, monospace",
              fontSize: 12,
              fontWeight: 600,
              letterSpacing: '-0.06em',
              lineHeight: 1
            }}>
            <span style={{ position: 'relative', zIndex: 2 }}>ih</span>
            <span style={{
                position: 'absolute',
                top: 0, right: 0,
                width: 11, height: 11,
                background: 'var(--accent)',
                clipPath: 'polygon(100% 0, 0 0, 100% 100%)'
              }}></span>
          </span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <div className="nav-links">
            {links.slice(0, 4).map((l) =>
              <a key={l.href} href={l.href}><span className="num">{l.n}</span>{l.l}</a>
              )}
          </div>
          <button
              type="button"
              onClick={() => setOpen(true)}
              aria-label="Ouvrir le menu"
              className="nav-burger">
              
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>

    </nav>

    {/* Mobile menu drawer (outside <nav> so backdrop-filter doesn't trap it) */}
      <div className={"nav-drawer" + (open ? " open" : "")} aria-hidden={!open}>
        <div className="nav-drawer-scrim" onClick={() => setOpen(false)}></div>
        <div className="nav-drawer-panel">
          <div className="nav-drawer-head">
            <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.08em' }}>
              Navigation
            </span>
            <button
              type="button"
              onClick={() => setOpen(false)}
              aria-label="Fermer le menu"
              className="nav-drawer-close">
              
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
            </button>
          </div>
          <div className="nav-drawer-links">
            {links.map((l) =>
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}>
                <span className="mono num">{l.n}</span>
                <span>{l.l}</span>
                <Ico.arrow width="14" height="14" className="arrow" />
              </a>
            )}
          </div>
        </div>
      </div>
    </React.Fragment>);

}

/* ─────────────────────────────────────────────────────────────────────────────
   CODE → LOW-CODE animation
   Pure CSS animation that loops. Three columns:
   – left: faux code editor that types lines
   – middle: connector with a moving particle
   – right: low-code blocks that pop in as the code "compiles"
   ───────────────────────────────────────────────────────────────────────────── */
function CodeToLowCode() {
  // Loop length must match the longest animation cycle (12s).
  const LOOP = 12;
  const codeLines = [
  { t: 'const ', k: 'kw', c: 'CongéApp = () => {' },
  { t: '  const ', k: 'kw', c: '[demandes, set] = useState([])' },
  { t: '  ', k: '', c: 'useEffect(() => fetch("/api"), [])' },
  { t: '  return <Layout>', k: 'tag', c: '' },
  { t: '    <Form />', k: 'tag', c: ' <Flow />' },
  { t: '    <Chart />', k: 'tag', c: ' </Layout>' },
  { t: '}', k: 'kw', c: '' }];


  const blocks = [
  { icon: <Ico.form width="18" height="18" />, title: 'Formulaire', sub: 'Demande de congé', delay: 5.5 },
  { icon: <Ico.flow width="18" height="18" />, title: 'Workflow', sub: 'Approbation manager', delay: 6.5 },
  { icon: <Ico.chart width="18" height="18" />, title: 'Tableau de bord', sub: 'Suivi annuel', delay: 7.5 }];


  return (
    <div style={{
      position: 'relative',
      borderRadius: 14,
      border: '1px solid var(--rule)',
      background: 'linear-gradient(180deg, color-mix(in oklab, var(--accent) 5%, var(--bg-elev)) 0%, var(--bg-elev) 70%)',
      overflow: 'hidden',
      boxShadow: 'var(--shadow-card)',
      minHeight: 380
    }}>
      {/* header strip */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '12px 16px', borderBottom: '1px solid var(--rule)',
        fontSize: 11, color: 'var(--muted)'
      }}>
        <span className="mono" style={{ textTransform: 'uppercase', letterSpacing: '.08em' }}>
          Du code &nbsp;→&nbsp; au low-code
        </span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--muted-2)' }}>en boucle</span>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.05fr) 96px minmax(0, 1fr)',
        gap: 0,
        minHeight: 320
      }} className="anim-grid">
        {/* LEFT — code editor */}
        <div style={{
          padding: '18px 16px 18px 18px',
          borderRight: '1px solid var(--rule)',
          background: 'color-mix(in oklab, var(--bg) 70%, transparent)',
          position: 'relative'
        }}>
          <div className="mono" style={{
            fontSize: 10, color: 'var(--muted-2)', textTransform: 'uppercase',
            letterSpacing: '.08em', marginBottom: 10, display: 'flex', gap: 6, alignItems: 'center'
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#E5564A' }}></span>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#E8A93A' }}></span>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#3DAA56' }}></span>
            <span style={{ marginLeft: 6 }}>App.jsx</span>
          </div>
          <pre className="mono" style={{
            margin: 0, fontSize: 12.5, lineHeight: 1.65,
            color: 'var(--ink-2)', whiteSpace: 'pre-wrap',
            fontFamily: 'Geist Mono, ui-monospace, monospace'
          }}>
            {codeLines.map((l, i) =>
            <div key={i}
            className="anim-code-line"
            style={{
              animation: `typeLine ${LOOP}s ${i * 0.45}s infinite`,
              opacity: 0
            }}>
              
                <span className="mono" style={{ color: 'var(--muted-2)', marginRight: 10, userSelect: 'none' }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ color: 'oklch(0.55 0.16 256)' }}>{l.t}</span>
                <span style={{ color: l.k === 'tag' ? 'oklch(0.50 0.16 30)' : 'var(--ink-2)' }}>{l.c}</span>
              </div>
            )}
            <div style={{ display: 'inline-flex', marginLeft: 32, marginTop: 4 }}>
              <span className="anim-caret" style={{
                display: 'inline-block', width: 7, height: 14,
                background: 'var(--accent)', verticalAlign: 'text-bottom',
                animation: 'caretBlink 1s infinite'
              }}></span>
            </div>
          </pre>
        </div>

        {/* MIDDLE — connector */}
        <div style={{
          position: 'relative',
          display: 'grid', placeItems: 'center',
          background: 'color-mix(in oklab, var(--bg-elev) 95%, transparent)',
          borderRight: '1px solid var(--rule)'
        }}>
          <svg viewBox="0 0 96 200" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
            <defs>
              <linearGradient id="cflow" x1="0" x2="1" y1="0" y2="0">
                <stop offset="0%" stopColor="var(--muted-2)" stopOpacity="0" />
                <stop offset="50%" stopColor="var(--accent)" stopOpacity="1" />
                <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
              </linearGradient>
            </defs>
            {/* three wavy paths so multiple "signals" cross */}
            {[60, 100, 140].map((y, i) =>
            <path key={i}
            d={`M-4 ${y} C 30 ${y - 20}, 60 ${y + 20}, 100 ${y}`}
            fill="none"
            stroke="var(--rule)"
            strokeWidth="1" />

            )}
            {/* animated dashed flows */}
            {[60, 100, 140].map((y, i) =>
            <path key={'a' + i}
            className="anim-flow"
            d={`M-4 ${y} C 30 ${y - 20}, 60 ${y + 20}, 100 ${y}`}
            fill="none"
            stroke="url(#cflow)"
            strokeWidth="1.4"
            strokeDasharray="6 12"
            style={{
              animation: `flowDash 2.4s linear infinite, flowFade ${LOOP}s ${3 + i * 0.5}s infinite`
            }} />

            )}
            {/* arrow tip */}
            <g style={{ animation: `flowFade ${LOOP}s 4s infinite` }} className="anim-flow">
              <path d="M85 95 L96 100 L85 105" fill="none" stroke="var(--accent)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </g>
          </svg>
          <div className="mono" style={{
            position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)',
            fontSize: 9.5, letterSpacing: '.1em', textTransform: 'uppercase',
            color: 'var(--muted-2)'
          }}>build</div>
          <div className="mono" style={{
            position: 'absolute', bottom: 14, left: '50%', transform: 'translateX(-50%)',
            fontSize: 9.5, letterSpacing: '.1em', textTransform: 'uppercase',
            color: 'var(--accent)',
            animation: `flowFade ${LOOP}s 5s infinite`
          }} className="anim-flow">déployé</div>
        </div>

        {/* RIGHT — low-code blocks */}
        <div style={{
          padding: '20px 18px',
          display: 'flex', flexDirection: 'column', gap: 10,
          justifyContent: 'center'
        }}>
          <div className="mono" style={{
            fontSize: 10, color: 'var(--muted-2)', textTransform: 'uppercase',
            letterSpacing: '.08em', marginBottom: 4
          }}>App Power Platform</div>
          {blocks.map((b, i) =>
          <div key={i}
          className="anim-block"
          style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '12px 14px',
            background: 'var(--bg-elev)',
            border: '1px solid color-mix(in oklab, var(--accent) 18%, var(--rule))',
            borderRadius: 10,
            boxShadow: '0 1px 0 rgba(14,15,12,.03), 0 8px 22px -16px rgba(14,15,12,.18)',
            animation: `blockIn ${LOOP}s ${b.delay}s infinite`,
            opacity: 0
          }}>
            
              <div style={{
              width: 34, height: 34, borderRadius: 8,
              background: 'color-mix(in oklab, var(--accent) 12%, var(--bg))',
              color: 'var(--accent)',
              display: 'grid', placeItems: 'center',
              border: '1px solid color-mix(in oklab, var(--accent) 22%, transparent)'
            }}>{b.icon}</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.005em' }}>{b.title}</div>
                <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{b.sub}</div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* responsive: stack columns on narrow screens */}
      <style>{`
        @media (max-width: 720px) {
          .anim-grid { grid-template-columns: 1fr !important; }
          .anim-grid > div:nth-child(2) { min-height: 80px; }
          .anim-grid > div:nth-child(2) svg { height: 80px; }
        }
      `}</style>
    </div>);

}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────────────────── */
function Hero() {
  return (
    <section className="section" id="top" style={{ paddingTop: 40, paddingBottom: 32, position: 'relative' }}>
      <div className="grid-bg"></div>

      <div style={{ position: 'relative' }} className="hero-grid">
        {/* LEFT */}
        <div className="hero-enter">
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
            <img
              src="assets/portrait.jpg"
              alt="Portrait d'Isaac Hassani"
              width="64"
              height="64"
              style={{
                width: 64, height: 64,
                borderRadius: '50%',
                objectFit: 'cover',
                border: '1px solid var(--rule)',
                boxShadow: '0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px -8px rgba(14,15,12,.25), 0 0 0 4px color-mix(in oklab, var(--accent) 10%, transparent)',
                background: 'var(--bg-elev)',
                flex: '0 0 auto'
              }} />
            
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 12px',
                background: 'color-mix(in oklab, var(--accent) 12%, var(--bg-elev))',
                border: '1px solid color-mix(in oklab, var(--accent) 35%, var(--rule))',
                borderRadius: 999,
                fontSize: 12.5,
                color: 'var(--accent-ink)',
                fontWeight: 500,
                width: 'fit-content',
                maxWidth: '100%'
              }}>
                <span style={{
                  width: 7, height: 7, borderRadius: '50%',
                  background: 'oklch(0.65 0.14 145)',
                  boxShadow: '0 0 0 3px oklch(0.65 0.14 145 / .2)',
                  animation: 'pulse 2.4s ease-in-out infinite',
                  flex: '0 0 auto'
                }}></span>
                <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  En alternance chez <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>La Banque Postale</strong>
                </span>
              </span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '.04em' }}>
                Master Expert SI · Toulouse
              </span>
            </div>
          </div>

          <h1 className="hero-title" style={{
            fontSize: 'clamp(32px, 5.6vw, 72px)',
            lineHeight: 1.05,
            letterSpacing: '-0.035em',
            fontWeight: 500,
            margin: '0 0 22px'
          }}>
            Isaac Hassani. <br />
            <span className="hero-accent" style={{ whiteSpace: 'nowrap', color: 'var(--accent)' }}>Développeur Power Platform.</span>
          </h1>

          <p style={{
            fontSize: 'clamp(16px, 1.5vw, 19px)',
            lineHeight: 1.65,
            color: 'var(--muted)',
            maxWidth: '62ch',
            margin: '0 0 32px'
          }}>
            Actuellement en alternance chez <strong style={{ color: 'var(--ink-2)', fontWeight: 500 }}>La Banque Postale</strong> en tant que développeur Power Platform.
            J'arrive d'une alternance en Bachelor d'un an chez <strong style={{ color: 'var(--ink-2)', fontWeight: 500 }}>ZH Code &amp; Consulting</strong>,
            où j'ai développé en <em className="serif" style={{ color: 'var(--ink-2)' }}>React et Node.js</em>.
          </p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            <a className="btn btn-primary" href="mailto:isaac.hassani@limayrac.fr?subject=Bonjour%20Isaac" style={{ fontSize: 17, padding: '14px 20px' }}>
              Me contacter
              <Ico.arrow className="ico arrow" />
            </a>
          </div>
        </div>

      </div>

      <style>{`
        @media (max-width: 880px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>);

}

function HeroFact({ label, lead, sub, border, highlight, highlightGroup }) {
  return (
    <div style={{
      padding: '16px 20px',
      borderLeft: border && !highlightGroup ? '1px solid var(--rule)' : 'none',
      background: highlight ?
      'color-mix(in oklab, var(--accent) 8%, var(--bg-elev))' :
      'transparent',
      borderTop: highlight ? '1px solid color-mix(in oklab, var(--accent) 22%, transparent)' : 'none',
      borderBottom: highlight ? '1px solid color-mix(in oklab, var(--accent) 22%, transparent)' : 'none',
      position: 'relative'
    }}>
      <div className="mono" style={{
        fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: highlight ? 'var(--accent)' : 'var(--muted-2)',
        marginBottom: 6,
        fontWeight: highlight ? 700 : 400,
        display: 'flex', alignItems: 'center', gap: 6
      }}>
        {highlight &&
        <span style={{
          width: 6, height: 6, borderRadius: '50%',
          background: 'oklch(0.65 0.14 145)',
          boxShadow: '0 0 0 3px oklch(0.65 0.14 145 / .22)',
          animation: 'pulse 2.4s ease-in-out infinite'
        }}></span>
        }
        <span>{label}</span>
      </div>
      <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.01em', marginBottom: 3 }}>{lead}</div>
      <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{sub}</div>
    </div>);

}

/* ─────────────────────────────────────────────────────────────────────────────
   LE PIVOT — pourquoi je bascule
   ───────────────────────────────────────────────────────────────────────────── */
function Pivot() {
  const pts = [
  {
    n: '01',
    title: 'Pourquoi je bascule',
    body: <>Mon alternance Bachelor m'a montré le temps perdu dans la mécanique — auth, config, déploiement. Pour des outils internes, le low-code va droit au but.</>
  },
  {
    n: '02',
    title: 'Le code reste un atout',
    body: <>Quand un Power App a besoin d'un composant custom ou d'un connecteur API, savoir coder me sort du cul-de-sac.</>
  },
  {
    n: '03',
    title: "Pourquoi maintenant",
    body: <>La Power Platform devient un standard dans les grands groupes. Apprendre maintenant, c'est arriver au bon moment.</>
  }];


  return (
    <section className="section reveal band band-blue" id="pivot">
      <div className="section-hd">
        <span className="ix">§ 01 — Le pivot</span>
        <h2 className="ti">Pourquoi je m'oriente vers le<span className="pivot-br"> </span><span style={{ whiteSpace: 'nowrap' }}>low-code.</span></h2>
        <span className="meta">Mon point de vue</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
        {pts.map((p, i) => {
          const fills = [
          { bg: 'var(--ink)', fg: '#FAFAF7', body: 'rgba(250,250,247,.74)', meta: 'rgba(250,250,247,.45)', num: 'color-mix(in oklab, var(--accent) 55%, #fff)', border: 'transparent' },
          { bg: 'color-mix(in oklab, var(--accent) 88%, #000)', fg: '#fff', body: 'rgba(255,255,255,.86)', meta: 'rgba(255,255,255,.55)', num: '#fff', border: 'transparent' },
          { bg: 'var(--bg-elev)', fg: 'var(--ink)', body: 'var(--muted)', meta: 'var(--muted-2)', num: 'var(--accent)', border: 'color-mix(in oklab, var(--accent) 32%, var(--rule))' }];

          const f = fills[i % fills.length];
          return (
            <article key={p.n} className="card card-hover" style={{
              padding: 24, display: 'flex', flexDirection: 'column', gap: 14,
              background: f.bg, color: f.fg,
              border: `1px solid ${f.border}`
            }}>
              <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <span className="mono" style={{ fontSize: 11, color: f.num, fontWeight: 600 }}>{p.n}</span>
                <span className="mono" style={{ fontSize: 10, color: f.meta, textTransform: 'uppercase', letterSpacing: '.08em' }}>note</span>
              </header>
              <h3 style={{ margin: 0, fontSize: 19, fontWeight: 500, letterSpacing: '-0.015em', color: f.fg }}>{p.title}</h3>
              <p style={{ margin: 0, color: f.body, fontSize: p.bodySize || 13.5, lineHeight: 1.6 }}>{p.body}</p>
            </article>);

        })}
      </div>
    </section>);

}

/* ─────────────────────────────────────────────────────────────────────────────
   PROJETS
   ───────────────────────────────────────────────────────────────────────────── */
function Projets() {
  return (
    <section className="section reveal" id="projets">
      <div className="section-hd">
        <span className="ix">§ 02 — Mes expériences</span>
        <h2 className="ti">
          <span className="ti-desktop">Une appli métier, une plateforme e-commerce <span className="serif" style={{ color: 'var(--muted)' }}>et</span> une <span style={{ whiteSpace: 'nowrap' }}>télécommande&nbsp;IoT</span>.</span>
          <span className="ti-mobile">Appli métier, e-commerce<span className="ti-mobile-br"> </span><span className="serif" style={{ color: 'var(--muted)' }}>et</span> <span style={{ whiteSpace: 'nowrap' }}>télécommande&nbsp;IoT</span>.</span>
        </h2>
        <span className="meta">2023 → 2026</span>
      </div>

      <ProjetHPropriete />
      <div style={{ height: 16 }} />
      <ProjetCYNA />
      <div style={{ height: 16 }} />
      <ProjetCapgemini />
    </section>);

}

function ProjetHPropriete() {
  const [tab, setTab] = useState('overview');
  const stack = ['Next.js', 'React', 'Node.js', 'Express', 'MongoDB', 'JWT', 'Figma', 'Docker'];
  return (
    <article className="card card-hover" style={{ overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.15fr) minmax(0, 1fr)', minHeight: 460 }} className="proj-grid">
        <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 9,
                background: 'var(--ink)', color: 'var(--bg)',
                display: 'grid', placeItems: 'center'
              }}>
                <Ico.cynaIcon width="18" height="18" />
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.08em' }}>Alternance Bachelor · ZH Code & Consulting</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>Oct. 2025 → Sept. 2026 · 12 mois</div>
              </div>
            </div>
            <span className="tag"><span className="d"></span>Client : H Propreté</span>
          </header>

          <h3 style={{ margin: 0, fontSize: 'clamp(26px, 3vw, 36px)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            H Propreté — application <span className="serif" style={{ color: 'var(--muted)' }}>métier</span> sur mesure.
          </h3>

          <p style={{ margin: 0, color: 'var(--muted)', fontSize: 15.5, lineHeight: 1.65 }}>
            Application web pour piloter une entreprise de nettoyage : planning, équipes terrain, clients et lieux.
            Encadré par <a
              href="https://www.linkedin.com/in/zahirhaniche/?isSelfProfile=false"
              target="_blank"
              rel="noopener"
              style={{
                color: 'var(--ink-2)',
                fontWeight: 500,
                textDecoration: 'none',
                borderBottom: '1px solid color-mix(in oklab, var(--accent) 40%, transparent)',
                paddingBottom: 1,
                transition: 'color .2s ease, border-color .2s ease'
              }}
              onMouseEnter={(e) => {e.currentTarget.style.color = 'var(--accent)';e.currentTarget.style.borderColor = 'var(--accent)';}}
              onMouseLeave={(e) => {e.currentTarget.style.color = 'var(--ink-2)';e.currentTarget.style.borderColor = 'color-mix(in oklab, var(--accent) 40%, transparent)';}}>
              Haniche Zahir <span style={{ fontSize: '0.78em', verticalAlign: '0.05em' }}>↗</span></a>, développeur senior (13 ans). Scrum, sprints de 3 semaines.
          </p>

          <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--rule)', marginTop: 8 }}>
            {['overview', 'architecture', 'retour'].map((k) =>
            <button key={k}
            onClick={() => setTab(k)}
            style={{
              appearance: 'none', border: 0, background: 'transparent',
              padding: '10px 14px 12px', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 13,
              color: tab === k ? 'var(--ink)' : 'var(--muted)',
              fontWeight: tab === k ? 500 : 400,
              borderBottom: tab === k ? '2px solid var(--ink)' : '2px solid transparent',
              marginBottom: -1,
              letterSpacing: '-0.005em',
              textTransform: 'capitalize'
            }}>
              {k === 'overview' ? 'Fonctionnalités' : k === 'architecture' ? 'Architecture' : 'Ce que j\'en retiens'}</button>
            )}
          </div>

          <div style={{ minHeight: 140 }}>
            {tab === 'overview' &&
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
              'Planning d\'interventions vue jour / semaine / mois.',
              'Ajout, modification et affectation d\'équipes à des créneaux.',
              'Espace privé du président, accès par JWT et rôles.',
              'Gestion des clients, lieux et disponibilités RH.'].
              map((t, i) =>
              <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, lineHeight: 1.5, color: 'var(--ink-2)' }}>
                    <Ico.check width="16" height="16" style={{ color: 'var(--accent)', flex: '0 0 auto', marginTop: 2 }} />
                    <span>{t}</span>
                  </li>
              )}
              </ul>
            }
            {tab === 'architecture' &&
            <div className="mono" style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.7 }}>
                <div><span style={{ color: 'var(--muted-2)' }}>front/</span>   Next.js · React · Bootstrap</div>
                <div><span style={{ color: 'var(--muted-2)' }}>api/</span>     Node.js · Express · middlewares JWT</div>
                <div><span style={{ color: 'var(--muted-2)' }}>db/</span>      MongoDB · Mongoose · rôles & permissions</div>
                <div><span style={{ color: 'var(--muted-2)' }}>auth/</span>    JWT · refresh tokens · routes protégées</div>
                <div><span style={{ color: 'var(--muted-2)' }}>ops/</span>     Docker (initiation) · GitLab · Postman · Figma</div>
              </div>
            }
            {tab === 'retour' &&
            <p style={{ margin: 0, color: 'var(--muted)', fontSize: 13.5, lineHeight: 1.65 }}>
                Encadré par un développeur de 13 ans d'expérience : très formateur.
                J'ai mesuré le temps que prend l'auth, les rôles et le déploiement faits proprement. C'est ce constat qui m'a poussé vers la Power Platform.
              </p>
            }
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 6 }}>
            {stack.map((s) => <span key={s} className="tag" style={{ color: 'var(--ink-2)' }}>{s}</span>)}
          </div>
        </div>

        <HProprietePreview />
      </div>
    </article>);

}

function HProprietePreview() {
  const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven'];
  const slots = [
  { day: 0, start: 1, span: 2, team: 'Équipe A', color: 'oklch(0.55 0.16 256)' },
  { day: 1, start: 0, span: 3, team: 'Équipe B', color: 'oklch(0.55 0.16 145)' },
  { day: 2, start: 2, span: 2, team: 'Équipe A', color: 'oklch(0.55 0.16 256)' },
  { day: 3, start: 1, span: 4, team: 'Équipe C', color: 'oklch(0.55 0.14 30)' },
  { day: 4, start: 0, span: 2, team: 'Équipe B', color: 'oklch(0.55 0.16 145)' }];

  return (
    <div style={{
      borderLeft: '1px solid var(--rule)',
      background: 'linear-gradient(180deg, color-mix(in oklab, var(--accent) 7%, transparent) 0%, var(--bg) 60%)',
      padding: '32px 32px 0',
      position: 'relative',
      overflow: 'hidden',
      minHeight: 380
    }}>
      <div style={{
        background: 'var(--bg-elev)',
        border: '1px solid var(--rule)',
        borderRadius: 12,
        boxShadow: '0 30px 60px -30px rgba(14,15,12,.25)',
        overflow: 'hidden',
        height: 'calc(100% + 30px)'
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '10px 12px', borderBottom: '1px solid var(--rule)'
        }}>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#E5564A' }}></span>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#E8A93A' }}></span>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#3DAA56' }}></span>
          <div className="mono" style={{ marginLeft: 12, fontSize: 11, color: 'var(--muted)' }}>h-proprete.app — /planning</div>
        </div>
        <div style={{ padding: '16px 18px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '.08em' }}>Semaine du 18 mai</div>
              <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em', marginTop: 2 }}>Planning d'interventions</div>
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              <span style={{ padding: '4px 8px', border: '1px solid var(--rule)', borderRadius: 6, fontSize: 10, color: 'var(--muted)' }}>‹</span>
              <span style={{ padding: '4px 8px', border: '1px solid var(--rule)', borderRadius: 6, fontSize: 10, color: 'var(--muted)' }}>›</span>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '30px repeat(5, 1fr)', gap: 4, marginBottom: 6 }}>
            <div></div>
            {days.map((d) =>
            <div key={d} className="mono" style={{ fontSize: 10, textAlign: 'center', color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.05em' }}>{d}</div>
            )}
          </div>

          <div style={{ position: 'relative', height: 180 }}>
            {[0, 1, 2, 3, 4, 5].map((h) =>
            <div key={h} style={{
              position: 'absolute', top: h * 30, left: 30, right: 0, height: 1,
              background: 'var(--rule-2)'
            }}></div>
            )}
            {['8h', '10h', '12h', '14h', '16h'].map((h, i) =>
            <div key={h} className="mono" style={{
              position: 'absolute', top: i * 30 - 4, left: 0, width: 24,
              fontSize: 9, color: 'var(--muted-2)', textAlign: 'right'
            }}>{h}</div>
            )}
            <div style={{
              position: 'absolute', top: 0, bottom: 0, left: 30, right: 0,
              display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)'
            }}>
              {days.map((d, di) =>
              <div key={di} style={{ borderLeft: '1px solid var(--rule-2)', position: 'relative' }}>
                  {slots.filter((s) => s.day === di).map((s, si) =>
                <div key={si} style={{
                  position: 'absolute',
                  top: s.start * 30 + 1,
                  left: 2, right: 2,
                  height: s.span * 30 - 2,
                  background: `color-mix(in oklab, ${s.color} 18%, var(--bg-elev))`,
                  borderLeft: `3px solid ${s.color}`,
                  borderRadius: 5,
                  padding: '4px 6px',
                  fontSize: 10,
                  color: s.color,
                  fontWeight: 500
                }}>
                      {s.team}
                    </div>
                )}
                </div>
              )}
            </div>
          </div>

          <div style={{ display: 'flex', gap: 12, marginTop: 12, fontSize: 11, color: 'var(--muted)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'oklch(0.55 0.16 256)' }}></span> Équipe A</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'oklch(0.55 0.16 145)' }}></span> Équipe B</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'oklch(0.55 0.14 30)' }}></span> Équipe C</span>
          </div>
        </div>
      </div>
    </div>);

}

function ProjetCYNA() {
  const [tab, setTab] = useState('overview');
  const stack = ['Next.js', 'React', 'React Native', 'Supabase', 'Stripe', 'Tailwind', 'Figma'];
  return (
    <article className="card card-hover" style={{ overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.15fr)', minHeight: 460 }} className="proj-grid proj-grid-cyna">
        <CynaPreview />
        <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 18, borderLeft: '1px solid var(--rule)' }}>
          <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 9,
                background: 'color-mix(in oklab, var(--accent) 14%, var(--bg))', color: 'var(--accent)',
                display: 'grid', placeItems: 'center',
                border: '1px solid color-mix(in oklab, var(--accent) 25%, transparent)'
              }}>
                <Ico.cynaIcon width="18" height="18" />
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.08em' }}>
                  Projet fil rouge Bachelor<span className="cyna-meta-sep"> · </span><span className="cyna-meta-break">4 développeurs</span>
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>Janv. → Juil. 2026 · 6 mois</div>
              </div>
            </div>
            <span className="tag"><span className="d"></span>Client : CYNA-IT</span>
          </header>

          <h3 style={{ margin: 0, fontSize: 'clamp(26px, 3vw, 36px)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            Plateforme e-commerce <span className="serif" style={{ color: 'var(--muted)' }}>pour</span> SaaS de cybersécurité.
          </h3>

          <p style={{ margin: 0, color: 'var(--muted)', fontSize: 15.5, lineHeight: 1.65 }}>
            Site e-commerce mobile-first, app mobile et back-office pour la vente de solutions <strong style={{ color: 'var(--ink-2)', fontWeight: 500 }}>SOC, EDR et XDR</strong>.
            Projet à 4, stack Next.js / Supabase, paiements Stripe.
          </p>

          <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--rule)', marginTop: 8 }}>
            {['overview', 'architecture', 'equipe'].map((k) =>
            <button key={k}
            onClick={() => setTab(k)}
            style={{
              appearance: 'none', border: 0, background: 'transparent',
              padding: '10px 14px 12px', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 13,
              color: tab === k ? 'var(--ink)' : 'var(--muted)',
              fontWeight: tab === k ? 500 : 400,
              borderBottom: tab === k ? '2px solid var(--ink)' : '2px solid transparent',
              marginBottom: -1,
              letterSpacing: '-0.005em',
              textTransform: 'capitalize'
            }}>
              {k === 'overview' ? 'Périmètre' : k === 'architecture' ? 'Architecture' : 'Mon rôle'}</button>
            )}
          </div>

          <div style={{ minHeight: 140 }}>
            {tab === 'overview' &&
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
              'Site e-commerce mobile-first — catalogue, panier, checkout.',
              'Application mobile Android et iOS, miroir de la version web.',
              'Back-office d\'admin pour produits, commandes et contenu.',
              'Paiement Stripe, conformité RGPD, accessibilité a11y.'].
              map((t, i) =>
              <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, lineHeight: 1.5, color: 'var(--ink-2)' }}>
                    <Ico.check width="16" height="16" style={{ color: 'var(--accent)', flex: '0 0 auto', marginTop: 2 }} />
                    <span>{t}</span>
                  </li>
              )}
              </ul>
            }
            {tab === 'architecture' &&
            <div className="mono" style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.7 }}>
                <div><span style={{ color: 'var(--muted-2)' }}>web/</span>      Next.js · React · Tailwind</div>
                <div><span style={{ color: 'var(--muted-2)' }}>mobile/</span>   React Native · Android & iOS</div>
                <div><span style={{ color: 'var(--muted-2)' }}>backend/</span>  Supabase · auth + Postgres</div>
                <div><span style={{ color: 'var(--muted-2)' }}>pay/</span>      Stripe · checkout + abonnements</div>
                <div><span style={{ color: 'var(--muted-2)' }}>ops/</span>      GitLab · Scrum sprints · Figma</div>
              </div>
            }
            {tab === 'equipe' &&
            <p style={{ margin: 0, color: 'var(--muted)', fontSize: 13.5, lineHeight: 1.65 }}>
                J'ai porté l'<strong style={{ color: 'var(--ink-2)', fontWeight: 500 }}>intégralité du front-end</strong> (web + mobile) et une partie du back-office. Le reste de l'équipe a géré le back-end.
              </p>
            }
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 6 }}>
            {stack.map((s) => <span key={s} className="tag" style={{ color: 'var(--ink-2)' }}>{s}</span>)}
          </div>
        </div>
      </div>
    </article>);

}

function CynaPreview() {
  return (
    <div style={{
      background: 'linear-gradient(160deg, color-mix(in oklab, var(--ink) 96%, transparent) 0%, color-mix(in oklab, var(--ink) 85%, transparent) 100%)',
      padding: '32px',
      position: 'relative',
      overflow: 'hidden',
      minHeight: 420,
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      <div style={{
        width: 240, height: 460,
        background: 'var(--bg-elev)',
        border: '6px solid #15161A',
        borderRadius: 28,
        boxShadow: '0 30px 60px -20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04)',
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div style={{
          position: 'absolute', top: 6, left: '50%', transform: 'translateX(-50%)',
          width: 80, height: 18, borderRadius: 9, background: '#15161A', zIndex: 5
        }}></div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 18px 4px', fontSize: 9 }} className="mono">
          <span style={{ color: 'var(--ink-2)' }}>9:41</span>
          <span style={{ color: 'var(--ink-2)' }}>● ● ●</span>
        </div>
        <div style={{ padding: '14px 14px 10px', borderBottom: '1px solid var(--rule)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div className="mono" style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>CYNA</div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <span style={{ position: 'relative', display: 'inline-block' }}>
                <Ico.form width="13" height="13" style={{ color: 'var(--muted)' }} />
                <span style={{ position: 'absolute', top: -2, right: -2, width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }}></span>
              </span>
            </div>
          </div>
          <div style={{
            marginTop: 8,
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '6px 8px',
            background: 'color-mix(in oklab, var(--ink) 5%, var(--bg))',
            border: '1px solid var(--rule)',
            borderRadius: 6,
            fontSize: 10, color: 'var(--muted)'
          }}>
            <span>⌕</span>
            <span>Rechercher une solution…</span>
          </div>
        </div>
        <div style={{ padding: '12px 14px 0' }}>
          <div style={{
            borderRadius: 8, padding: '14px 12px',
            background: 'linear-gradient(135deg, oklch(0.30 0.10 256), oklch(0.20 0.12 256))',
            color: '#fff'
          }}>
            <div className="mono" style={{ fontSize: 8.5, opacity: 0.7, letterSpacing: '.1em', textTransform: 'uppercase' }}>SOC managé</div>
            <div style={{ fontSize: 13, fontWeight: 500, marginTop: 4, letterSpacing: '-0.01em' }}>Surveillance 24/7</div>
            <div style={{ fontSize: 10, opacity: 0.75, marginTop: 2 }}>À partir de 890 €/mois</div>
          </div>
        </div>
        <div style={{ padding: '10px 14px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
          {[
          { l: 'SOC', c: 'oklch(0.65 0.14 256)' },
          { l: 'EDR', c: 'oklch(0.65 0.14 145)' },
          { l: 'XDR', c: 'oklch(0.65 0.14 30)' }].
          map((c) =>
          <div key={c.l} style={{
            padding: '10px 6px',
            border: '1px solid var(--rule)',
            borderRadius: 6,
            textAlign: 'center',
            background: 'var(--bg-elev)'
          }}>
              <div style={{ width: 10, height: 10, borderRadius: 2, background: c.c, margin: '0 auto 5px' }}></div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ink)', fontWeight: 600 }}>{c.l}</div>
            </div>
          )}
        </div>
        <div style={{ padding: '6px 14px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
          ['Sentinel Pro', '129 €/mo', 'oklch(0.55 0.14 145)'],
          ['Endpoint Shield', '79 €/mo', 'oklch(0.55 0.16 256)']].
          map(([n, p, c]) =>
          <div key={n} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '8px 10px', border: '1px solid var(--rule)', borderRadius: 6
          }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 18, height: 18, borderRadius: 4, background: c }}></span>
                <span style={{ fontSize: 10.5, fontWeight: 500, color: 'var(--ink)' }}>{n}</span>
              </div>
              <span className="mono" style={{ fontSize: 9.5, color: 'var(--accent)', fontWeight: 600 }}>{p}</span>
            </div>
          )}
        </div>
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: '10px 14px 14px',
          borderTop: '1px solid var(--rule)',
          background: 'var(--bg-elev)',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4
        }}>
          {['Accueil', 'Catalogue', 'Panier', 'Compte'].map((l, i) =>
          <div key={l} style={{ textAlign: 'center', fontSize: 8.5, color: i === 0 ? 'var(--accent)' : 'var(--muted)', fontWeight: i === 0 ? 600 : 400 }}>
              <div style={{
              width: 14, height: 14, borderRadius: 3, margin: '0 auto 2px',
              background: i === 0 ? 'var(--accent)' : 'var(--muted-2)',
              opacity: i === 0 ? 1 : 0.4
            }}></div>
              {l}
            </div>
          )}
        </div>
      </div>
    </div>);

}

function ProjetCapgemini() {
  return (
    <article className="card card-hover" style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.15fr) minmax(0, 1fr)', minHeight: 460 }} className="proj-grid">
        {/* TEXT LEFT */}
        <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 9,
                background: 'color-mix(in oklab, var(--ink) 92%, transparent)', color: 'var(--bg)',
                display: 'grid', placeItems: 'center'
              }}>
                <Ico.cynaIcon width="18" height="18" />
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.08em' }}>Stage 2ᵉ année BTS · Capgemini</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>Mai → Juin 2023 · 6 semaines</div>
              </div>
            </div>
            <span className="tag"><span className="d"></span>Clinique La Croix du Sud</span>
          </header>

          <h3 style={{ margin: 0, fontSize: 'clamp(24px, 2.8vw, 34px)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            Une télécommande C++ <span className="serif" style={{ color: 'var(--muted)' }}>pour</span> des résidents âgés.
          </h3>

          <p style={{ margin: 0, color: 'var(--muted)', fontSize: 15, lineHeight: 1.65 }}>
            Six semaines chez Capgemini, à 19 ans. Le projet <strong style={{ color: 'var(--ink-2)', fontWeight: 500 }}>tourne encore aujourd'hui à la Clinique La Croix du Sud</strong>.
            UI pensée pour des seniors : gros boutons, pas de menus imbriqués. Back en C++, réseau configuré sur place.
          </p>

          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 4 }}>
            {[
            'Back-end C++',
            'Routeurs · LAN local',
            'UI senior-friendly',
            'Mise en prod sur site'].
            map((t) =>
            <li key={t} style={{ display: 'flex', gap: 8, fontSize: 13.5, color: 'var(--ink-2)' }}>
                <Ico.check width="15" height="15" style={{ color: 'var(--accent)', flex: '0 0 auto', marginTop: 2 }} />
                <span>{t}</span>
              </li>
            )}
          </ul>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 6 }}>
            {['C++', 'IoT', 'Réseau'].map((s) => <span key={s} className="tag" style={{ color: 'var(--ink-2)' }}>{s}</span>)}
          </div>
        </div>

        {/* IMAGE RIGHT */}
        <CapgeminiPreview />
      </div>
    </article>);

}

function CapgeminiPreview() {
  return (
    <div style={{
      borderLeft: '1px solid var(--rule)',
      background: 'linear-gradient(160deg, color-mix(in oklab, var(--ink) 96%, transparent) 0%, color-mix(in oklab, var(--ink) 85%, transparent) 100%)',
      padding: '32px',
      position: 'relative',
      overflow: 'hidden',
      minHeight: 420,
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      {/* Tablet bezel (portrait) */}
      <div style={{
        width: 230, height: 340,
        background: '#15161A',
        borderRadius: 22,
        padding: 10,
        boxShadow: '0 30px 60px -20px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05)',
        position: 'relative'
      }}>
        {/* Camera dot */}
        <div style={{
          position: 'absolute', top: 5, left: '50%', transform: 'translateX(-50%)',
          width: 4, height: 4, borderRadius: '50%', background: '#2a2b30', zIndex: 5
        }}></div>

        {/* Screen */}
        <div style={{
          width: '100%', height: '100%',
          background: '#FAFAF7',
          borderRadius: 14,
          padding: '14px 12px 12px',
          display: 'flex', flexDirection: 'column', gap: 8,
          color: '#0E0F0C'
        }}>
          {/* Channel display */}
          <div style={{
            background: '#0E0F0C',
            color: '#FAFAF7',
            padding: '12px 12px',
            borderRadius: 9,
            textAlign: 'center',
            position: 'relative'
          }}>
            <div className="mono" style={{ fontSize: 8.5, opacity: 0.55, letterSpacing: '.12em', textTransform: 'uppercase' }}>Chaîne en cours</div>
            <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1, marginTop: 2 }}>TF1</div>
            {/* Volume bar */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 8 }}>
              <span className="mono" style={{ fontSize: 8, opacity: 0.6 }}>VOL</span>
              <div style={{ flex: 1, height: 4, borderRadius: 2, background: 'rgba(255,255,255,.12)', overflow: 'hidden' }}>
                <div style={{ width: '55%', height: '100%', background: '#FAFAF7' }}></div>
              </div>
            </div>
          </div>

          {/* Big buttons grid */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, flex: 1 }}>
            {[
            { l: 'CHAÎNE +', bg: '#FFFFFF', fg: '#0E0F0C', border: true, icon: '▲' },
            { l: 'VOLUME +', bg: '#2A6FDB', fg: '#FFFFFF', icon: '+' },
            { l: 'CHAÎNE −', bg: '#FFFFFF', fg: '#0E0F0C', border: true, icon: '▼' },
            { l: 'VOLUME −', bg: '#2A6FDB', fg: '#FFFFFF', icon: '−' }].
            map((b) =>
            <div key={b.l} style={{
              background: b.bg, color: b.fg,
              border: b.border ? '1.5px solid #0E0F0C' : 'none',
              padding: '8px 6px',
              borderRadius: 8,
              textAlign: 'center',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1
            }}>
                <span style={{ fontSize: 16, fontWeight: 700, lineHeight: 1 }}>{b.icon}</span>
                <span className="mono" style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: '.06em' }}>{b.l}</span>
              </div>
            )}
          </div>

          {/* Bottom row: AIDE + ÉTEINDRE */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 6 }}>
            <div style={{
              background: '#E8A93A', color: '#0E0F0C',
              padding: '10px 4px',
              borderRadius: 8,
              fontSize: 9.5, fontWeight: 800, letterSpacing: '.05em',
              textAlign: 'center',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5
            }}>
              <span style={{ fontSize: 13 }}>?</span>
              <span>AIDE</span>
            </div>
            <div style={{
              background: '#D9543F', color: '#FFFFFF',
              padding: '10px 4px',
              borderRadius: 8,
              fontSize: 10, fontWeight: 800, letterSpacing: '.05em',
              textAlign: 'center',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5
            }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#fff', display: 'inline-block' }}></span>
              <span>ÉTEINDRE</span>
            </div>
          </div>
        </div>
      </div>

    </div>);

}

function Certifications() {
  const featured = {
    name: 'Microsoft Power Platform Fundamentals',
    org: 'Microsoft',
    code: 'PL-900',
    badge: 'assets/pl900-badge.png',
    tagline: 'La certification de référence pour le rôle vers lequel je m\'oriente.',
    keywords: ['Power Apps', 'Power Automate', 'Dataverse', 'Power BI']
  };
  const others = [
  {
    name: 'Professional Scrum Master 1', sub: 'Maîtrise du framework Scrum',
    org: 'Scrum.org', code: 'PSM 1', badge: 'assets/psm1-badge.png',
    keywords: ['Scrum', 'Backlog', 'Agilité']
  },
  {
    name: 'GitHub Foundations', sub: 'Fondamentaux Git & GitHub',
    org: 'GitHub', code: 'GHF', badge: 'assets/github-foundations-badge.png',
    keywords: ['Git workflow', 'Pull requests', 'Actions CI/CD', 'Sécurité repos']
  }];


  const Tooltip = ({ keywords }) =>
  <div className="cert-tip">
      <div className="cert-tip-inner">
        {keywords.map((k, i) => {
        const hide = k === 'Power BI' || k === 'Sécurité repos';
        const cls = hide ? 'mobile-hide' : '';
        return (
          <React.Fragment key={k}>
              {i > 0 && <span className={`cert-tip-sep ${cls}`}>·</span>}
              <span className={cls}>{k}</span>
            </React.Fragment>);

      })}
      </div>
      <span className="cert-tip-arrow"></span>
    </div>;


  return (
    <div style={{ marginTop: 36 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
        <h3 style={{ margin: 0, fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em' }}>
          <Ico.award width="16" height="16" style={{ verticalAlign: -2, marginRight: 8, color: 'var(--accent)' }} />
          Certifications
        </h3>
        <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>3 valides · survol pour les compétences</span>
      </div>

      {/* Featured: PL-900 */}
      <div className="card cert-feature" style={{
        padding: 0, overflow: 'visible', marginBottom: 12,
        borderColor: 'color-mix(in oklab, var(--accent) 35%, var(--rule))',
        position: 'relative'
      }}>
        <Tooltip keywords={featured.keywords} />
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 260px) minmax(0, 1fr)',
          minHeight: 200,
          overflow: 'hidden',
          borderRadius: 'inherit'
        }} className="cert-feature-grid">
          <div style={{
            background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--bg-elev)) 0%, var(--bg-elev) 65%)',
            padding: '28px 24px',
            position: 'relative',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            overflow: 'hidden',
            borderRight: '1px solid color-mix(in oklab, var(--accent) 22%, var(--rule))'
          }}>
            <div style={{
              position: 'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none',
              backgroundImage: 'radial-gradient(circle at 85% 15%, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 55%)'
            }} />
            <img
              src={featured.badge}
              alt="Microsoft Certified — Power Platform Fundamentals badge"
              style={{
                position: 'relative',
                width: '75%', maxWidth: 170,
                height: 'auto',
                filter: 'drop-shadow(0 8px 20px rgba(14,15,12,.15))'
              }} />
            
          </div>

          <div style={{ padding: '24px 26px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8 }}>
            <div style={{
              display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 6,
              padding: '4px 10px',
              background: 'color-mix(in oklab, var(--accent) 12%, var(--bg-elev))',
              border: '1px solid color-mix(in oklab, var(--accent) 30%, transparent)',
              borderRadius: 999,
              fontSize: 10, fontFamily: 'Geist Mono, ui-monospace, monospace',
              letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 700,
              color: 'var(--accent)',
              marginBottom: 4
            }}>
              <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)' }}></span>
              Certification clé
            </div>
            <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.08em', display: 'flex', gap: 8, alignItems: 'center' }}>
              <span>Microsoft · Power Platform</span>
              <span style={{ color: 'var(--muted-2)' }}>·</span>
              <span style={{ color: 'var(--accent)', fontWeight: 700 }}>{featured.code}</span>
            </div>
            <h4 style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em', lineHeight: 1.2 }}>
              {featured.name}
            </h4>
            <p style={{ margin: 0, color: 'var(--muted)', fontSize: 14, lineHeight: 1.55, maxWidth: '50ch' }}>
              {featured.tagline}
            </p>
          </div>
        </div>
      </div>

      {/* Others: smaller cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12 }}>
        {others.map((c) =>
        <div key={c.code} className="card cert-small" style={{
          padding: '16px 18px',
          display: 'flex', alignItems: 'center', gap: 14,
          position: 'relative',
          overflow: 'visible'
        }}>
            <Tooltip keywords={c.keywords} />
            <div style={{
            width: 56, height: 56, flex: '0 0 auto',
            display: 'grid', placeItems: 'center'
          }}>
              <img
              src={c.badge}
              alt={`${c.name} badge`}
              style={{
                width: '100%', height: '100%', objectFit: 'contain',
                filter: 'drop-shadow(0 4px 10px rgba(14,15,12,.12))'
              }} />
            
            </div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '.08em', marginBottom: 3 }}>
                {c.org} · {c.code}
              </div>
              <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{c.name}</div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{c.sub}</div>
            </div>
          </div>
        )}
      </div>

      <style>{`
        @media (max-width: 600px) {
          .cert-feature-grid { grid-template-columns: 1fr !important; }
        }
        /* tooltip — bubble that opens above each cert card */
        .cert-tip {
          position: absolute;
          bottom: calc(100% + 12px);
          left: 50%;
          transform: translateX(-50%) translateY(6px);
          opacity: 0;
          pointer-events: none;
          transition: opacity .2s ease, transform .2s ease;
          z-index: 20;
        }
        .cert-feature:hover .cert-tip,
        .cert-small:hover .cert-tip {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
        .cert-tip-inner {
          background: var(--bg-elev);
          color: var(--ink);
          padding: 10px 16px;
          border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--rule));
          border-radius: 999px;
          font-size: 12.5px;
          font-weight: 500;
          letter-spacing: -0.005em;
          white-space: nowrap;
          box-shadow: 0 14px 36px -12px rgba(14,15,12,.18), 0 2px 6px rgba(14,15,12,.06);
          display: flex; align-items: center; gap: 8px;
        }
        .cert-tip-sep {
          color: var(--muted-2);
        }
        .cert-tip-arrow {
          position: absolute;
          bottom: -5px; left: 50%;
          transform: translateX(-50%) rotate(45deg);
          width: 10px; height: 10px;
          background: var(--bg-elev);
          border-right: 1px solid color-mix(in oklab, var(--accent) 25%, var(--rule));
          border-bottom: 1px solid color-mix(in oklab, var(--accent) 25%, var(--rule));
        }
        @media (max-width: 600px) {
          .cert-tip-inner { white-space: normal; max-width: 240px; text-align: center; }
        }
      `}</style>
    </div>);

}

/* ─────────────────────────────────────────────────────────────────────────────
   PARCOURS
   ───────────────────────────────────────────────────────────────────────────── */
function Parcours() {
  const items = [
  { date: '2026–2028', title: 'Master Expert en Systèmes d\'Information', org: 'Institut Limayrac · Toulouse', state: 'en cours', primary: true,
    experience: {
      label: 'Alternance · 24 mois',
      title: 'La Banque Postale',
      role: 'Développeur Power Platform',
      detail: 'Power Apps, Power Automate, Dataverse — outils métier internes.'
    }
  },
  { date: '2025–2026', title: 'Bachelor en Systèmes d\'Information', org: 'Institut Limayrac · Toulouse', state: 'diplômé',
    experience: {
      label: 'Alternance · 12 mois',
      title: 'ZH Code & Consulting',
      role: 'Développeur Full Stack',
      detail: 'Application métier CYNA — React, Node.js, MongoDB, Scrum.'
    }
  },
  { date: '2022–2024', title: 'BTS Systèmes Numériques', org: 'Diplômé', state: 'diplômé',
    experience: {
      label: 'Stage 2ᵉ année · 6 semaines',
      title: 'Capgemini',
      role: 'Développeur logiciel',
      detail: 'IoT C++ pour la Clinique La Croix du Sud.'
    }
  }];


  return (
    <section className="section reveal band band-blue" id="parcours">
      <div className="section-hd">
        <span className="ix">§ 03 — Parcours & certifications</span>
        <h2 className="ti"></h2>
        <span className="meta">2022 → 2028</span>
      </div>

      <ol style={{ listStyle: 'none', margin: 0, padding: 0, position: 'relative' }}>
        {items.map((it, i) =>
        <li key={i} style={{
          display: 'grid',
          gridTemplateColumns: '140px 24px minmax(0, 1fr)',
          gap: 20,
          padding: '22px 0',
          borderTop: i === 0 ? 'none' : '1px solid var(--rule-2)',
          alignItems: 'flex-start'
        }} className="parcours-row">
            <div className="mono" style={{ fontSize: 12, color: it.primary ? 'var(--accent)' : 'var(--muted)', fontWeight: it.primary ? 600 : 400, paddingTop: 2 }}>
              {it.date}
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 6 }}>
              <span style={{
              width: 10, height: 10, borderRadius: '50%',
              background: it.primary ? 'var(--accent)' : 'var(--bg)',
              border: `2px solid ${it.primary ? 'var(--accent)' : 'var(--muted-2)'}`,
              boxShadow: it.primary ? '0 0 0 5px color-mix(in oklab, var(--accent) 15%, transparent)' : 'none'
            }}></span>
            </div>
            <div>
              <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: 10 }}>
                <h3 style={{ margin: 0, fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em' }}>{it.title}</h3>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '.06em' }}>· {it.state}</span>
              </div>
              <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 2 }}>{it.org}</div>
              {it.detail && <div style={{ fontSize: 13.5, color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.5 }}>{it.detail}</div>}

              {it.experience &&
            <div style={{
              marginTop: 14,
              padding: '12px 14px',
              borderLeft: it.primary ? '2px solid var(--accent)' : '2px solid var(--ink)',
              background: it.primary ?
              'color-mix(in oklab, var(--accent) 5%, var(--bg-elev))' :
              'color-mix(in oklab, var(--ink) 4%, var(--bg-elev))',
              borderRadius: '0 8px 8px 0'
            }}>
                  <div className="mono" style={{
                fontSize: 10,
                color: it.primary ? 'var(--accent)' : 'var(--ink)',
                textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600, marginBottom: 4
              }}>
                    {it.experience.label}
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: 8, marginBottom: 2 }}>
                    <span style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)' }}>{it.experience.title}</span>
                    <span style={{ fontSize: 12.5, color: 'var(--muted)' }}>· {it.experience.role}</span>
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>{it.experience.detail}</div>
                </div>
            }
            </div>
          </li>
        )}
      </ol>

      <Certifications />
    </section>);

}

/* ─────────────────────────────────────────────────────────────────────────────
   ME CONTACTER — replaces former "Hors du clavier"
   ──────────────────────────────────────────────────────────────────────────── */
function HorsDuClavier() {
  const EMAIL = 'isaac.hassani@limayrac.fr';
  const [copied, setCopied] = useState(false);

  const onCopy = async () => {
    try {
      await navigator.clipboard.writeText(EMAIL);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch (e) {
      // fallback
      const ta = document.createElement('textarea');
      ta.value = EMAIL;document.body.appendChild(ta);ta.select();
      try {document.execCommand('copy');setCopied(true);setTimeout(() => setCopied(false), 1800);} catch (_) {}
      document.body.removeChild(ta);
    }
  };

  return (
    <section className="section reveal" id="contact-cta">
      <div className="section-hd">
        <span className="ix">§ 04 — Me contacter</span>
        <h2 className="ti">Une question, un projet, <span className="serif" style={{ color: 'var(--muted)' }}>une opportunité&nbsp;?</span></h2>
        <span className="meta">Ouvert aux échanges</span>
      </div>

      <div className="card" style={{
        padding: 0,
        overflow: 'hidden',
        border: '1px solid color-mix(in oklab, var(--accent) 32%, var(--rule))',
        borderTop: '3px solid var(--accent)',
        background: 'linear-gradient(165deg, color-mix(in oklab, var(--accent) 16%, var(--bg-elev)) 0%, var(--bg-elev) 72%)'
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
          gap: 0
        }} className="contact-grid">

          {/* LEFT — pitch + email */}
          <div style={{ padding: 'clamp(28px, 4vw, 44px)', display: 'flex', flexDirection: 'column', gap: 20 }}>

            <p style={{ margin: 0, fontSize: 'clamp(17px, 1.7vw, 21px)', lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: '46ch' }}>
              Toujours disponible pour échanger autour d'un projet<span className="cta-break"> </span>ou d'<span style={{ whiteSpace: 'nowrap' }}>une opportunité</span>.
            </p>

            {/* Email row */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
              padding: '14px 16px',
              background: 'var(--bg-elev)',
              border: '1px solid var(--rule)',
              borderRadius: 12,
              boxShadow: '0 1px 0 rgba(14,15,12,.03)'
            }}>
              <Ico.mail width="18" height="18" style={{ color: 'var(--accent)', flex: '0 0 auto' }} />
              <a href={`mailto:${EMAIL}`} className="contact-email-link" style={{
                fontFamily: 'Geist Mono, ui-monospace, monospace',
                fontSize: 'clamp(12px, 3.4vw, 15px)',
                color: 'var(--ink)',
                textDecoration: 'none',
                fontWeight: 500,
                letterSpacing: '-0.005em',
                flex: 1, minWidth: 0,
                whiteSpace: 'nowrap'
              }}>{EMAIL}</a>
              <button
                onClick={onCopy}
                aria-label="Copier l'email"
                style={{
                  appearance: 'none', cursor: 'pointer',
                  border: '1px solid var(--rule)', background: 'var(--bg)',
                  width: 34, height: 34, borderRadius: 8,
                  display: 'grid', placeItems: 'center',
                  color: copied ? 'var(--accent)' : 'var(--muted)',
                  transition: 'color .2s ease, border-color .2s ease',
                  flex: '0 0 auto'
                }}>
                
                {copied ? <Ico.check width="15" height="15" /> : <Ico.copy width="14" height="14" />}
              </button>
            </div>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              <a className="btn btn-primary" href={`mailto:${EMAIL}?subject=Bonjour%20Isaac`} style={{ padding: '13px 20px', fontSize: 14.5 }}>
                <Ico.mail className="ico" />
                Envoyer un email
                <Ico.arrow className="ico arrow" />
              </a>
            </div>
          </div>

          {/* RIGHT — meta info */}
          <div style={{
            padding: 'clamp(28px, 4vw, 44px)',
            borderLeft: '1px solid color-mix(in oklab, var(--accent) 18%, var(--rule))',
            background: 'color-mix(in oklab, var(--bg-elev) 92%, transparent)',
            display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 22
          }} className="contact-side">
            <ContactMeta
              label="Localisation"
              value="Toulouse, France" />
            
            <ContactMeta
              label="Statut"
              value="En alternance"
              sub="La Banque Postale — 2026 → 2028" />
            
            <ContactMeta
              label="Disponibilité"
              value="Ouvert aux opportunités"
              sub="Post-Master · 2028" />
            
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .contact-grid { grid-template-columns: 1fr !important; }
          .contact-side { border-left: none !important; border-top: 1px solid color-mix(in oklab, var(--accent) 18%, var(--rule)); }
        }
      `}</style>
    </section>);

}

function ContactMeta({ label, value, sub }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '.08em', marginBottom: 4 }}>
        {label}
      </div>
      <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.005em' }}>
        {value}
      </div>
      {sub && <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 2 }}>{sub}</div>}
    </div>);

}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────────────────────────────────────── */
function Contact() {
  return (
    <section className="section reveal" id="contact" style={{ paddingTop: 56, paddingBottom: 40 }}>
      <div style={{
        paddingTop: 28,
        borderTop: '1px solid var(--rule)'
      }}>
        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.005em' }}>Isaac Hassani</div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 3, letterSpacing: '.04em' }}>
          © 2026 · Tous droits réservés
        </div>
      </div>
    </section>);

}

function ContactRow({ label, value, sub, onCopy, copied, link }) {
  const inner =
  <>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '.08em', marginBottom: 4 }}>{label}</div>
        <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.005em' }}>{value}</div>
        {sub && <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 2 }}>{sub}</div>}
      </div>
      {onCopy ?
    <button onClick={onCopy} style={{
      appearance: 'none', border: '1px solid var(--rule)', background: 'var(--bg)',
      width: 34, height: 34, borderRadius: 8, cursor: 'pointer',
      display: 'grid', placeItems: 'center', color: 'var(--muted)'
    }} aria-label={`Copier ${label}`}>
          {copied ? <Ico.check width="14" height="14" style={{ color: 'var(--accent)' }} /> : <Ico.copy width="14" height="14" />}
        </button> :
    link ?
    <span style={{ color: 'var(--muted)' }}>
          <Ico.chevron width="16" height="16" />
        </span> :
    null}
    </>;


  const baseStyle = {
    display: 'flex', alignItems: 'center', gap: 14,
    padding: '14px 18px'
  };

  if (link) {
    return <a href={link} target="_blank" rel="noopener" className="card card-hover" style={{ ...baseStyle, textDecoration: 'none', color: 'inherit' }}>{inner}</a>;
  }
  return <div className="card card-hover" style={baseStyle}>{inner}</div>;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FLOATING CTA — Calendly
   ⚠️  Remplace CALENDLY_URL par ton vrai lien Calendly (ex: https://calendly.com/isaac-hassani/30min)
   ───────────────────────────────────────────────────────────────────────────── */
const CALENDLY_URL = 'https://calendly.com/isaac-hassani/30min';

function FloatingCTA() {
  return (
    <a
      href={CALENDLY_URL}
      target="_blank"
      rel="noopener noreferrer"
      className="fab-calendly"
      aria-label="Discuter sur Calendly"
    >
      <Ico.calendar width="18" height="18" />
      <span className="fab-calendly-label">Discuter</span>
    </a>);

}

/* ─────────────────────────────────────────────────────────────────────────────
   Expose
   ───────────────────────────────────────────────────────────────────────────── */
Object.assign(window, { Nav, Hero, Pivot, Projets, Parcours, HorsDuClavier, Contact, FloatingCTA, Ico, CodeToLowCode });