/* Hero — three concepts: HUMAN CENTERED · AI · ACADEMY
   Light-shaped editorial typography. */
const Hero = ({ tweaks = {} }) => {
  const {
    lightMode = "auto",
    lightSpeed = 0.6,
    lightIntensity = 1.0,
    accent = "#b8a8ff",
    orbPulse = true,
    showDotGrid = true
  } = tweaks;

  const { isMobile, isTablet } = useViewport();

  const PALETTES = {
    "#b8a8ff": { bright: "#f0ecff", mid: "#cfc7ff", deep: "#8a6fc8", hueShift: 0 },
    "#a8b8ff": { bright: "#ebefff", mid: "#bfcaff", deep: "#6f7fc8", hueShift: -20 },
    "#c8a0ff": { bright: "#f1e8ff", mid: "#d8b8ff", deep: "#9a6ecc", hueShift: 18 },
    "#d6a0d8": { bright: "#f6e8f7", mid: "#e4c0e5", deep: "#a06fa2", hueShift: 40 },
    "#80c0d8": { bright: "#e0f0f8", mid: "#a8d0e0", deep: "#5090a8", hueShift: -80 }
  };
  const P = PALETTES[accent] || PALETTES["#b8a8ff"];
  const lavBright = P.bright,lavMid = P.mid,lavDeep = P.deep;
  const hueShift = P.hueShift;

  const [parallax, setParallax] = React.useState(0);
  const [lx, setLx] = React.useState(0.78);
  const [ly, setLy] = React.useState(0.42);
  const heroRef = React.useRef(null);

  const makeLightGrad = (base) =>
  `radial-gradient(circle 700px at ${(lx * 100).toFixed(1)}% ${(ly * 100).toFixed(1)}%, ` +
  `#ffffff 0%, ` +
  `${lavBright} 14%, ` +
  `${lavMid} 32%, ` +
  `${base} 60%, ` +
  `${base} 100%)`;

  React.useEffect(() => {
    const onScroll = () => setParallax(Math.min(window.scrollY, 800));
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    if (lightMode === "static") {setLx(0.78);setLy(0.42);return;}
    if (lightMode === "mouse") {
      const onMove = (e) => {
        const r = heroRef.current?.getBoundingClientRect();
        if (!r) return;
        setLx(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
        setLy(Math.max(0, Math.min(1, (e.clientY - r.top) / r.height)));
      };
      window.addEventListener("mousemove", onMove);
      return () => window.removeEventListener("mousemove", onMove);
    }
    let raf,t = 0;
    const loop = () => {
      t += 0.005 * lightSpeed;
      const x = 0.5 + 0.42 * Math.sin(t);
      const y = 0.42 + 0.18 * Math.sin(t * 1.7 + 1.1);
      setLx(x);setLy(y);
      raf = requestAnimationFrame(loop);
    };
    loop();
    return () => cancelAnimationFrame(raf);
  }, [lightMode, lightSpeed]);

  const wrap = {
    position: "relative",
    minHeight: isMobile ? "auto" : "100vh",
    paddingTop: isMobile ? 96 : 140,
    paddingBottom: isMobile ? 24 : 32,
    overflow: "hidden", isolation: "isolate"
  };
  const marble = {
    position: "absolute", top: "-10%", left: "-5%",
    width: "70%", height: "85%",
    backgroundImage: `url(${(window.__resources && window.__resources.marble) || "assets/marble-full.png"})`,
    backgroundSize: "cover", backgroundPosition: "center",
    filter: `blur(60px) saturate(115%) brightness(0.55) hue-rotate(${hueShift}deg)`,
    opacity: 0.55, mixBlendMode: "screen",
    transform: `translateY(${parallax * 0.15}px)`,
    pointerEvents: "none", zIndex: 0
  };
  const marble2 = {
    position: "absolute", bottom: "-20%", right: "-15%",
    width: "65%", height: "80%",
    backgroundImage: `url(${(window.__resources && window.__resources.marble) || "assets/marble-full.png"})`,
    backgroundSize: "cover", backgroundPosition: "right center",
    filter: `blur(80px) saturate(120%) brightness(0.5) hue-rotate(${hueShift - 10}deg)`,
    opacity: 0.45, mixBlendMode: "screen",
    transform: `translateY(${-parallax * 0.1}px) scaleX(-1)`,
    pointerEvents: "none", zIndex: 0
  };
  const bloom = {
    position: "absolute", inset: 0,
    background: `radial-gradient(circle 600px at ${(lx * 100).toFixed(1)}% ${(ly * 100).toFixed(1)}%, ` +
    `${lavBright}55 0%, ${lavMid}25 30%, transparent 65%)`,
    mixBlendMode: "screen",
    opacity: 0.85 * lightIntensity,
    pointerEvents: "none", zIndex: 1,
    transition: "opacity 400ms ease"
  };
  const vignette = {
    position: "absolute", inset: 0,
    background: "radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, rgba(9,9,15,0.6) 70%, rgba(9,9,15,0.95) 100%)",
    pointerEvents: "none", zIndex: 1
  };
  const dotGrid = {
    position: "absolute", inset: 0,
    backgroundImage: "radial-gradient(circle, rgba(243,238,230,0.06) 1px, transparent 1.2px)",
    backgroundSize: "32px 32px", backgroundPosition: "center",
    maskImage: "linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%)",
    WebkitMaskImage: "linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%)",
    pointerEvents: "none", zIndex: 1,
    opacity: showDotGrid ? 0.7 : 0,
    transition: "opacity 400ms ease"
  };

  const container = {
    position: "relative", zIndex: 3,
    maxWidth: 1440, margin: "0 auto",
    padding: isMobile ? "0 20px" : "0 56px"
  };
  const editorial = {
    display: "grid",
    gridTemplateColumns: isMobile
      ? "1fr"
      : "minmax(0, 1.05fr) 1px minmax(0, 1fr) 1px minmax(0, 1.15fr)",
    alignItems: "stretch", position: "relative",
    minHeight: isMobile ? "auto" : 540,
    gap: isMobile ? 48 : 0
  };
  const col = {
    padding: isMobile ? "0" : "8px 36px",
    position: "relative",
    display: "flex", flexDirection: "column",
    gap: isMobile ? 24 : 32,
    minHeight: isMobile ? "auto" : 540
  };
  const colFirst = { ...col, paddingLeft: 0 };
  const colLast = { ...col, paddingRight: 0 };
  const ruleCol = isMobile
    ? {
        height: 1,
        background: "linear-gradient(90deg, transparent 0%, var(--rule-2) 20%, var(--rule-2) 80%, transparent 100%)"
      }
    : {
        width: 1,
        background: "linear-gradient(180deg, transparent 0%, var(--rule-2) 20%, var(--rule-2) 80%, transparent 100%)"
      };
  const colHead = {
    fontFamily: "var(--mono)", fontSize: 10.5,
    letterSpacing: "0.24em", textTransform: "uppercase",
    color: "var(--ink-3)",
    display: "flex", justifyContent: "space-between", gap: 24
  };
  const colCaption = {
    fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-2)",
    maxWidth: 360, paddingTop: 28,
    borderTop: "1px solid var(--rule)",
    textWrap: "pretty"
  };

  const litText = (baseColor) => ({
    backgroundImage: makeLightGrad(baseColor),
    backgroundAttachment: isMobile ? "scroll" : "fixed",
    backgroundClip: "text",
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
    color: "transparent",
    transition: "filter 300ms ease",
    filter: `drop-shadow(0 0 ${(36 * lightIntensity).toFixed(0)}px ${lavBright}aa)`
  });

  const humanWord = {
    fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 400,
    fontSize: isMobile ? 56 : (isTablet ? 72 : 96),
    lineHeight: 0.92, letterSpacing: "-0.02em",
    textWrap: "pretty", position: "relative",
    ...litText("#e6d4c2")
  };
  const aiWord = {
    fontFamily: "var(--mono)", fontWeight: 400,
    fontSize: isMobile ? 80 : (isTablet ? 104 : 140),
    lineHeight: 1, letterSpacing: "-0.04em",
    textTransform: "uppercase", position: "relative",
    ...litText("#f3eee6")
  };
  const academyWord = {
    fontFamily: "var(--serif)", fontWeight: 400,
    fontSize: isMobile ? 52 : (isTablet ? 72 : 96),
    lineHeight: 0.95, letterSpacing: "-0.025em",
    textWrap: "pretty",
    ...litText("#f3eee6")
  };

  const humanBlob = {
    position: "absolute", top: "-20%", left: "-15%",
    width: 380, height: 380, borderRadius: "50%",
    background: `radial-gradient(circle at 40% 35%, ${lavMid}33 0%, rgba(184, 122, 150, 0.14) 35%, transparent 70%)`,
    filter: "blur(30px)",
    zIndex: -1
  };

  const orbScale = orbPulse ? `scale(calc(1 + var(--orb-pulse, 0) * 0.04))` : "scale(1)";
  const orb = {
    position: "relative",
    width: 78, height: 78, borderRadius: "50%",
    background: `radial-gradient(circle at 32% 28%, ${lavBright} 0%, ${lavMid} 38%, ${lavDeep} 78%, #2a1a4a 100%)`,
    boxShadow: `0 0 0 1px rgba(255,255,255,0.12), 0 8px 70px ${lavMid}cc, 0 0 180px ${lavBright}77, inset 0 -8px 22px rgba(50,30,90,0.6)`,
    transform: orbScale,
    transition: "transform 1.6s cubic-bezier(.4,0,.2,1)"
  };

  const [pulseTick, setPulseTick] = React.useState(0);
  React.useEffect(() => {
    if (!orbPulse) return;
    const id = setInterval(() => setPulseTick((p) => (p + 1) % 2), 1800);
    return () => clearInterval(id);
  }, [orbPulse]);

  const heroVars = { "--orb-pulse": pulseTick };

  /* small label component used inside the AI panel */
  const microLabel = {
    fontFamily: "var(--mono)",
    fontSize: 10.5,
    letterSpacing: "0.28em",
    textTransform: "uppercase",
    color: lavBright,
    textAlign: "center",
    paddingTop: 4
  };

  return (
    <section id="top" ref={heroRef} style={{ ...wrap, ...heroVars }} data-screen-label="01 Hero">
      <div style={marble} aria-hidden="true"></div>
      <div style={marble2} aria-hidden="true"></div>
      <div style={dotGrid} aria-hidden="true"></div>
      <div style={vignette} aria-hidden="true"></div>
      <div style={bloom} aria-hidden="true"></div>

      <div style={container}>
        <div style={editorial}>
          {/* HUMAN CENTERED */}
          <div style={colFirst}>
            <div style={humanBlob} aria-hidden="true"></div>
            <div style={colHead}>
              <span>I. The premise</span>
              <span>Organic</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              <div style={humanWord}>
                Human<br />
                <span style={{ display: "inline-block", marginLeft: 38 }}>Centered<span style={{ color: lavMid, WebkitTextFillColor: lavMid }}>,</span></span>
              </div>
              <div style={colCaption}>
                We start with the people doing the work — their judgment, their craft, their safety. We design AI systems around them. Never under them.
              </div>
            </div>
          </div>

          <div style={ruleCol} aria-hidden="true"></div>

          {/* AI */}
          <div style={col}>
            <div style={colHead}>
              <span>II. The medium</span>
              <span>Geometric</span>
            </div>
            <div style={microLabel}>Not one tool.</div>
            <div style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "flex-start", paddingTop: 4, paddingBottom: 8 }}>
              <span style={{ ...aiWord, display: "inline-flex", alignItems: "center", gap: 4 }}>
                <span>A</span>
                <span style={{
                  display: "inline-block", width: 18, height: 18, borderRadius: "50%",
                  background: `radial-gradient(circle at 35% 30%, ${lavBright}, ${lavMid} 55%, ${lavDeep})`,
                  boxShadow: `0 0 ${24 * lightIntensity}px ${lavBright}cc`,
                  flex: "0 0 18px",
                  WebkitTextFillColor: "initial"
                }}></span>
                <span>I</span>
              </span>
              <span style={{ position: "absolute", top: 8, left: 8, width: 18, height: 18, borderTop: `1px solid ${lavMid}`, borderLeft: `1px solid ${lavMid}`, opacity: 0.5 }}></span>
              <span style={{ position: "absolute", top: 8, right: 8, width: 18, height: 18, borderTop: `1px solid ${lavMid}`, borderRight: `1px solid ${lavMid}`, opacity: 0.5 }}></span>
              <span style={{ position: "absolute", bottom: 8, left: 8, width: 18, height: 18, borderBottom: `1px solid ${lavMid}`, borderLeft: `1px solid ${lavMid}`, opacity: 0.5 }}></span>
              <span style={{ position: "absolute", bottom: 8, right: 8, width: 18, height: 18, borderBottom: `1px solid ${lavMid}`, borderRight: `1px solid ${lavMid}`, opacity: 0.5 }}></span>
            </div>
            <div style={{ ...colCaption, maxWidth: 340, margin: "0 auto", textAlign: "center", borderTop: "1px solid var(--rule)" }}>
              <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--ink)" }}>Using</span> AI ·{" "}
              <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--ink)" }}>Working with</span> AI ·{" "}
              <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--ink)" }}>Building with</span> AI.
              <br />
              The whole capability ladder — from prompting to agentic design.
            </div>
          </div>

          <div style={ruleCol} aria-hidden="true"></div>

          {/* ACADEMY */}
          <div style={colLast}>
            <div style={colHead}>
              <span>III. The synthesis</span>
              <span>Practice</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              <div style={{ position: "relative", minHeight: isMobile ? 110 : 176, display: "flex", alignItems: "center" }}>
                <div style={{ position: "absolute", right: 8, top: isMobile ? -8 : 4, zIndex: 2 }}>
                  <div style={orb} aria-hidden="true">
                    <span style={{ position: "absolute", inset: -10, borderRadius: "50%", border: `1px solid ${lavMid}33` }}></span>
                    <span style={{ position: "absolute", inset: -22, borderRadius: "50%", border: `1px solid ${lavMid}18`, opacity: orbPulse ? 0.6 + pulseTick * 0.4 : 0.6, transition: "opacity 1.6s ease" }}></span>
                  </div>
                </div>
                <div style={academyWord}>
                  <em style={{ fontStyle: "italic" }}>Academy</em><span style={{ color: lavMid, WebkitTextFillColor: lavMid }}>.</span>
                </div>
              </div>
              <div style={colCaption}>
                Structured, evidence-based capability building grounded in human factors science. Skills that stick beyond the room.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

window.Hero = Hero;