/* PL1 marketing — shared system components.
   Exports to window so other Babel scripts can use them. */

const { useState, useEffect, useRef, Fragment } = React;

/* ────────────────────────────────────────────────────────────────
   Logo mark — inlined for theme-aware swatch & for use as anchor.
   The SVG below is a reference to the delivered vector; we use an
   <img> for raster pixel fidelity, but expose a CSS-mask variant
   when we want to recolor the mark inside dark blocks.
   ──────────────────────────────────────────────────────────────── */
function LogoMark({ size = 40, variant = "full" }) {
  // variant="full" → the rendered logo as-is (neon green + black)
  // variant="mono" → mark recolored to currentColor via mask
  if (variant === "mono") {
    return (
      <span
        aria-hidden
        style={{
          display: "inline-block",
          width: size, height: size,
          background: "currentColor",
          WebkitMask: "url(assets/pl1-logo.svg) center / contain no-repeat",
          mask: "url(assets/pl1-logo.svg) center / contain no-repeat",
        }}
      />
    );
  }
  return (
    <img
      src="assets/pl1-logo.svg"
      alt="PL1 Goalkeeping Academy"
      width={size} height={size}
      style={{ display: "block", borderRadius: "50%" }}
    />
  );
}

/* ────────────────────────────────────────────────────────────────
   Slim static header — fixed-height, brand mark + nav + two CTAs.
   Behaves as a static element inside each artboard.
   ──────────────────────────────────────────────────────────────── */
function SiteHeader({ active = "home" }) {
  const nav = [
    { id: "home",         label: "Home" },
    { id: "programs",     label: "Programs" },
    { id: "coaches",      label: "Coaches & about" },
    { id: "testimonials", label: "Results" },
    { id: "contact",      label: "Contact" },
  ];
  return (
    <header className="site-header">
      <div className="container site-header__row">
        <a className="site-header__brand" href="#" aria-label="PL1 Goalkeeping Academy — home">
          <LogoMark size={36} />
          <span className="site-header__wordmark">
            <span className="site-header__wm-top">PL1</span>
            <span className="site-header__wm-sub">Goalkeeping Academy</span>
          </span>
        </a>
        <nav className="site-header__nav" aria-label="Primary">
          {nav.map(item => (
            <a key={item.id}
               href={`#${item.id}`}
               className={"site-header__link" + (active === item.id ? " is-active" : "")}>
              {item.label}
            </a>
          ))}
        </nav>
        <div className="site-header__cta">
          <a href="#login" className="btn btn--ghost btn--sm">Log in</a>
          <a href="#explore" className="btn btn--primary btn--sm">
            Explore
            <ArrowGlyph />
          </a>
        </div>
      </div>
    </header>
  );
}

/* small arrow glyph used inside CTAs */
function ArrowGlyph({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" aria-hidden
         style={{ display: "block" }}>
      <path d="M2 7 H11 M7 3 L11 7 L7 11"
            fill="none" stroke="currentColor" strokeWidth="1.75"
            strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  );
}

/* ────────────────────────────────────────────────────────────────
   Static footer — 4 columns + base row + giant background mark.
   ──────────────────────────────────────────────────────────────── */
function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container site-footer__inner">
        <div className="site-footer__cols">
          <div className="site-footer__col site-footer__col--brand">
            <LogoMark size={56} />
            <p className="site-footer__tagline">
              Goalkeeper coaching for keepers who want the next level — and the one after.
            </p>
            <div className="site-footer__social">
              <FooterSocial label="Instagram" />
              <FooterSocial label="YouTube" />
              <FooterSocial label="TikTok" />
            </div>
          </div>
          <div className="site-footer__col">
            <h4 className="site-footer__heading">Programs</h4>
            <ul>
              <li><a href="#">1:1 sessions</a></li>
              <li><a href="#">Squad clinics</a></li>
              <li><a href="#">Residency week</a></li>
              <li><a href="#">Video review</a></li>
            </ul>
          </div>
          <div className="site-footer__col">
            <h4 className="site-footer__heading">Academy</h4>
            <ul>
              <li><a href="#">Coaches</a></li>
              <li><a href="#">Methodology</a></li>
              <li><a href="#">Results</a></li>
              <li><a href="#">Kit shop</a></li>
            </ul>
          </div>
          <div className="site-footer__col">
            <h4 className="site-footer__heading">Get in touch</h4>
            <ul>
              <li><a href="#">hello@pl1academy.co</a></li>
              <li><a href="#">+44 0000 000 000</a></li>
              <li><a href="#">{`{location placeholder}`}</a></li>
            </ul>
            <a className="btn btn--primary btn--sm" href="#contact" style={{marginTop:"14px"}}>
              Book a trial <ArrowGlyph />
            </a>
          </div>
        </div>
        <div className="site-footer__base">
          <div className="site-footer__legal">
            <span>© {new Date().getFullYear()} PL1 Goalkeeping Academy</span>
            <span aria-hidden>·</span>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Safeguarding</a>
          </div>
          <div className="site-footer__est">
            <span className="site-footer__est-glyph" aria-hidden />
            EST. PL1 — Keep brave.
          </div>
        </div>
      </div>
      <BigMarkAnchor />
    </footer>
  );
}
function FooterSocial({ label }) {
  return (
    <a className="site-footer__soc" href="#" aria-label={label}>
      <span className="site-footer__soc-dot" aria-hidden />
      {label}
    </a>
  );
}

/* The PL1 mark used HUGE as a footer anchor — bleed off the edge */
function BigMarkAnchor() {
  return (
    <div className="big-mark" aria-hidden>
      <img src="assets/pl1-logo.svg" alt="" />
    </div>
  );
}

/* ────────────────────────────────────────────────────────────────
   Angular section break — the energy system divider.
   ──────────────────────────────────────────────────────────────── */
function Slash({ flip = false, variant = "accent" }) {
  const cls = ["slash", flip ? "slash--flip" : "", variant === "inverse" ? "slash--inverse" : ""].filter(Boolean).join(" ");
  return <div className={cls} aria-hidden />;
}

/* ────────────────────────────────────────────────────────────────
   Photo slot — premium green-duotone placeholder.
   Author sets aspect and caption; ratio prop = w/h
   ──────────────────────────────────────────────────────────────── */
function PhotoSlot({ caption, ratio = "4 / 3", className = "", style = {} }) {
  return (
    <div className={"photo-slot " + className}
         style={{ aspectRatio: ratio, ...style }}>
      <span className="photo-slot__caption">{caption || "image"}</span>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────────
   Page wrapper — sets theme via data-theme attr.
   ──────────────────────────────────────────────────────────────── */
function Page({ theme = "light", children, density = "desktop" }) {
  return (
    <div className="pl1" data-theme={theme} data-density={density}>
      {children}
    </div>
  );
}

/* ────────────────────────────────────────────────────────────────
   "25" big stat block — the proof moment, reused across pages.
   ──────────────────────────────────────────────────────────────── */
function StatProof({ compact = false }) {
  return (
    <div className={"stat-proof" + (compact ? " stat-proof--compact" : "")}>
      <div className="stat-proof__num" aria-hidden>25</div>
      <div className="stat-proof__copy">
        <span className="eyebrow eyebrow--accent">The receipt</span>
        <p>
          <strong>25 PL1 graduates</strong> are currently signed
          to professional academies across England — from Premier
          League to League Two.
        </p>
      </div>
    </div>
  );
}

/* expose to other Babel scripts */
Object.assign(window, {
  LogoMark, SiteHeader, SiteFooter, ArrowGlyph,
  Slash, PhotoSlot, Page, StatProof, BigMarkAnchor,
});