// ============================================================================
// MOVA RELOCATION — Sections 1 : Hero, Conviction, Personas
// ============================================================================

// ----------------------------------------------------------------------------
// 1. HERO
// ----------------------------------------------------------------------------
function HeroSection({ scrollRef }) {
  const t = useT();
  const y = useScrollY(scrollRef);
  const parallax = Math.min(y * 0.35, 220);

  // Animation lettre par lettre du mot MOVA au mount
  const letters = "MOVA".split("");
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    const to = setTimeout(() => setMounted(true), 120);
    return () => clearTimeout(to);
  }, []);

  return (
    <section
      id="top"
      data-screen-label="01 Hero"
      style={{
        position: "relative",
        minHeight: "100vh",
        width: "100%",
        overflow: "hidden",
        color: "var(--mova-cream)",
        display: "flex",
        flexDirection: "column"
      }}>
      
      <div
        style={{
          position: "absolute",
          top: -260,
          left: 0,
          right: 0,
          bottom: -260,
          transform: `translateY(${parallax}px) scale(${1 + parallax / 4000})`,
          transition: "transform 80ms linear",
          willChange: "transform"
        }}>
        
        <HeroVisual />
      </div>

      {/* Cadre éditorial */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: "20px",
          border: "0.5px solid rgba(184,148,76,0.18)",
          pointerEvents: "none"
        }} />
      

      {/* Contenu central */}
      <div
        style={{
          position: "relative",
          zIndex: 2,
          flex: 1,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          padding: "120px 24px 200px", fontFamily: "\"Cormorant Garamond\""
        }}>
        
        <h1
          style={{
            fontFamily: "var(--font-sans)",
            fontWeight: 200,
            fontSize: "clamp(64px, 12vw, 140px)",
            letterSpacing: "0.15em",
            lineHeight: 1,
            margin: 0,
            display: "flex",
            gap: "0.02em"
          }}>
          
          {letters.map((l, i) =>
          <span
            key={i}
            style={{
              display: "inline-block",
              opacity: mounted ? 1 : 0,
              transform: `translateY(${mounted ? 0 : 24}px)`,
              transition: `opacity 800ms cubic-bezier(0.22,0.61,0.36,1) ${i * 90}ms, transform 800ms cubic-bezier(0.22,0.61,0.36,1) ${i * 90}ms`, fontFamily: "\"Cormorant Garamond\""
            }}>
            
              {l}
            </span>
          )}
        </h1>

        {/* Trait or — entre MOVA et RELOCATION */}
        <div
          style={{
            height: 0.5,
            width: 60,
            background: "var(--mova-gold)",
            margin: "28px 0 22px",
            transformOrigin: "center",
            transform: `scaleX(${mounted ? 1 : 0})`,
            transition: "transform 900ms ease 480ms"
          }} />
        

        <div
          style={{
            fontFamily: "var(--font-sans)",
            fontWeight: 300,
            fontSize: "clamp(13px, 1.4vw, 16px)",
            letterSpacing: "0.55em",

            paddingLeft: "0.55em",
            opacity: mounted ? 1 : 0,
            transform: `translateY(${mounted ? 0 : 16}px)`,
            transition:
            "opacity 800ms ease 620ms, transform 800ms ease 620ms", color: "rgb(177, 142, 71)"
          }}>
          
          RELOCATION
        </div>

        <Reveal delay={900} style={{ marginTop: 56 }}>
          <p
            style={{
              fontFamily: "var(--font-serif)",
              fontStyle: "italic",
              fontWeight: 300,
              fontSize: "clamp(28px, 3.4vw, 44px)",
              letterSpacing: "0.01em",
              margin: 0,
              lineHeight: 1.2
            }}>
            
            {t("hero.tagline1")}
          </p>
        </Reveal>
        <Reveal delay={1100}>
          <p
            style={{
              fontFamily: "var(--font-serif)",
              fontWeight: 400,
              fontSize: "clamp(28px, 3.4vw, 44px)",
              margin: "4px 0 0",
              color: "var(--mova-gold)",
              lineHeight: 1.2
            }}>
            
            {t("hero.tagline2")}
          </p>
        </Reveal>

        <Reveal delay={1300}>
          <p
            style={{
              maxWidth: 620,
              margin: "40px auto 0",
              fontFamily: "var(--font-sans)",
              fontWeight: 300,
              fontSize: "clamp(14px, 1.1vw, 16px)",
              lineHeight: 1.8,
              color: "rgba(245,240,230,0.78)",
              letterSpacing: "0.02em",
              textWrap: "pretty"
            }}>
            
            {t("hero.description")}
          </p>
        </Reveal>

        <Reveal delay={1500} style={{ marginTop: 40 }}>
          <PillButton href="#contact" external={false} variant="ghost" size="md">
            {t("hero.cta")}
          </PillButton>
        </Reveal>
      </div>

      {/* Scroll indicator */}
      <div
        style={{
          position: "absolute",
          bottom: 36,
          left: "50%",
          transform: "translateX(-50%)",
          zIndex: 3,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 16,
          opacity: mounted ? 0.78 : 0,
          transition: "opacity 900ms ease 1600ms"
        }}>
        
        <span
          style={{
            fontFamily: "var(--font-sans)",
            fontSize: 10,
            letterSpacing: "0.42em",
            color: "var(--mova-cream)"
          }}>
          
          {t("hero.scroll")}
        </span>
        <div
          style={{
            width: 0.5,
            height: 60,
            background:
            "linear-gradient(180deg, transparent 0%, var(--mova-gold) 50%, transparent 100%)",
            backgroundSize: "100% 200%",
            animation: "movaScrollLine 2.4s ease-in-out infinite"
          }} />
        
      </div>

      {/* Meta corner */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          top: 48,
          right: 56,
          fontFamily: "var(--font-sans)",
          fontWeight: 300,
          fontSize: 10,
          letterSpacing: "0.42em",
          color: "rgba(245,240,230,0.5)",
          zIndex: 3
        }}
        className="mova-hero-meta">
        
        ÉD. 01 — PARIS · EU
      </div>
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          bottom: 48,
          left: 56,
          fontFamily: "var(--font-sans)",
          fontWeight: 300,
          fontSize: 10,
          letterSpacing: "0.42em",
          color: "rgba(245,240,230,0.5)",
          zIndex: 3
        }}
        className="mova-hero-meta">
        
        EST. MMXXV
      </div>
    </section>);

}

// ----------------------------------------------------------------------------
// 2. NOTRE CONVICTION
// ----------------------------------------------------------------------------
function ConvictionSection() {
  const t = useT();
  const [ref, inView] = useInView({ threshold: 0.25 });
  // Texte fractionné par lignes intentionnelles
  const lines = [
  { text: t("conviction.line1"), style: { color: "var(--mova-cream)" } },
  { text: t("conviction.line2"), style: { color: "var(--mova-cream)" } },
  { text: t("conviction.line3"), style: { color: "var(--mova-gold)", fontStyle: "italic" } },
  { text: t("conviction.line4"), style: { color: "var(--mova-cream)" } }];

  return (
    <section
      ref={ref}
      data-screen-label="02 Conviction"
      style={{
        minHeight: "100vh",
        background: "var(--mova-black)",
        color: "var(--mova-cream)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "140px 32px",
        position: "relative",
        textAlign: "center"
      }}>
      
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: "32px",
          border: "0.5px solid rgba(184,148,76,0.12)",
          pointerEvents: "none"
        }} />
      
      <div style={{ maxWidth: 1100 }}>
        <Eyebrow center>{t("conviction.eyebrow")}</Eyebrow>
        <h2
          style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 300,
            fontSize: "clamp(36px, 5.2vw, 72px)",
            lineHeight: 1.25,
            margin: 0,
            textWrap: "balance"
          }}>
          
          {lines.map((l, i) =>
          <span
            key={i}
            style={{
              display: "inline-block",
              margin: "0 0.18em",
              opacity: inView ? 1 : 0,
              transform: `translateY(${inView ? 0 : 30}px)`,
              transition: `opacity 900ms cubic-bezier(0.22,0.61,0.36,1) ${i * 200}ms, transform 900ms cubic-bezier(0.22,0.61,0.36,1) ${i * 200}ms`,
              ...l.style
            }}>
            
              {l.text}
            </span>
          )}
        </h2>
        <Reveal delay={1000}>
          <div
            style={{
              height: 0.5,
              width: 60,
              background: "var(--mova-gold)",
              margin: "60px auto 0"
            }} />
          
        </Reveal>
      </div>
    </section>);

}

// ----------------------------------------------------------------------------
// SplitSection — layout éditorial "magazine" : image bleed + détail secondaire
// ----------------------------------------------------------------------------
function SplitSection({
  id,
  label,
  eyebrow,
  title,
  body,
  pull = null,
  reverse = false,
  visual,
  detailSrc = null,
  detailCaption = null,
  indexLabel = null,
  background = "var(--mova-black)",
  color = "var(--mova-cream)"
}) {
  const isCream = color !== "var(--mova-cream)";
  const muted = color === "var(--mova-cream)" ? "rgba(245,240,230,0.78)" : "var(--mova-muted)";
  const subtle = color === "var(--mova-cream)" ? "rgba(245,240,230,0.5)" : "rgba(10,10,10,0.5)";

  return (
    <section
      id={id}
      data-screen-label={label}
      style={{
        background,
        color,
        padding: "0",
        position: "relative",
        overflow: "hidden"
      }}>
      
      <div
        className="mova-editorial"
        data-reverse={reverse ? "1" : "0"}
        style={{
          display: "grid",
          gridTemplateColumns: reverse ? "1fr 1.05fr" : "1.05fr 1fr",
          minHeight: "min(820px, 92vh)",
          alignItems: "stretch"
        }}>
        
        {/* Bloc IMAGE — full-bleed côté section */}
        <div
          className="mova-editorial-visual"
          style={{
            order: reverse ? 2 : 1,
            position: "relative",
            minHeight: 560
          }}>
          
          {/* Visuel principal — full-bleed */}
          <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
            {visual}
          </div>

          {/* Numéro géant en filigrane */}
          {indexLabel &&
          <div
            aria-hidden="true"
            style={{
              position: "absolute",
              top: 32,
              [reverse ? "right" : "left"]: 32,
              fontFamily: "var(--font-serif)",
              fontStyle: "italic",
              fontWeight: 300,
              fontSize: "clamp(80px, 9vw, 140px)",
              lineHeight: 0.9,
              color: "var(--mova-cream)",
              opacity: 0.92,
              letterSpacing: "-0.02em",
              pointerEvents: "none",
              textShadow: "0 4px 24px rgba(0,0,0,0.5)",
              zIndex: 2
            }}>
            
              {indexLabel}
            </div>
          }

          {/* Détail secondaire — overlay tableau magazine */}
          {detailSrc &&
          <figure
            className="mova-editorial-detail"
            style={{
              position: "absolute",
              bottom: -40,
              [reverse ? "left" : "right"]: -40,
              width: "min(220px, 32%)",
              margin: 0,
              zIndex: 3,
              border: "8px solid var(--mova-cream)",
              boxShadow: "0 30px 60px -20px rgba(0,0,0,0.55)",
              background: "var(--mova-cream)"
            }}>
            
              <img
              src={detailSrc}
              alt=""
              aria-hidden="true"
              style={{
                width: "100%",
                aspectRatio: "4/5",
                objectFit: "cover",
                display: "block",
                filter: "saturate(0.9) contrast(1.04)"
              }} />
            
              {detailCaption &&
            <figcaption
              style={{
                fontFamily: "ui-monospace, Menlo, monospace",
                fontSize: 9,
                letterSpacing: "0.25em",
                color: "var(--mova-black)",
                textTransform: "uppercase",
                padding: "10px 4px 2px",
                textAlign: "center"
              }}>
              
                  {detailCaption}
                </figcaption>
            }
            </figure>
          }
        </div>

        {/* Bloc TEXTE */}
        <div
          className="mova-editorial-text"
          style={{
            order: reverse ? 1 : 2,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            padding: "120px 88px",
            position: "relative"
          }}>
          
          {/* Tag rotatif marginal */}
          {indexLabel &&
          <div
            aria-hidden="true"
            className="mova-editorial-tag"
            style={{
              position: "absolute",
              top: 80,
              [reverse ? "left" : "right"]: 32,
              writingMode: "vertical-rl",
              transform: "rotate(180deg)",
              fontFamily: "var(--font-sans)",
              fontSize: 10,
              letterSpacing: "0.5em",
              color: subtle,
              textTransform: "uppercase"
            }}>
            
              {indexLabel} — Pour qui · 03
            </div>
          }

          <Reveal delay={120}>
            <Eyebrow>{eyebrow}</Eyebrow>
          </Reveal>
          <Reveal delay={220}>
            <h2
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 400,
                fontSize: "clamp(32px, 3.6vw, 52px)",
                lineHeight: 1.15,
                margin: 0,
                color,
                textWrap: "balance",
                maxWidth: 580
              }}>
              
              {title}
            </h2>
          </Reveal>
          <Reveal delay={320}>
            <div
              style={{
                height: 0.5,
                width: 56,
                background: "var(--mova-gold)",
                margin: "32px 0"
              }} />
            
          </Reveal>
          <Reveal delay={400}>
            <p
              style={{
                margin: 0,
                fontFamily: "var(--font-sans)",
                fontWeight: 300,
                fontSize: 17,
                lineHeight: 1.85,
                color: muted,
                maxWidth: 520,
                textWrap: "pretty"
              }}>
              
              {body}
            </p>
          </Reveal>
          {pull &&
          <Reveal delay={520}>
              <blockquote
              style={{
                marginTop: 48,
                paddingLeft: 24,
                borderLeft: "0.5px solid var(--mova-gold)",
                fontFamily: "var(--font-serif)",
                fontStyle: "italic",
                fontWeight: 300,
                fontSize: 17,
                lineHeight: 1.7,
                color: color === "var(--mova-cream)" ? "rgba(245,240,230,0.85)" : "var(--mova-black)",
                maxWidth: 520,
                textWrap: "pretty"
              }}>
              
                "{pull}"
              </blockquote>
            </Reveal>
          }
        </div>
      </div>
    </section>);

}

// ----------------------------------------------------------------------------
// Visuels personas — placeholders stylisés
// ----------------------------------------------------------------------------
function AthleteVisual() {
  return (
    <PersonaImage
      src="https://images.unsplash.com/photo-1518604666860-9ed391f76460?w=1400&q=80&auto=format&fit=crop"
      alt="Tribunes vides d'un stade"
      tint="warm" />);


}

function DirigeantVisual() {
  return (
    <PersonaImage
      src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1400&q=80&auto=format&fit=crop"
      alt="Bureau premium au coucher du soleil"
      tint="warm" />);


}

function FamilleVisual() {
  return (
    <PersonaImage
      src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1400&q=80&auto=format&fit=crop"
      alt="Intérieur luxueux, vaste et épuré aux tons chauds"
      tint="warm" />);


}

// Composant générique réutilisé par les visuels personas
function PersonaImage({ src, alt, caption, tint = "warm", captionSide = "left" }) {
  const overlay =
  tint === "warm" ?
  "linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.45) 100%)" :
  "linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.35) 100%)";
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        background: "#15120c",
        overflow: "hidden"
      }}>
      
      <img
        src={src}
        alt={alt}
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          filter: "saturate(0.88) contrast(1.04)",
          display: "block"
        }} />
      
      <div style={{ position: "absolute", inset: 0, background: overlay }} />
      {caption &&
      <div
        style={{
          position: "absolute",
          [captionSide]: 24,
          top: 24,
          fontFamily: "ui-monospace, Menlo, monospace",
          fontSize: 10,
          letterSpacing: "0.22em",
          color: "rgba(245,240,230,0.7)",
          textTransform: "uppercase",
          padding: "8px 12px",
          background: "rgba(10,10,10,0.55)",
          backdropFilter: "blur(4px)",
          WebkitBackdropFilter: "blur(4px)",
          maxWidth: "calc(100% - 48px)",
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "ellipsis"
        }}>
        
          {caption}
        </div>
      }
    </div>);

}

Object.assign(window, {
  HeroSection,
  ConvictionSection,
  SplitSection,
  AthleteVisual,
  DirigeantVisual,
  FamilleVisual
});