// HeroV2 — restructured for launch.
// The TAGLINE leads (it's a new brand; nobody knows Ondion yet).
// The "bottleneck" hook becomes a supporting thesis below.
function HeroV2({ taglineColor = "iridescent" }) {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile } = window.useBreakpoint();
  const [vw, setVw] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const h = () => setVw(window.innerWidth);
    window.addEventListener('resize', h, { passive: true });
    return () => window.removeEventListener('resize', h);
  }, []);
  // Blob switches to top-right corner at 1024px — same breakpoint SideRail disappears
  const isBlobMobile = vw < 1024;
  const isCompact = !isBlobMobile && vw < 1440;
  const isTabletLayout = vw >= 768 && vw < 1024;
  // At 2400px+ blob is physically separated from text (1200px gap) — mask not needed
  const isWide = vw >= 2400;

  // Color treatment for the big tagline
  const colorPresets = {
    iridescent: {
      className: "grad-iridescent",
      style: {},
    },
    platinum: {
      className: "grad-silver-gold",
      style: {},
    },
    silver: {
      className: "",
      style: {
        background: "linear-gradient(135deg, #ffffff 0%, #d8dde8 30%, #b8c0d0 60%, #8e8ea8 100%)",
        WebkitBackgroundClip: "text", backgroundClip: "text",
        WebkitTextFillColor: "transparent", color: "transparent",
      },
    },
    mono: {
      className: "",
      style: { color: "#ffffff" },
    },
  };
  const preset = colorPresets[taglineColor] || colorPresets.iridescent;

  const en = {
    eyebrow: "Ondion",
    hook: "Most companies don't have an AI problem.",
    hookAccent: "They have unclear processes, siloed knowledge, too many tools — and no clear structure yet for how AI can be used.",
    desc: "That structure is what I build for you.",
    practiceLabel: "Practice",
    practiceValue: "AI Systems Architecture",
    readOn: "How I work",
    forLabel: "For",
    forValue: "Creative & live production\nSMEs · DE · EN",
  };

  const de = {
    eyebrow: "Ondion",
    hook: "Die meisten Unternehmen haben kein KI-Problem.",
    hookAccent: "Sie haben unklare Prozesse, isoliertes Wissen, zu viele Tools — und noch keine klare Struktur dafür, wie KI sinnvoll eingesetzt werden kann.",
    desc: "Diese Struktur schaffe ich für Sie.",
    practiceLabel: "Praxis",
    practiceValue: "KI-Systemarchitektur",
    readOn: "Wie ich arbeite",
    forLabel: "Für",
    forValue: "Kreativ- & Eventwirtschaft\nKMU · DE · EN",
  };

  const t = lang === 'de' ? de : en;

  return (
    <section id="top" style={{
      position: "relative", overflow: "hidden",
      minHeight: "100vh",
      padding: isMobile ? "100px 24px 64px" : isTabletLayout ? "100px 40px 80px 40px" : isCompact ? "120px 80px 80px 120px" : "160px 160px 80px 240px",
      display: "flex", flexDirection: "column",
      borderBottom: "1px solid #2d2d38",
    }}>
      {/* Violet halo glow behind blob */}
      <div aria-hidden="true" style={{
        position: "absolute",
        right: isBlobMobile ? "-140px" : isCompact ? "-180px" : "-100px",
        top: isBlobMobile ? "-60px" : "50%",
        transform: isBlobMobile ? "none" : "translateY(-50%)",
        width: isBlobMobile ? "480px" : isCompact ? "720px" : "1100px",
        height: isBlobMobile ? "480px" : isCompact ? "720px" : "1100px",
        background: "radial-gradient(circle, rgba(92,53,204,0.28) 0%, rgba(92,53,204,0.10) 38%, transparent 68%)",
        borderRadius: "50%",
        pointerEvents: "none",
        zIndex: 0,
        WebkitMaskImage: isBlobMobile || isWide ? "none" : isCompact ? "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 40%, black 60%)" : "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.7) 40%, black 58%)",
        maskImage: isBlobMobile || isWide ? "none" : isCompact ? "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 40%, black 60%)" : "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.7) 40%, black 58%)",
      }} />

      {/* Blob — top-right below 1024px (matches SideRail breakpoint); compact 1024–1440px; full above */}
      <img src={(window.__resources && window.__resources.blob01Upscale) || "assets/blob01_upscale.png"} alt="" aria-hidden="true" style={{
        position: "absolute",
        right: isBlobMobile ? "-140px" : isCompact ? "-180px" : "-100px",
        top: isBlobMobile ? "-60px" : "50%",
        transform: isBlobMobile ? "none" : "translateY(-50%)",
        width: isBlobMobile ? "480px" : isCompact ? "720px" : "1100px",
        height: isBlobMobile ? "480px" : isCompact ? "720px" : "1100px",
        objectFit: "contain",
        pointerEvents: "none",
        opacity: isBlobMobile ? 0.6 : isCompact ? 0.85 : 1,
        zIndex: 0,
        imageRendering: "high-quality",
        WebkitImageRendering: "high-quality",
        filter: "drop-shadow(0 30px 100px rgba(92,53,204,0.35))",
        WebkitMaskImage: isBlobMobile || isWide ? "none" : isCompact ? "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 40%, black 60%)" : "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.7) 40%, black 58%)",
        maskImage: isBlobMobile || isWide ? "none" : isCompact ? "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 40%, black 60%)" : "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.7) 40%, black 58%)",
      }} />

      {/* Top eyebrow */}
      <div className={!isMobile ? "fade-up" : ""} style={{ position: "relative", zIndex: 2, display: "flex", gap: 24, alignItems: "center", marginBottom: "auto", paddingTop: 40 }}>
        <div style={{ width: 40, height: 1, background: "#4a4a5a" }}></div>
        <span className="label label--wide" style={{ color: "#8080a0" }}>
          {t.eyebrow}
        </span>
      </div>

      {/* The headline — now the TAGLINE itself, full size */}
      <div className={!isMobile ? "fade-up fade-up-d1" : ""} style={{ position: "relative", zIndex: 2, maxWidth: 1200 }}>
        <h1 style={{
          fontFamily: "Montserrat", fontWeight: 200,
          fontSize: "clamp(56px, 7.4vw, 124px)",
          lineHeight: 1.0, letterSpacing: "-0.03em",
          margin: 0, maxWidth: 1200,
          paddingBottom: "0.08em",   // prevent gradient descender clip
        }}>
          <span className={preset.className} style={preset.style}>
            Clarity by design.
          </span>
          <br/>
          <span style={{ color: "#d4d4dc" }}>Systems for people.</span>
        </h1>

        {/* Quiet rule */}
        <div style={{ width: 280, height: 1, background: "#2d2d38", margin: "88px 0 0" }}></div>

        {/* The supporting thesis */}
        <p style={{
          fontFamily: "Montserrat", fontWeight: 300,
          fontSize: "clamp(22px, 2.2vw, 32px)",
          lineHeight: 1.3, letterSpacing: "-0.01em",
          color: "#ffffff", margin: "56px 0 0", maxWidth: 820,
        }}>
          {t.hook}
        </p>
        <p style={{
          fontFamily: "Montserrat", fontWeight: 300,
          fontSize: "clamp(16px, 1.4vw, 18px)",
          lineHeight: 1.65, letterSpacing: "-0.005em",
          color: "#a8a8b8", margin: "28px 0 0", maxWidth: 740,
        }}>
          {t.hookAccent}
        </p>

        {/* The descriptor */}
        <p style={{
          fontFamily: "Montserrat", fontWeight: 300,
          fontSize: "clamp(16px, 1.4vw, 18px)",
          lineHeight: 1.65, color: "#a8a8b8",
          maxWidth: 600, margin: "32px 0 0",
        }}>
          {t.desc}
        </p>
      </div>

      {/* Bottom strip */}
      <div className={!isMobile ? "fade-up fade-up-d2" : ""} style={{
        position: "relative", zIndex: 2,
        marginTop: "auto",
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : isTabletLayout ? "1fr 1fr" : "1fr auto 1fr",
        gap: isMobile ? 32 : 60,
        alignItems: (isMobile || isTabletLayout) ? "start" : "end",
        paddingTop: isMobile ? 56 : 80,
      }}>
        <div>
          <div className="label label--wide" style={{ color: "#4a4a5a", marginBottom: 10 }}>{t.practiceLabel}</div>
          <div style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 14, color: "#a8a8b8", letterSpacing: "-0.005em", whiteSpace: "pre-line" }}>
            {t.practiceValue}
          </div>
        </div>
        {!isMobile && !isTabletLayout && (
          <a href="#method" style={{
            textDecoration: "none", color: "#d4d4dc",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 12,
          }}>
            <span className="label label--wide" style={{ color: "#8080a0" }}>{t.readOn}</span>
            <span style={{ width: 1, height: 40, background: "linear-gradient(180deg, #8080a0 0%, transparent 100%)" }}></span>
          </a>
        )}
        <div style={{ textAlign: isMobile ? "left" : "right" }}>
          <div className="label label--wide" style={{ color: "#4a4a5a", marginBottom: 10 }}>{t.forLabel}</div>
          <div style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 14, color: "#a8a8b8", letterSpacing: "-0.005em", whiteSpace: "pre-line" }}>
            {t.forValue}
          </div>
        </div>
      </div>
    </section>
  );
}

window.HeroV2 = HeroV2;
