/* global React, Reveal */

// Background timeline — bigger, more sprawling, draws itself in then breathes
const TimelineBg = () => (
  <svg
    viewBox="0 0 1600 900"
    width="100%" height="100%"
    preserveAspectRatio="xMidYMid slice"
    aria-hidden="true"
    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}
  >
    <defs>
      <filter id="limeGlowBg" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="8" result="b" />
        <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
      </filter>
      <radialGradient id="vignette" cx="50%" cy="50%" r="70%">
        <stop offset="0%" stopColor="#0B0B0B" stopOpacity="0" />
        <stop offset="80%" stopColor="#0B0B0B" stopOpacity="0.55" />
        <stop offset="100%" stopColor="#0B0B0B" stopOpacity="0.95" />
      </radialGradient>
    </defs>

    {/* Main spine — sweeping diagonal */}
    <path
      className="bg-path bg-path-main"
      d="M -40 180 Q 280 120 520 320 T 1080 460 T 1660 760"
      fill="none" stroke="#56A700" strokeWidth="3"
      strokeDasharray="2 12" strokeLinecap="round"
    />
    {/* Branches */}
    <path
      className="bg-path bg-path-b1"
      d="M 360 200 Q 540 80 880 110"
      fill="none" stroke="#3C7700" strokeWidth="2"
      strokeDasharray="2 10" strokeLinecap="round" opacity="0.55"
    />
    <path
      className="bg-path bg-path-b2"
      d="M 720 380 Q 920 380 1140 280"
      fill="none" stroke="#3C7700" strokeWidth="2"
      strokeDasharray="2 10" strokeLinecap="round" opacity="0.55"
    />
    <path
      className="bg-path bg-path-b3"
      d="M 1140 540 Q 1280 600 1480 580"
      fill="none" stroke="#3C7700" strokeWidth="2"
      strokeDasharray="2 10" strokeLinecap="round" opacity="0.55"
    />
    <path
      className="bg-path bg-path-b4"
      d="M 220 280 Q 80 420 180 620"
      fill="none" stroke="#3C7700" strokeWidth="2"
      strokeDasharray="2 10" strokeLinecap="round" opacity="0.45"
    />

    {/* Major nodes — pulsing */}
    <g filter="url(#limeGlowBg)">
      <circle className="bg-node n1" cx="-40" cy="180" r="10" fill="#56A700" />
      <circle className="bg-node n2" cx="520" cy="320" r="14" fill="#56A700" />
      <circle className="bg-node n3" cx="1080" cy="460" r="14" fill="#56A700" />
      <circle className="bg-node n4" cx="1660" cy="760" r="16" fill="#56A700" />
    </g>

    {/* Branch endpoints */}
    <g>
      <circle className="bg-tip t1" cx="880" cy="110" r="7" fill="#0B0B0B" stroke="#56A700" strokeWidth="2" />
      <circle className="bg-tip t2" cx="1140" cy="280" r="7" fill="#0B0B0B" stroke="#56A700" strokeWidth="2" />
      <circle className="bg-tip t3" cx="1480" cy="580" r="7" fill="#0B0B0B" stroke="#56A700" strokeWidth="2" />
      <circle className="bg-tip t4" cx="180" cy="620" r="7" fill="#0B0B0B" stroke="#56A700" strokeWidth="2" />
    </g>

    {/* Faint shadow labels */}
    <g fontFamily="Google Sans, system-ui" fontSize="13" fill="#5A5A5A" fontWeight="600" className="bg-label">
      <text x="892" y="106">Choose courses</text>
      <text x="1156" y="276">Join a club</text>
      <text x="1340" y="576">Apply to college</text>
      <text x="60" y="616">Find your people</text>
    </g>
    <g fontFamily="Nata Sans, system-ui" fontSize="12" fontWeight="900" fill="#56A700" letterSpacing="1.4" className="bg-label">
      <text x="528" y="312">9TH</text>
      <text x="1088" y="452">11TH</text>
    </g>

    {/* Vignette */}
    <rect width="1600" height="900" fill="url(#vignette)" />
  </svg>
);

const Hero = () => {
  return (
    <section
      data-screen-label="01 Hero"
      className="theme-dark"
      style={{
        background: "var(--black)",
        color: "var(--white)",
        padding: "clamp(40px, 6vw, 88px) 24px clamp(64px, 8vw, 120px)",
        minHeight: "92vh",
        position: "relative",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* Animated background timeline */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
      }}>
        <TimelineBg />
      </div>

      {/* Top bar with logo only — no nav per TZ */}
      <div style={{
        maxWidth: 1200, margin: "0 auto", width: "100%",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        marginBottom: "clamp(40px, 6vw, 80px)",
        position: "relative", zIndex: 1,
      }}>
        <a href="/" aria-label="My High School Timeline" style={{
          display: "inline-flex", alignItems: "center", textDecoration: "none",
        }}>
          <img
            src="assets/logo.png"
            alt="My High School Timeline"
            style={{
              height: 44, width: "auto", display: "block",
              filter: "invert(1) hue-rotate(180deg)",
            }}
          />
        </a>
        <div className="eyebrow" style={{
          color: "var(--brand-lime)", fontSize: 12,
        }}>
          Free tool for high school students
        </div>
      </div>

      <Reveal stagger style={{
        maxWidth: 1200, margin: "0 auto", width: "100%",
        display: "grid", gridTemplateColumns: "minmax(0, 1.35fr) minmax(0, 1fr)",
        gap: "clamp(32px, 5vw, 64px)",
        alignItems: "center",
        flex: 1,
        position: "relative", zIndex: 1,
      }} className="hero-grid reveal-stagger">
        <div>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 900,
            fontSize: "clamp(34px, 4.8vw, 60px)",
            lineHeight: 0.98, letterSpacing: "-0.025em",
            textTransform: "uppercase", margin: 0, color: "var(--white)",
            textWrap: "balance",
            maxWidth: 720,
          }}>
            Your first day shouldn't decide your <span style={{ color: "var(--brand-lime)" }}>last four years.</span>
          </h1>
          <p style={{
            marginTop: 24,
            fontFamily: "var(--font-body)", fontSize: "clamp(16px, 1.25vw, 19px)", lineHeight: 1.5,
            color: "#C8C8C8", maxWidth: 520, fontWeight: 400,
          }}>
            A personalized roadmap through high school — built by a student who learned the hard way.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
            <a href="https://app.myhstimeline.com/register" className="btn-primary">
              Start your timeline <span className="arrow">→</span>
            </a>
            <a href="#how" className="text-link" style={{
              color: "var(--white)",
              fontFamily: "var(--font-body)", fontSize: 16,
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>
              See how it works <span>↓</span>
            </a>
          </div>

          {/* Trust strip */}
          <div style={{
            marginTop: 48,
            display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap",
            color: "var(--ink-400)",
            fontFamily: "var(--font-body)", fontSize: 13,
          }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <Icon name="lock" size={14} style={{ filter: "invert(1) opacity(0.7)" }} />
              No data sold
            </span>
            <span className="dots"><span/><span/><span/></span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <Icon name="badge-dollar-sign" size={14} style={{ filter: "invert(1) opacity(0.7)" }} />
              Free forever
            </span>
            <span className="dots"><span/><span/><span/></span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <Icon name="graduation-cap" size={14} style={{ filter: "invert(1) opacity(0.7)" }} />
              Built by a student
            </span>
          </div>
        </div>

        {/* Vertical video — Emily intro */}
        <div className="hero-video-wrap" style={{
          display: "flex", justifyContent: "center", alignItems: "center",
          position: "relative",
        }}>
          <div className="hero-video card-hover" style={{
            position: "relative",
            width: "100%",
            maxWidth: 320,
            aspectRatio: "9 / 16",
            borderRadius: 24,
            overflow: "hidden",
            background: "linear-gradient(160deg, #1A1A1A 0%, #0B0B0B 60%, #0B0B0B 100%)",
            border: "1px solid #2A2A2A",
            boxShadow: "0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(86,167,0,0.18) inset",
            cursor: "pointer",
          }}>
            {/* Subtle scanline / film grain */}
            <div aria-hidden="true" style={{
              position: "absolute", inset: 0,
              background: "radial-gradient(120% 60% at 50% 0%, rgba(86,167,0,0.18), transparent 60%)",
              pointerEvents: "none",
            }} />

            {/* Initials block (placeholder for footage) */}
            <div style={{
              position: "absolute", inset: 0,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--font-display)", fontWeight: 900,
              fontSize: 140, lineHeight: 1, letterSpacing: "-0.04em",
              color: "var(--ink-700)",
            }}>
              EK
            </div>

            {/* Top tag */}
            <div style={{
              position: "absolute", top: 14, left: 14,
              display: "inline-flex", alignItems: "center", gap: 6,
              padding: "6px 10px",
              background: "rgba(11,11,11,0.7)",
              backdropFilter: "blur(8px)",
              borderRadius: 999,
              border: "1px solid rgba(255,255,255,0.08)",
              fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 700,
              color: "var(--white)", letterSpacing: "0.04em", textTransform: "uppercase",
            }}>
              <span className="rec-dot" />
              0:42 · Emily's story
            </div>

            {/* Center play button */}
            <button aria-label="Play Emily's story" style={{
              position: "absolute", top: "50%", left: "50%",
              transform: "translate(-50%, -50%)",
              width: 72, height: 72, borderRadius: 999,
              background: "var(--brand-lime)",
              color: "var(--black)",
              border: "none",
              display: "flex", alignItems: "center", justifyContent: "center",
              cursor: "pointer",
              boxShadow: "var(--shadow-lime), 0 0 0 8px rgba(86,167,0,0.18)",
            }} className="hero-play">
              <Icon name="play" size={28} />
            </button>

            {/* Bottom caption */}
            <div style={{
              position: "absolute", left: 0, right: 0, bottom: 0,
              padding: "20px 18px 18px",
              background: "linear-gradient(180deg, transparent, rgba(0,0,0,0.85))",
            }}>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 900,
                fontSize: 18, color: "var(--white)", letterSpacing: "-0.01em",
                textTransform: "uppercase",
              }}>
                Hi, I'm Emily<span style={{ color: "var(--brand-lime)" }}>.</span>
              </div>
              <div style={{
                marginTop: 4,
                fontFamily: "var(--font-body)", fontSize: 12, color: "#A8A8A8",
              }}>
                Round Rock HS · Class of '26
              </div>
            </div>

            {/* Progress bar at bottom */}
            <div aria-hidden="true" style={{
              position: "absolute", left: 0, right: 0, bottom: 0,
              height: 3,
              background: "rgba(255,255,255,0.08)",
            }}>
              <div className="hero-progress" style={{
                height: "100%", width: "32%",
                background: "var(--brand-lime)",
              }} />
            </div>
          </div>
        </div>
      </Reveal>

      {/* Animations + responsive overrides */}
      <style>{`
        /* Background path draw + slow float */
        .bg-path { stroke-dashoffset: 1400; animation: bgDraw 2400ms var(--ease-out) forwards; }
        .bg-path-main { animation-delay: 100ms; }
        .bg-path-b1 { animation-delay: 700ms; }
        .bg-path-b2 { animation-delay: 900ms; }
        .bg-path-b3 { animation-delay: 1100ms; }
        .bg-path-b4 { animation-delay: 1300ms; }
        @keyframes bgDraw {
          from { stroke-dashoffset: 1400; opacity: 0; }
          to   { stroke-dashoffset: 0;    opacity: 1; }
        }

        .bg-node { transform-box: fill-box; transform-origin: center; opacity: 0; animation: bgPop 700ms var(--ease-out) forwards, bgPulse 3.4s var(--ease-in-out) infinite; }
        .bg-node.n1 { animation-delay: 600ms, 1800ms; }
        .bg-node.n2 { animation-delay: 1100ms, 2200ms; }
        .bg-node.n3 { animation-delay: 1600ms, 2600ms; }
        .bg-node.n4 { animation-delay: 2100ms, 3200ms; }
        @keyframes bgPop {
          from { opacity: 0; transform: scale(0.4); }
          to   { opacity: 1; transform: scale(1); }
        }
        @keyframes bgPulse {
          0%,100% { transform: scale(1); }
          50%     { transform: scale(1.18); }
        }

        .bg-tip { transform-box: fill-box; transform-origin: center; opacity: 0; animation: bgPop 600ms var(--ease-out) forwards; }
        .bg-tip.t1 { animation-delay: 1300ms; }
        .bg-tip.t2 { animation-delay: 1500ms; }
        .bg-tip.t3 { animation-delay: 1700ms; }
        .bg-tip.t4 { animation-delay: 1900ms; }

        .bg-label { opacity: 0; animation: bgFade 800ms var(--ease-out) forwards; animation-delay: 2000ms; }
        @keyframes bgFade { to { opacity: 0.85; } }

        /* Slow drift on the entire SVG */
        section[data-screen-label="01 Hero"] svg { animation: bgDrift 18s var(--ease-in-out) infinite alternate; }
        @keyframes bgDrift {
          from { transform: translate3d(0,0,0); }
          to   { transform: translate3d(-14px, -8px, 0); }
        }

        /* Recording dot */
        .rec-dot {
          width: 7px; height: 7px; border-radius: 999px;
          background: var(--brand-lime);
          box-shadow: 0 0 0 0 rgba(86,167,0,0.6);
          animation: recPulse 1.6s var(--ease-out) infinite;
        }
        @keyframes recPulse {
          0%   { box-shadow: 0 0 0 0   rgba(86,167,0,0.55); }
          70%  { box-shadow: 0 0 0 8px rgba(86,167,0,0); }
          100% { box-shadow: 0 0 0 0   rgba(86,167,0,0); }
        }

        /* Play button hover */
        .hero-video:hover .hero-play { transform: translate(-50%, -50%) scale(1.06); }
        .hero-play { transition: transform var(--dur-base) var(--ease-out); }

        /* Progress bar drift */
        .hero-progress { animation: heroProg 6s var(--ease-in-out) infinite alternate; }
        @keyframes heroProg {
          from { width: 12%; }
          to   { width: 64%; }
        }

        @media (max-width: 880px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .hero-video-wrap { order: 2; }
          .hero-video { max-width: 260px !important; }
        }
        @media (prefers-reduced-motion: reduce) {
          .bg-path, .bg-node, .bg-tip, .bg-label, .rec-dot, .hero-progress,
          section[data-screen-label="01 Hero"] svg {
            animation: none !important;
            opacity: 1 !important;
            stroke-dashoffset: 0 !important;
          }
        }
      `}</style>
    </section>
  );
};

window.Hero = Hero;