/* === Hero ===
 * Full-bleed hero. Big Anton headline, eyebrow, dual CTA, scanline overlay,
 * subtle corner-radial neon glow.
 */

const Hero = ({ onEnroll, tweaks }) => {
  // Tweakable knobs with safe fallbacks so the component still works standalone.
  const t = tweaks || { heroGlowSize: 100, heroGlowIntensity: 100, heroUnlitColor: "#6e2949", tagline: "see without being seen." };
  const scale = t.heroGlowSize / 100;          // 0.6 .. 2.2 — multiplies ellipse %
  const alpha = t.heroGlowIntensity / 100;     // 0 .. 2.6   — multiplies rgba alpha
  const unlit = t.heroUnlitColor || "#6e2949";
  const tagline = t.tagline || "see without being seen.";

  return (
    <section id="top" style={{
      position: "relative",
      padding: "96px 32px 120px",
      overflow: "hidden",
      borderBottom: "1px solid var(--obsidian-fog)",
      // CSS vars consumed by the headline's text-shadow + unlit color.
      "--neon-glow-mult": (0.6 + alpha * 0.7).toFixed(2),
      "--neon-unlit": unlit,
    }}>
      {/* Background radial neon — size + alpha driven by tweaks.
         Adds a dedicated bright magenta bloom directly behind the headline
         so the section reads as a neon sign, not just an ambient gradient.
         Rgba triplets routed through --neon-magenta-rgb / --neon-cyan-rgb
         so the swap-neon body class can flip them globally. */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 0,
        background: `
          radial-gradient(ellipse ${28*scale}% ${22*scale}% at 24% 32%, rgba(var(--neon-magenta-rgb), ${(0.55*alpha).toFixed(3)}), transparent 70%),
          radial-gradient(ellipse ${44*scale}% ${34*scale}% at 26% 32%, rgba(var(--neon-magenta-rgb), ${(0.22*alpha).toFixed(3)}), transparent 70%),
          radial-gradient(ellipse ${42*scale}% ${38*scale}% at 82% 22%, rgba(var(--sunset-core-rgb), ${(0.16*alpha).toFixed(3)}), transparent 60%),
          radial-gradient(ellipse ${58*scale}% ${46*scale}% at 82% 22%, rgba(var(--sunset-mid-rgb), ${(0.13*alpha).toFixed(3)}), transparent 66%),
          radial-gradient(ellipse ${80*scale}% ${60*scale}% at 80% 20%, rgba(var(--neon-magenta-rgb), ${(0.10*alpha).toFixed(3)}), transparent 60%),
          radial-gradient(ellipse ${70*scale}% ${50*scale}% at 10% 80%, rgba(155,91,255,${(0.20*alpha).toFixed(3)}), transparent 60%),
          radial-gradient(ellipse ${30*scale}% ${30*scale}% at 50% 50%, rgba(var(--neon-cyan-rgb), ${(0.06*alpha).toFixed(3)}), transparent 60%)
        `,
        pointerEvents: "none",
        // Drive the text-shadow stack on the headline from the same tweak.
        "--neon-glow-mult": (0.6 + alpha * 0.7).toFixed(2),
      }}></div>

      {/* Scanline overlay */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
        backgroundImage: "repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px)",
        mixBlendMode: "overlay",
      }}></div>

      <div className="hero-grid" style={{
        maxWidth: 1280, margin: "0 auto", position: "relative", zIndex: 2,
      }}>
        <div className="hero-text">
          <Eyebrow>// Counter ubiquitous technical surveillance //</Eyebrow>

          {/* Neon-sign headline. "R DATA?" flickers out, revealing "WHO OWNS YOU?"
              The short "?" overlays the start of the "R DATA?" slot via absolute
              positioning so the layout doesn't reflow when the full version dies. */}
          <h1 style={{
            fontFamily: "var(--font-brand)",
            // Fluid size, tuned so "WHO OWNS YOUR DATA?" stays on one line
            // inside the headline column at every viewport. Headline width
            // is ~11.2× the font size in this font; cap matches the column.
            fontSize: "clamp(40px, 5vw, 64px)",
            lineHeight: 1.05,
            margin: "16px 0 8px",
            color: "var(--fg-1)",
            textTransform: "uppercase",
            letterSpacing: "0.02em",
            maxWidth: 820,
          }}>
            {/* Single laid-out line, three spans. "R DATA" flickers to the
                unlit-tube color in place; nothing moves. white-space: nowrap
                ensures the browser doesn't break the phrase at any of the
                three span boundaries (the spans have no intervening whitespace,
                so the seams would otherwise be treated as soft breaks). */}
            <span style={{ color: "var(--neon-magenta)", whiteSpace: "nowrap" }}>
              <span className="ol-neon-base">Who Owns You</span>
              <span className="ol-neon-dim">r Data</span>
              <span className="ol-neon-mark">?</span>
            </span>
          </h1>

          {/* Script tagline */}
          <p className="hero-script" style={{
            fontFamily: "var(--font-script)",
            fontSize: 44,
            lineHeight: 1,
            color: "var(--fg-2)",
            margin: "16px 0 28px",
            transform: "rotate(-2deg)",
            display: "inline-block",
            transformOrigin: "left center",
          }}>
            {tagline}
          </p>

          <p style={{
            fontFamily: "var(--font-body)",
            fontSize: 18,
            lineHeight: 1.55,
            color: "var(--fg-2)",
            maxWidth: 520,
            // marginBottom only — leaves left/right unset so the .hero-text
            // > * { margin: auto } rule can take over on narrow viewports.
            marginBottom: 36,
          }}>
            Brush passes and dead drops aren't required to move your personal information. It 
            is sold to anyone who wants it. Tools and training for people with an insidious adversary.
            In depth training. Bespoke field kits. No theater.
          </p>

          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <Button variant="primary" onClick={onEnroll} icon="→">Enroll Now</Button>
            <Button variant="secondary">View Syllabus</Button>
          </div>
        </div>

        <div className="hero-image">
          <img src="../../assets/logo-mark.png" alt="Obsidian Lake mark" />
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });