// sections-soul.jsx — l'âme burkinabé : Héritage, Témoignages, Contraste Avant/Avec.
// Ajouté en 2026-05 pour ancrer la landing dans la culture du pays au-delà
// du visuel générique africain. Voir Correction en cours.md section 14.
const { useState: ssUseState, useEffect: ssUseEffect, useRef: ssUseRef } = React;

// ---------- Drapeau du Burkina Faso — bande défilante horizontale infinie ----------
// Le drapeau officiel : 2 bandes horizontales (rouge en haut, vert en bas)
// avec une étoile jaune à 5 branches au centre. Reproduit en SVG comme une
// banderole de stade qui défile à l'infini de droite à gauche.
//
// Géométrie d'1 unité de drapeau : 240px × hauteur. Étoile au centre vertical.
// On en aligne 8 pour boucler sans couture grâce à translateX(-50%).
function FasoDanfani({ height = 36 }) {
  const parallaxRef = useParallax(0.18);
  const flagWidth = 240;
  // Une unité = un drapeau du Burkina avec son étoile centrale
  const flagUnit = (
    <svg
      width={flagWidth}
      height={height}
      viewBox={`0 0 ${flagWidth} 36`}
      preserveAspectRatio="none"
      style={{ flexShrink: 0, display: "block" }}
    >
      {/* Bande rouge supérieure */}
      <rect x="0" y="0"  width={flagWidth} height="18" fill="#dc2626"/>
      {/* Bande verte inférieure */}
      <rect x="0" y="18" width={flagWidth} height="18" fill="#16a34a"/>
      {/* Étoile jaune à 5 branches, centrée — coordonnées calculées pour
          que la pointe haute soit à y=8, pointe basse à y=28, centre à y=18 */}
      <path
        d={`
          M ${flagWidth / 2} 8
          L ${flagWidth / 2 + 3} 14
          L ${flagWidth / 2 + 10} 14
          L ${flagWidth / 2 + 4.5} 18
          L ${flagWidth / 2 + 7} 26
          L ${flagWidth / 2} 21
          L ${flagWidth / 2 - 7} 26
          L ${flagWidth / 2 - 4.5} 18
          L ${flagWidth / 2 - 10} 14
          L ${flagWidth / 2 - 3} 14
          Z
        `}
        fill="#fcd116"
      />
      {/* Très fine bordure entre rouge et vert pour la lisibilité */}
      <rect x="0" y="17.7" width={flagWidth} height="0.6" fill="rgba(0,0,0,0.18)"/>
    </svg>
  );

  // 8 drapeaux côte-à-côte. La track fait 8×240=1920px. On translateX(-50%)
  // (=-960px=4 drapeaux) pour boucler sur les 4 drapeaux suivants identiques.
  return (
    <div ref={parallaxRef} className="ft-danfani" aria-hidden style={{ height, willChange: "transform" }}>
      <div className="ft-danfani-track">
        {flagUnit}{flagUnit}{flagUnit}{flagUnit}
        {flagUnit}{flagUnit}{flagUnit}{flagUnit}
      </div>
    </div>
  );
}

// ---------- HERITAGE — Monument des Héros + citation Sankara ----------
function Heritage({ t }) {
  // Détection du thème pour basculer la photo jour/nuit du monument
  const [isLight, setIsLight] = ssUseState(() =>
    typeof document !== "undefined" && document.documentElement.classList.contains("light"),
  );
  ssUseEffect(() => {
    if (typeof document === "undefined") return;
    const el = document.documentElement;
    const obs = new MutationObserver(() => setIsLight(el.classList.contains("light")));
    obs.observe(el, { attributes: true, attributeFilter: ["class"] });
    return () => obs.disconnect();
  }, []);
  const monumentSrc = isLight ? "assets/monument-day.png" : "assets/monument-night.png";
  const monumentParallax = useParallax(0.08);

  return (
    <section id="heritage" className="section snap heritage-section">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <FlagDot size={8}/>
            <span>{t.heritage.eyebrow}</span>
          </div>
        </Reveal>

        <div className="heritage-grid">
          <div className="heritage-text">
            <ScrollTitle className="h2" style={{ marginBottom: 24 }}>{t.heritage.title}</ScrollTitle>
            <Reveal delay={200} variant="mask">
              <p className="lead">{t.heritage.sub}</p>
            </Reveal>

            <Reveal delay={400}>
              <figure className="sankara-quote">
                <div className="sankara-portrait">
                  <img src="assets/sankara.jpg" alt="Thomas Sankara" loading="lazy"/>
                </div>
                <div className="sankara-words">
                  <blockquote>{t.heritage.sankaraQuote}</blockquote>
                  <figcaption>{t.heritage.sankaraAttribution}</figcaption>
                </div>
              </figure>
            </Reveal>

            <Reveal delay={600}>
              <p className="heritage-bridge">{t.heritage.bridgeText}</p>
            </Reveal>
          </div>

          <div className="heritage-visual">
            <Reveal delay={300} variant="scale">
              <figure className="monument-frame">
                <img ref={monumentParallax} src={monumentSrc} alt={t.heritage.monumentLabel} loading="lazy"/>
                <figcaption>
                  <span className="monument-label">{t.heritage.monumentLabel}</span>
                  <span className="monument-city">{t.heritage.monumentCity}</span>
                </figcaption>
              </figure>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// Portrait stylisé Sankara — silhouette + béret rouge + écharpe Faso Danfani.
// Approche illustrative : honore l'icône sans dépendre d'une photo aux droits
// incertains. À remplacer par une vraie photo si l'utilisateur en fournit une.
function SankaraPortrait() {
  return (
    <svg viewBox="0 0 120 120" width="80" height="80" role="img" aria-label="Thomas Sankara">
      <defs>
        <radialGradient id="sk-bg" cx="0.5" cy="0.4">
          <stop offset="0" stopColor="#3a2818"/>
          <stop offset="1" stopColor="#0b0a08"/>
        </radialGradient>
        <linearGradient id="sk-skin" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#7c4f2e"/>
          <stop offset="1" stopColor="#3a1f0e"/>
        </linearGradient>
        <linearGradient id="sk-beret" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ef4444"/>
          <stop offset="1" stopColor="#991b1b"/>
        </linearGradient>
      </defs>
      <circle cx="60" cy="60" r="58" fill="url(#sk-bg)"/>
      {/* Halo doré */}
      <circle cx="60" cy="60" r="50" fill="none" stroke="#fbbf24" strokeWidth="0.5" opacity="0.4"/>
      {/* Cou + épaules */}
      <path d="M 38 110 Q 40 88 60 88 Q 80 88 82 110 Z" fill="#1a1410"/>
      {/* Faso danfani écharpe sur l'épaule */}
      <g opacity="0.95">
        <rect x="44" y="92" width="32" height="3" fill="#dc2626"/>
        <rect x="44" y="95" width="32" height="2" fill="#fbbf24"/>
        <rect x="44" y="97" width="32" height="2" fill="#16a34a"/>
        <rect x="44" y="99" width="32" height="1.5" fill="#f4ece0"/>
      </g>
      {/* Visage — silhouette sobre */}
      <ellipse cx="60" cy="62" rx="20" ry="24" fill="url(#sk-skin)"/>
      {/* Yeux */}
      <ellipse cx="52" cy="60" rx="2.2" ry="1.4" fill="#0b0a08"/>
      <ellipse cx="68" cy="60" rx="2.2" ry="1.4" fill="#0b0a08"/>
      {/* Sourcils déterminés */}
      <path d="M 49 55 L 56 54" stroke="#0b0a08" strokeWidth="1.2" strokeLinecap="round"/>
      <path d="M 64 54 L 71 55" stroke="#0b0a08" strokeWidth="1.2" strokeLinecap="round"/>
      {/* Nez */}
      <path d="M 60 62 L 58 70 L 62 70 Z" fill="#3a1f0e" opacity="0.5"/>
      {/* Lèvres */}
      <path d="M 54 76 Q 60 79 66 76" stroke="#1a1410" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
      {/* Béret rouge — signature visuelle de Sankara */}
      <path d="M 38 50 Q 40 32 60 32 Q 82 32 82 50 Q 82 52 78 52 L 42 52 Q 38 52 38 50 Z" fill="url(#sk-beret)"/>
      <ellipse cx="60" cy="46" rx="22" ry="6" fill="#7f1d1d" opacity="0.6"/>
      {/* Étoile sur béret — symbole révolutionnaire */}
      <path d="M 50 42 L 51 44.5 L 53.5 44.5 L 51.5 46 L 52.3 48.5 L 50 47 L 47.7 48.5 L 48.5 46 L 46.5 44.5 L 49 44.5 Z" fill="#fbbf24"/>
    </svg>
  );
}

// ---------- VOICES — 3 témoignages humains ----------
function Voices({ t }) {
  return (
    <section id="voices" className="section voices-section">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <FlagDot size={8}/>
            <span>{t.voices.eyebrow}</span>
          </div>
        </Reveal>
        <ScrollTitle className="h2" style={{ marginBottom: 16 }}>{t.voices.title}</ScrollTitle>
        <Reveal delay={200}>
          <p className="lead" style={{ marginBottom: 56, maxWidth: "60ch" }}>{t.voices.sub}</p>
        </Reveal>

        <div className="voices-grid">
          {t.voices.list.map((v, i) => (
            <Reveal key={i} delay={300 + i * 140} variant="blur">
              <TiltCard max={6} scale={1.03}>
                <article className="voice-card" data-hover>
                  <div className="voice-head">
                    <div className="voice-avatar" style={{
                      background: `linear-gradient(135deg, ${v.avatarColor}, ${v.avatarColor}66)`,
                    }}>
                      <span>{v.name.charAt(0)}</span>
                    </div>
                    <div>
                      <h3 className="voice-name">{v.name}</h3>
                      <p className="voice-role">{v.role}</p>
                    </div>
                  </div>
                  <blockquote className="voice-quote">{v.quote}</blockquote>
                  <div className="voice-meta">
                    <span className="voice-trip">
                      <span className="voice-trip-dot"/>
                      {v.trip}
                    </span>
                    <span className="voice-freq">{v.frequency}</span>
                  </div>
                </article>
              </TiltCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- CONTRAST — Avant FasoTravel / Avec FasoTravel ----------
function Contrast({ t }) {
  return (
    <section id="contrast" className="section contrast-section">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <FlagDot size={8}/>
            <span>{t.contrast.eyebrow}</span>
          </div>
        </Reveal>
        <ScrollTitle className="h2" style={{ marginBottom: 56 }}>{t.contrast.title}</ScrollTitle>

        <div className="contrast-grid">
          {/* AVANT — sombre, douleur */}
          <Reveal delay={200}>
            <div className="contrast-col contrast-before">
              <header className="contrast-header">
                <span className="contrast-label">{t.contrast.before.label}</span>
              </header>
              <ul className="contrast-list">
                {t.contrast.before.items.map((it, i) => (
                  <li key={i} className="contrast-item">
                    <span className="contrast-icon">{it.icon}</span>
                    <div>
                      <div className="contrast-title">{it.t}</div>
                      <div className="contrast-desc">{it.d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>

          {/* Connector vertical Faso Danfani au milieu */}
          <div className="contrast-divider" aria-hidden>
            <div className="contrast-divider-line"/>
            <div className="contrast-divider-arrow">→</div>
          </div>

          {/* AVEC — clair, solution */}
          <Reveal delay={350}>
            <div className="contrast-col contrast-after">
              <header className="contrast-header">
                <span className="contrast-label">{t.contrast.with.label}</span>
              </header>
              <ul className="contrast-list">
                {t.contrast.with.items.map((it, i) => (
                  <li key={i} className="contrast-item">
                    <span className="contrast-icon">{it.icon}</span>
                    <div>
                      <div className="contrast-title">{it.t}</div>
                      <div className="contrast-desc">{it.d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Heritage, Voices, Contrast, FasoDanfani, SankaraPortrait });