const { useState, useEffect, useRef } = React;

/* ============================================================
   EMAILJS CONFIG — paste your credentials from emailjs.com
   ============================================================ */
const EMAILJS_SERVICE_ID  = "service_landing_page";
const EMAILJS_TEMPLATE_ID = "template_nqobiyk";
const EMAILJS_PUBLIC_KEY  = "yIz7Yqdz3HkForXn7";

/* ============================================================
   ICONS — minimal stroke-only set
   ============================================================ */
const Icon = ({ name, size = 24, stroke = 1.5 }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round",
  };
  const paths = {
    whistle: <><path d="M3 12c0 3.3 2.7 6 6 6s6-2.7 6-6h6"/><circle cx="9" cy="12" r="2"/><path d="M15 12V8l6-2v6"/></>,
    activity: <><path d="M2 12h4l3-9 6 18 3-9h4"/></>,
    compass: <><circle cx="12" cy="12" r="9"/><path d="M16 8l-2 6-6 2 2-6 6-2z"/></>,
    arrowRight: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></>,
    check: <><path d="M5 12l5 5L20 7"/></>,
    spinner: <><path d="M12 3a9 9 0 1 0 9 9" /></>,
    x: <><path d="M6 6l12 12M18 6L6 18"/></>,
    menu: <><path d="M4 7h16M4 12h16M4 17h16"/></>,
  };
  return <svg {...common}>{paths[name]}</svg>;
};

/* ============================================================
   REVEAL — IntersectionObserver-based fade/slide
   ============================================================ */
const Reveal = ({ children, delay = 0, y = 24, as: Tag = "div", className = "", style = {} }) => {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } },
      { threshold: 0, rootMargin: "0px 0px -10% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={className}
      style={{
        ...style,
        opacity: shown ? 1 : 0,
        transform: shown ? "translateY(0)" : `translateY(${y}px)`,
        transition: `opacity 1.2s cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 1.2s cubic-bezier(.2,.7,.2,1) ${delay}ms`,
      }}
    >
      {children}
    </Tag>
  );
};

/* Stagger words in a heading */
const StaggerWords = ({ text, delay = 0, perWord = 90, className = "", style = {} }) => {
  const [shown, setShown] = useState(false);
  useEffect(() => { const t = setTimeout(() => setShown(true), delay); return () => clearTimeout(t); }, [delay]);
  return (
    <span className={className} style={style} aria-label={text}>
      {text.split(" ").map((w, i) => (
        <span key={i} style={{ display: "inline-block", overflow: "hidden", verticalAlign: "top" }}>
          <span style={{
            display: "inline-block",
            transform: shown ? "translateY(0)" : "translateY(110%)",
            opacity: shown ? 1 : 0,
            transition: `transform 1s cubic-bezier(.2,.8,.2,1) ${i * perWord}ms, opacity 1s ease ${i * perWord}ms`,
            paddingRight: "0.28em",
          }}>{w}</span>
        </span>
      ))}
    </span>
  );
};

/* ============================================================
   GOLD HORIZON RULE
   ============================================================ */
const GoldRule = ({ width = 120, style = {} }) => (
  <div style={{
    width, height: 1,
    background: "linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent)",
    ...style,
  }} />
);

const Eyebrow = ({ children, style = {} }) => (
  <div className="font-mono" style={{
    fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase",
    color: "var(--gold)", display: "inline-flex", alignItems: "center", gap: 14, ...style,
  }}>
    <span style={{ width: 24, height: 1, background: "var(--gold)" }} />
    {children}
  </div>
);

/* ============================================================
   NAV
   ============================================================ */
const Nav = ({ onCTA }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onS);
    return () => window.removeEventListener("scroll", onS);
  }, []);
  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? "14px 40px" : "26px 40px",
      transition: "all .4s ease",
      background: scrolled ? "rgba(6, 11, 31, 0.78)" : "transparent",
      backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      display: "flex", alignItems: "center", justifyContent: "space-between",
    }}>
      <a href="#top" style={{ display: "flex", alignItems: "center", gap: 14, textDecoration: "none", color: "var(--bone)" }}>
        <img src="assets/crest.png" alt="" style={{ height: 38, width: 38, objectFit: "contain" }} />
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
          <span className="font-display" style={{ fontSize: 14, letterSpacing: "0.22em", color: "var(--gold)", fontWeight: 700 }}>
            AMERICAN UNITED
          </span>
          <span className="font-mono" style={{ fontSize: 9, letterSpacing: "0.42em", color: "var(--bone-faint)", marginTop: 4 }}>
            F · C · ESTD · 2026
          </span>
        </div>
      </a>

      <nav style={{ display: "flex", alignItems: "center", gap: 36 }}>
        {[["Philosophy", "#philosophy"], ["Pathway", "#pathway"], ["Tryouts", "#tryouts"]].map(([l, h]) => (
          <a key={l} href={h} className="font-mono" style={{
            fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase",
            color: "var(--bone-dim)", textDecoration: "none", transition: "color .25s",
          }} onMouseEnter={e => e.currentTarget.style.color = "var(--gold)"}
             onMouseLeave={e => e.currentTarget.style.color = "var(--bone-dim)"}>
            {l}
          </a>
        ))}
        <button onClick={onCTA} className="font-mono" style={{
          fontSize: 11, letterSpacing: "0.26em", textTransform: "uppercase",
          padding: "11px 22px", border: "1px solid var(--gold)", color: "var(--gold)",
          background: "transparent", cursor: "pointer", transition: "all .3s",
        }}
          onMouseEnter={e => { e.currentTarget.style.background = "var(--gold)"; e.currentTarget.style.color = "var(--navy-900)"; }}
          onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--gold)"; }}
        >
          Join Waitlist →
        </button>
      </nav>
    </header>
  );
};

/* ============================================================
   GEOMETRIC EAGLE WING WIREFRAME — abstract, behind hero
   ============================================================ */
const WingWireframe = ({ side = "left", offset = 0 }) => {
  // Build a fan of lines emanating from a pivot
  const pivotX = side === "left" ? 100 : 700;
  const pivotY = 380;
  const lines = [];
  const count = 14;
  for (let i = 0; i < count; i++) {
    const t = i / (count - 1);
    const angleStart = side === "left" ? -160 : -20;
    const angleEnd = side === "left" ? -200 : 20;
    const a = (angleStart + (angleEnd - angleStart) * t) * Math.PI / 180;
    const len = 280 + Math.sin(t * Math.PI) * 120;
    const x2 = pivotX + Math.cos(a) * len;
    const y2 = pivotY + Math.sin(a) * len;
    lines.push({ x1: pivotX, y1: pivotY, x2, y2, opacity: 0.08 + Math.sin(t * Math.PI) * 0.18 });
  }
  return (
    <svg viewBox="0 0 800 800" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid slice">
      {lines.map((l, i) => (
        <line key={i} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2}
          stroke="var(--gold)" strokeOpacity={l.opacity} strokeWidth="0.6"
          style={{
            strokeDasharray: 600,
            strokeDashoffset: 600,
            animation: `draw 2.4s cubic-bezier(.2,.7,.2,1) ${offset + i * 80}ms forwards`,
          }}
        />
      ))}
    </svg>
  );
};

/* ============================================================
   HERO
   ============================================================ */
const Hero = ({ onCTA }) => {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => { const t = setTimeout(() => setLoaded(true), 80); return () => clearTimeout(t); }, []);

  return (
    <section id="top" style={{
      position: "relative", minHeight: "100vh", overflow: "hidden",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: "120px 40px 80px",
    }}>
      {/* Backdrop layers */}
      <div style={{
        position: "absolute", inset: 0,
        background:
          "radial-gradient(ellipse 60% 50% at 50% 35%, rgba(212,175,55,0.12), transparent 70%)," +
          "radial-gradient(ellipse 90% 60% at 50% 100%, rgba(122,15,26,0.22), transparent 70%)," +
          "linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 50%, var(--navy-950) 100%)",
      }} />

      {/* Wing wireframes */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.7,
        maskImage: "radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 80%)",
      }}>
        <WingWireframe side="left" offset={400} />
        <WingWireframe side="right" offset={400} />
      </div>

      {/* Dark radial glow behind eagle — blends it into the navy background */}
      <div style={{
        position: "absolute",
        top: "50%", left: "50%",
        transform: "translate(-50%, -50%)",
        width: "min(110vw, 1300px)",
        height: "min(110vw, 1300px)",
        background: "radial-gradient(ellipse 50% 50% at 50% 50%, rgba(212,175,55,0.05) 0%, rgba(6,11,31,0.65) 55%, transparent 75%)",
        pointerEvents: "none",
      }} />

      {/* Eagle image — center, low opacity watermark, behind text */}
      <img
        src="assets/eagle.png"
        alt=""
        aria-hidden="true"
        style={{
          position: "absolute",
          width: "min(82vw, 1000px)",
          top: "50%", left: "50%",
          transform: `translate(-50%, -50%) scale(${loaded ? 1.05 : 0.9})`,
          opacity: loaded ? 0.15 : 0,
          transition: "opacity 4s ease-out, transform 4s ease-out",
          filter: "drop-shadow(0 0 80px rgba(212,175,55,0.35))",
          pointerEvents: "none",
        }}
      />

      {/* Horizon line */}
      <div style={{
        position: "absolute", left: 0, right: 0, top: "50%",
        height: 1, background: "linear-gradient(90deg, transparent, var(--line-strong), transparent)",
        transform: `scaleX(${loaded ? 1 : 0})`, transformOrigin: "center",
        transition: "transform 2s cubic-bezier(.2,.7,.2,1) 600ms",
      }} />

      {/* Center content */}
      <div style={{ position: "relative", zIndex: 2, textAlign: "center", maxWidth: 1100 }}>
        <Reveal delay={200}>
          <Eyebrow style={{ marginBottom: 32 }}>The Eagle Is Set To Soar</Eyebrow>
        </Reveal>

        <h1 className="font-display" style={{
          fontWeight: 800,
          fontSize: "clamp(48px, 9vw, 132px)",
          lineHeight: 0.9,
          letterSpacing: "0.04em",
          textTransform: "uppercase",
          color: "var(--bone)",
          marginBottom: 8,
        }}>
          <div>
            <StaggerWords text="All" delay={400} />{" "}
            <StaggerWords text="Flags." delay={490} style={{ color: "var(--gold)" }} />
          </div>
          <div style={{ marginTop: 6 }}>
            <StaggerWords text="ONE" delay={700} />{" "}
            <StaggerWords text="Pitch." delay={790} style={{ color: "var(--gold)" }} />
          </div>
        </h1>

        <Reveal delay={600}>
          <div style={{ display: "flex", justifyContent: "center", margin: "40px 0 28px" }}>
            <GoldRule width={80} />
          </div>
        </Reveal>

        <Reveal delay={750}>
          <p style={{
            maxWidth: 600, margin: "0 auto",
            fontSize: 16, lineHeight: 1.7, color: "var(--bone-dim)",
            fontWeight: 300,
          }}>
            From North to South, flying under one crest.<br />
            The future of pro soccer development.
          </p>
        </Reveal>

        <Reveal delay={650}>
          <div style={{ display: "flex", justifyContent: "center", gap: 20, marginTop: 56, flexWrap: "wrap" }}>
            <button onClick={onCTA} className="font-mono" style={{
              fontSize: 12, letterSpacing: "0.3em", textTransform: "uppercase", fontWeight: 500,
              padding: "20px 38px", border: "none",
              background: "var(--gold)", color: "var(--navy-900)",
              cursor: "pointer", position: "relative", overflow: "hidden",
              transition: "transform .3s, box-shadow .3s",
              boxShadow: "0 0 0 0 rgba(212,175,55,0.5)",
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 12px 40px rgba(212,175,55,0.35)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 0 0 0 rgba(212,175,55,0.5)"; }}
            >
              Register for 2026 Tryouts &nbsp;→
            </button>
            <a href="#philosophy" className="font-mono" style={{
              fontSize: 12, letterSpacing: "0.3em", textTransform: "uppercase",
              padding: "20px 32px", border: "1px solid var(--line-strong)",
              color: "var(--bone-dim)", textDecoration: "none",
              transition: "all .3s", display: "inline-flex", alignItems: "center", gap: 12,
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--gold)"; e.currentTarget.style.color = "var(--gold)"; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--line-strong)"; e.currentTarget.style.color = "var(--bone-dim)"; }}
            >
              The Philosophy
            </a>
          </div>
        </Reveal>
      </div>

      {/* Bottom badges */}
      <div style={{
        position: "absolute", bottom: 32, left: 40, right: 40,
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        zIndex: 2,
      }}>
        <div style={{ opacity: loaded ? 1 : 0, transition: "opacity 2s ease 2.4s" }}>
          <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.4em", color: "var(--gold)", marginBottom: 6 }}>
            EST · MMXXVI
          </div>
          <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--bone-faint)" }}>
            UNITED STATES OF AMERICA
          </div>
        </div>

<div style={{ textAlign: "right", opacity: loaded ? 1 : 0, transition: "opacity 2s ease 2.4s" }}>
          <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.4em", color: "var(--gold)", marginBottom: 6 }}>
            CHAPTER · 001
          </div>
          <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--bone-faint)" }}>
            THE INITIATION
          </div>
        </div>
      </div>

      <style>{`
        @keyframes draw { to { stroke-dashoffset: 0; } }
        @keyframes scrollPulse { 0%,100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.4); opacity: 0.4; } }
      `}</style>
    </section>
  );
};

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
const Marquee = () => {
  const items = ["DEVELOPMENT", "★", "DISCIPLINE", "★", "DOMINANCE", "★", "PATHWAY", "★", "PRECISION", "★", "PRIDE", "★"];
  const repeated = [...items, ...items, ...items];
  return (
    <div style={{
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
      background: "var(--navy-950)",
      overflow: "hidden",
      padding: "22px 0",
    }}>
      <div style={{
        display: "flex", gap: 56, whiteSpace: "nowrap",
        animation: "marquee 40s linear infinite",
      }}>
        {repeated.map((t, i) => (
          <span key={i} className="font-display" style={{
            fontSize: 14, letterSpacing: "0.4em", fontWeight: 600,
            color: t === "★" ? "var(--gold)" : "var(--bone-dim)",
          }}>{t}</span>
        ))}
      </div>
      <style>{`@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-33.33%); } }`}</style>
    </div>
  );
};

/* ============================================================
   PHILOSOPHY
   ============================================================ */
const Philosophy = () => {
  const pillars = [
    {
      no: "01",
      icon: "whistle",
      title: "Elite Coaching",
      body: "World-class methodologies tailored for the modern American athlete. Imported standards, native instincts.",
    },
    {
      no: "02",
      icon: "activity",
      title: "High Performance",
      body: "Data-driven development focusing on technical, tactical, and physical dominance — measured every session.",
    },
    {
      no: "03",
      icon: "compass",
      title: "The Pathway",
      body: "Fostering character and skill to open doors — collegiate, professional, and beyond. The pitch is the prologue.",
    },
  ];

  return (
    <section id="philosophy" style={{
      position: "relative",
      padding: "160px 40px",
      background: "linear-gradient(180deg, var(--navy-950), var(--navy-900) 30%, var(--crimson-deep) 220%)",
      overflow: "hidden",
    }}>
      {/* Faint geometric grid */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.04,
        backgroundImage:
          "linear-gradient(var(--gold) 1px, transparent 1px), linear-gradient(90deg, var(--gold) 1px, transparent 1px)",
        backgroundSize: "80px 80px",
        maskImage: "radial-gradient(ellipse at 50% 50%, black, transparent 70%)",
        WebkitMaskImage: "radial-gradient(ellipse at 50% 50%, black, transparent 70%)",
      }} />

      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 100 }}>
          <Reveal>
            <Eyebrow style={{ marginBottom: 28 }}>The Philosophy · 一</Eyebrow>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="font-display" style={{
              fontSize: "clamp(40px, 6vw, 88px)",
              fontWeight: 700, lineHeight: 1, textTransform: "uppercase",
              color: "var(--bone)", marginBottom: 24,
            }}>
              Beyond <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--gold)" }}>the</span> Pitch.
            </h2>
          </Reveal>
          <Reveal delay={240}>
            <p style={{
              maxWidth: 580, margin: "0 auto", fontSize: 16, lineHeight: 1.7,
              color: "var(--bone-dim)", fontWeight: 300,
            }}>
              We are not building a team. We are forging a generation of athletes —
              technically refined, mentally relentless, and prepared for every level
              the game demands.
            </p>
          </Reveal>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 0,
          border: "1px solid var(--line)",
        }}>
          {pillars.map((p, i) => (
            <Reveal key={p.no} delay={i * 160}>
              <PhilosophyCard {...p} isLast={i === pillars.length - 1} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const PhilosophyCard = ({ no, icon, title, body, isLast }) => {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        padding: "56px 40px 64px",
        borderRight: isLast ? "none" : "1px solid var(--line)",
        background: hover
          ? "linear-gradient(180deg, rgba(212,175,55,0.05), transparent)"
          : "transparent",
        transition: "background .5s ease",
        minHeight: 380,
        display: "flex", flexDirection: "column",
        cursor: "default",
      }}
    >
      {/* Glow on hover */}
      <div style={{
        position: "absolute", top: -1, left: 0, right: 0, height: 1,
        background: "var(--gold)",
        transform: hover ? "scaleX(1)" : "scaleX(0)",
        transformOrigin: "left",
        transition: "transform .8s cubic-bezier(.2,.7,.2,1)",
      }} />

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 60 }}>
        <span className="font-mono" style={{ fontSize: 11, letterSpacing: "0.3em", color: "var(--gold)" }}>
          {no} / 03
        </span>
        <div style={{
          width: 56, height: 56, borderRadius: "50%",
          border: "1px solid var(--line-strong)",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--gold)",
          background: hover ? "rgba(212,175,55,0.1)" : "transparent",
          transition: "background .5s, transform .5s",
          transform: hover ? "rotate(-8deg) scale(1.05)" : "rotate(0) scale(1)",
        }}>
          <Icon name={icon} size={24} stroke={1.2} />
        </div>
      </div>

      <h3 className="font-display" style={{
        fontSize: 28, fontWeight: 600, textTransform: "uppercase",
        color: "var(--bone)", marginBottom: 18, letterSpacing: "0.05em",
      }}>
        {title}
      </h3>

      <p style={{
        fontSize: 14.5, lineHeight: 1.75, color: "var(--bone-dim)",
        fontWeight: 300, maxWidth: 320, flexGrow: 1,
      }}>
        {body}
      </p>

      <div style={{ marginTop: 32, height: 1, background: "var(--line)", width: "40%" }} />
    </div>
  );
};

/* ============================================================
   PATHWAY — secondary feature, vertical timeline
   ============================================================ */
const Pathway = () => {
  const stages = [
    { age: "U-13 / U-14", phase: "Foundation", note: "Technical mastery, footwork architecture, athletic base." },
    { age: "U-15 / U-16", phase: "Acceleration", note: "Tactical intelligence, position specialization, scouting exposure." },
    { age: "U-17 / U-18", phase: "Selection", note: "Collegiate placement, professional trials, international invitations." },
  ];
  return (
    <section id="pathway" style={{
      position: "relative", padding: "160px 40px",
      background: "var(--navy-900)",
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 120 }}>
          <Reveal>
            <Eyebrow style={{ marginBottom: 28 }}>The Pathway · 二</Eyebrow>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="font-display" style={{
              fontSize: "clamp(36px, 5vw, 68px)", fontWeight: 700, lineHeight: 1,
              textTransform: "uppercase", color: "var(--bone)", marginBottom: 28,
            }}>
              Three <span style={{ fontStyle: "italic", color: "var(--gold)", fontWeight: 400 }}>stages.</span><br/>
              One destination.
            </h2>
          </Reveal>
          <Reveal delay={240}>
            <p style={{ fontSize: 15, lineHeight: 1.8, color: "var(--bone-dim)", fontWeight: 300, maxWidth: 380 }}>
              A deliberate progression. No shortcuts, no detours.
              Each stage is engineered around the demands of the next —
              and the realities of the modern game.
            </p>
          </Reveal>
        </div>

        <div style={{ position: "relative" }}>
          {/* Vertical line */}
          <div style={{
            position: "absolute", left: 31, top: 12, bottom: 12,
            width: 1, background: "linear-gradient(180deg, var(--gold) 0%, var(--line) 50%, transparent 100%)",
          }} />

          {stages.map((s, i) => (
            <Reveal key={i} delay={i * 180}>
              <div style={{ display: "flex", gap: 36, marginBottom: i === stages.length - 1 ? 0 : 80, position: "relative" }}>
                <div style={{
                  width: 64, height: 64, flexShrink: 0,
                  border: "1px solid var(--gold)",
                  background: "var(--navy-950)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  position: "relative", zIndex: 2,
                }}>
                  <span className="font-display" style={{ color: "var(--gold)", fontSize: 22, fontWeight: 700 }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                </div>
                <div style={{ paddingTop: 6 }}>
                  <div className="font-mono" style={{ fontSize: 11, letterSpacing: "0.3em", color: "var(--gold)", marginBottom: 12 }}>
                    {s.age}
                  </div>
                  <h4 className="font-display" style={{
                    fontSize: 32, fontWeight: 600, textTransform: "uppercase",
                    color: "var(--bone)", marginBottom: 14, letterSpacing: "0.04em",
                  }}>
                    {s.phase}
                  </h4>
                  <p style={{ fontSize: 15, lineHeight: 1.75, color: "var(--bone-dim)", fontWeight: 300, maxWidth: 460 }}>
                    {s.note}
                  </p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   TRYOUT FORM
   ============================================================ */
const TryoutForm = ({ scrollTargetRef }) => {
  const [form, setForm] = useState({
    firstName: "", lastName: "", dob: "", email: "", currentClub: "",
  });
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [submitError, setSubmitError] = useState(false);

  const validate = () => {
    const e = {};
    if (!form.firstName.trim()) e.firstName = "Required";
    if (!form.lastName.trim()) e.lastName = "Required";
    if (!form.dob.trim()) e.dob = "Required";
    else if (!/^(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/(19|20)\d{2}$/.test(form.dob.trim()))
      e.dob = "Use MM/DD/YYYY";
    if (!form.email.trim()) e.email = "Required";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) e.email = "Invalid email";
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) return;
    setSubmitting(true);
    setSubmitError(false);

    const templateParams = {
      player_name: form.firstName + " " + form.lastName,
      player_dob:  form.dob,
      parent_email: form.email,
      player_level: form.currentClub || "N/A",
      reply_to:    form.email,
    };

    emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams, { publicKey: EMAILJS_PUBLIC_KEY })
      .then(() => {
        setSubmitting(false);
        setSubmitted(true);
      })
      .catch(() => {
        setSubmitting(false);
        setSubmitError(true);
      });
  };

  const setField = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    if (errors[k]) setErrors(er => ({ ...er, [k]: undefined }));
  };

  return (
    <section id="tryouts" ref={scrollTargetRef} style={{
      position: "relative", padding: "160px 40px",
      background: "linear-gradient(180deg, var(--navy-900), var(--navy-950) 40%, var(--crimson-deep) 100%)",
      overflow: "hidden",
    }}>
      {/* glow */}
      <div style={{
        position: "absolute", top: "30%", left: "50%",
        transform: "translate(-50%, -50%)",
        width: 800, height: 800, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(212,175,55,0.12), transparent 60%)",
        pointerEvents: "none",
      }} />

      <div style={{ position: "relative", maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <Reveal>
          <Eyebrow style={{ marginBottom: 28 }}>The Initiation · 三</Eyebrow>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="font-display" style={{
            fontSize: "clamp(40px, 6.5vw, 88px)", fontWeight: 800, lineHeight: 0.96,
            textTransform: "uppercase", color: "var(--bone)", marginBottom: 24, letterSpacing: "0.02em",
          }}>
            2026 Tryouts <br/>
            <span style={{ fontStyle: "italic", color: "var(--gold)", fontWeight: 400 }}>Waitlist.</span>
          </h2>
        </Reveal>
        <Reveal delay={240}>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--bone-dim)", fontWeight: 300, marginBottom: 56 }}>
            Spots are strictly limited. Register your interest below to receive
            exclusive updates on tryout dates, locations, and club news.
          </p>
        </Reveal>

        <Reveal delay={360}>
          <div style={{
            position: "relative",
            border: "1px solid var(--line-strong)",
            background: "rgba(6,11,31,0.65)",
            backdropFilter: "blur(12px)",
            padding: "48px 44px 44px",
            textAlign: "left",
          }}>
            {/* corner ticks */}
            {[
              { top: -1, left: -1, b: ["top", "left"] },
              { top: -1, right: -1, b: ["top", "right"] },
              { bottom: -1, left: -1, b: ["bottom", "left"] },
              { bottom: -1, right: -1, b: ["bottom", "right"] },
            ].map((c, i) => (
              <div key={i} style={{
                position: "absolute", width: 14, height: 14,
                borderTop: c.b.includes("top") ? "1px solid var(--gold)" : "none",
                borderBottom: c.b.includes("bottom") ? "1px solid var(--gold)" : "none",
                borderLeft: c.b.includes("left") ? "1px solid var(--gold)" : "none",
                borderRight: c.b.includes("right") ? "1px solid var(--gold)" : "none",
                ...c,
              }} />
            ))}

            {!submitted ? (
              <form onSubmit={submit} noValidate>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
                  <Field label="Player First Name" id="firstName"
                    value={form.firstName} onChange={v => setField("firstName", v)}
                    error={errors.firstName} placeholder="" />
                  <Field label="Player Last Name" id="lastName"
                    value={form.lastName} onChange={v => setField("lastName", v)}
                    error={errors.lastName} placeholder="" />
                </div>

                <Field label="Player Date of Birth" id="dob"
                  value={form.dob} onChange={v => setField("dob", v)}
                  error={errors.dob} placeholder="MM/DD/YYYY"
                  hint="Format: MM/DD/YYYY" />

                <Field label="Parent / Guardian Email" id="email"
                  type="email" value={form.email} onChange={v => setField("email", v)}
                  error={errors.email} placeholder="parent@email.com" />

                <Field label="Current Club / Level" id="currentClub"
                  optional value={form.currentClub} onChange={v => setField("currentClub", v)}
                  placeholder="e.g. Local U-14 Premier" />

                <button type="submit" disabled={submitting} className="font-mono" style={{
                  width: "100%", marginTop: 14, padding: "20px 28px",
                  background: submitting ? "var(--gold-soft)" : "var(--gold)",
                  color: "var(--navy-900)", border: "none", cursor: submitting ? "wait" : "pointer",
                  fontSize: 12, letterSpacing: "0.32em", textTransform: "uppercase", fontWeight: 600,
                  display: "flex", alignItems: "center", justifyContent: "center", gap: 14,
                  transition: "all .3s",
                }}
                  onMouseEnter={e => { if (!submitting) e.currentTarget.style.background = "var(--gold-bright)"; }}
                  onMouseLeave={e => { if (!submitting) e.currentTarget.style.background = "var(--gold)"; }}
                >
                  {submitting ? (
                    <>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
                        strokeLinecap="round" style={{ animation: "spin .8s linear infinite" }}>
                        <path d="M12 3a9 9 0 1 0 9 9" />
                      </svg>
                      Securing your spot
                    </>
                  ) : (
                    <>Secure Your Spot &nbsp;→</>
                  )}
                </button>

                {submitError && (
                  <p className="font-mono" style={{
                    fontSize: 11, letterSpacing: "0.18em", color: "#E07B7B",
                    marginTop: 18, textAlign: "center", lineHeight: 1.6,
                  }}>
                    Something went wrong. Please try again or contact us directly.
                  </p>
                )}

                <p className="font-mono" style={{
                  fontSize: 10, letterSpacing: "0.18em", color: "var(--bone-faint)",
                  marginTop: 22, textAlign: "center", lineHeight: 1.6,
                }}>
                  By submitting, you agree to receive communications from American United F.C. <br/>
                  Your information will not be shared with third parties.
                </p>
              </form>
            ) : (
              <SuccessState player={form.firstName} />
            )}
          </div>
          <style>{`@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }`}</style>
        </Reveal>
      </div>
    </section>
  );
};

const Field = ({ label, id, value, onChange, error, placeholder, type = "text", optional, hint }) => {
  const [focus, setFocus] = useState(false);
  return (
    <div style={{ marginBottom: 18 }}>
      <label htmlFor={id} className="font-mono" style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontSize: 10, letterSpacing: "0.28em", textTransform: "uppercase",
        color: error ? "#E07B7B" : focus ? "var(--gold)" : "var(--bone-dim)",
        marginBottom: 8, transition: "color .25s",
      }}>
        <span>{label}{optional && <span style={{ opacity: 0.5, marginLeft: 8 }}>(optional)</span>}</span>
        {error && <span style={{ color: "#E07B7B", letterSpacing: "0.16em" }}>{error}</span>}
      </label>
      <input
        id={id}
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        placeholder={placeholder}
        aria-invalid={!!error}
        aria-label={label}
        style={{
          width: "100%",
          padding: "14px 0",
          background: "transparent",
          border: "none",
          borderBottom: `1px solid ${error ? "#E07B7B" : focus ? "var(--gold)" : "var(--line-strong)"}`,
          color: "var(--bone)",
          fontFamily: "Inter, sans-serif",
          fontSize: 15,
          outline: "none",
          transition: "border-color .25s",
        }}
      />
      {hint && !error && (
        <div className="font-mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--bone-faint)", marginTop: 6 }}>
          {hint}
        </div>
      )}
    </div>
  );
};

const SuccessState = ({ player }) => (
  <div style={{ textAlign: "center", padding: "40px 20px" }}>
    <div style={{
      width: 88, height: 88, margin: "0 auto 32px",
      borderRadius: "50%", border: "1px solid var(--gold)",
      display: "flex", alignItems: "center", justifyContent: "center",
      color: "var(--gold)", position: "relative",
      animation: "pulseGold 2.4s ease-in-out infinite",
    }}>
      <Icon name="check" size={36} stroke={1.5} />
      <div style={{
        position: "absolute", inset: -12, borderRadius: "50%",
        border: "1px solid var(--line)", animation: "ringGrow 2.4s ease-out infinite",
      }} />
    </div>
    <div className="font-mono" style={{ fontSize: 11, letterSpacing: "0.32em", color: "var(--gold)", marginBottom: 16 }}>
      REGISTRATION RECEIVED
    </div>
    <h3 className="font-display" style={{
      fontSize: 36, fontWeight: 700, textTransform: "uppercase",
      color: "var(--bone)", lineHeight: 1.1, marginBottom: 18, letterSpacing: "0.03em",
    }}>
      Welcome to <br/>
      <span style={{ fontStyle: "italic", color: "var(--gold)", fontWeight: 400 }}>the future.</span>
    </h3>
    <p style={{ fontSize: 15, lineHeight: 1.75, color: "var(--bone-dim)", fontWeight: 300, maxWidth: 440, margin: "0 auto" }}>
      {player ? `Thank you, ${player}'s family. ` : ""}
      You are on the waitlist. Tryout dates, locations, and selection details will arrive
      directly in your inbox in the coming weeks. <br/><br/>
      <span style={{ color: "var(--gold)", letterSpacing: "0.06em" }}>The eagle is watching.</span>
    </p>
    <style>{`
      @keyframes pulseGold { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.5);} 50% { box-shadow: 0 0 40px 4px rgba(212,175,55,0.25); } }
      @keyframes ringGrow { 0% { transform: scale(0.95); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } }
    `}</style>
  </div>
);

/* ============================================================
   FOOTER
   ============================================================ */
const Footer = () => (
  <footer style={{
    background: "var(--navy-950)",
    borderTop: "1px solid var(--line)",
    padding: "80px 40px 40px",
    position: "relative",
  }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.5fr 1fr 1fr",
        gap: 64,
        marginBottom: 64,
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 24 }}>
            <img src="assets/crest.png" alt="" style={{ height: 56, width: 56, objectFit: "contain" }} />
            <div>
              <div className="font-display" style={{ fontSize: 18, letterSpacing: "0.18em", color: "var(--gold)", fontWeight: 700 }}>
                AMERICAN UNITED F.C.
              </div>
              <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--bone-faint)", marginTop: 4 }}>
                EST · 2026 · UNITED STATES
              </div>
            </div>
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.75, color: "var(--bone-dim)", fontWeight: 300, maxWidth: 380 }}>
            An elite youth soccer academy forging the next generation of American players —
            for the collegiate game, the professional ranks, and beyond.
          </p>
        </div>

        <div>
          <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)", marginBottom: 20 }}>
            EXPLORE
          </div>
          {[["Philosophy", "#philosophy"], ["Pathway", "#pathway"], ["Tryouts", "#tryouts"]].map(([l, h]) => (
            <a key={l} href={h} style={{
              display: "block", padding: "8px 0", color: "var(--bone)",
              textDecoration: "none", fontSize: 14, transition: "color .2s",
            }}
              onMouseEnter={e => e.currentTarget.style.color = "var(--gold)"}
              onMouseLeave={e => e.currentTarget.style.color = "var(--bone)"}>
              {l}
            </a>
          ))}
        </div>

        <div>
          <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)", marginBottom: 20 }}>
            CONTACT
          </div>
          <a href="mailto:contacto.americanfc@gmail.com" style={{
            display: "block", padding: "8px 0", color: "var(--bone)",
            textDecoration: "none", fontSize: 14, transition: "color .2s",
          }}
            onMouseEnter={e => e.currentTarget.style.color = "var(--gold)"}
            onMouseLeave={e => e.currentTarget.style.color = "var(--bone)"}>
            contacto.americanfc@gmail.com
          </a>
          <div style={{ display: "flex", gap: 14, marginTop: 24 }}>
            <a href="https://www.instagram.com/americanunitedfc/" aria-label="Instagram" style={{
              width: 40, height: 40, border: "1px solid var(--line-strong)",
              display: "flex", alignItems: "center", justifyContent: "center",
              color: "var(--bone-dim)", transition: "all .25s",
            }}
              onMouseEnter={e => { e.currentTarget.style.color = "var(--gold)"; e.currentTarget.style.borderColor = "var(--gold)"; }}
              onMouseLeave={e => { e.currentTarget.style.color = "var(--bone-dim)"; e.currentTarget.style.borderColor = "var(--line-strong)"; }}>
              <Icon name="instagram" size={18} stroke={1.4} />
            </a>
          </div>
        </div>
      </div>

      <div style={{
        paddingTop: 28, borderTop: "1px solid var(--line)",
        display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16,
      }}>
        <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.28em", color: "var(--bone-faint)" }}>
          © MMXXVI · AMERICAN UNITED F.C. · ALL RIGHTS RESERVED
        </div>
        <div className="font-mono" style={{ fontSize: 10, letterSpacing: "0.28em", color: "var(--gold)" }}>
          ⌖ THE EAGLE IS SET TO SOAR
        </div>
      </div>
    </div>
  </footer>
);

/* ============================================================
   APP
   ============================================================ */
const App = () => {
  const formRef = useRef(null);
  const scrollToForm = () => {
    document.getElementById("tryouts")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // Smooth scroll for anchors
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest("a[href^='#']");
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (el) { e.preventDefault(); el.scrollIntoView({ behavior: "smooth", block: "start" }); }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <div>
      <Nav onCTA={scrollToForm} />
      <Hero onCTA={scrollToForm} />
      <Marquee />
      <Philosophy />
      <Pathway />
      <TryoutForm scrollTargetRef={formRef} />
      <Footer />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
