/* ==============================================================
   Jacksonville Site Works — shared components + Nav + Hero + Marquee
   ============================================================== */

const { useState, useEffect, useRef, useCallback, useMemo } = React;

/* ------------------------------------------------------------------ */
/*  PHOTO — robust placeholder. Uses real Unsplash where stable, else  */
/*  shows a gritty CSS fallback + monospace caption.                    */
/* ------------------------------------------------------------------ */
function Photo({ src, alt, label, className = "", style = {} }) {
  const [loaded, setLoaded] = React.useState(false);
  const [failed, setFailed] = React.useState(false);

  return (
    <div className={`photo ${className}`} style={style}>
      <div className="ph-fallback" />
      {src && !failed && (
        <img
          src={src}
          alt={alt || ""}
          loading="lazy"
          onLoad={() => setLoaded(true)}
          onError={() => setFailed(true)}
          style={{
            position: "absolute", inset: 0,
            opacity: loaded ? 1 : 0,
            transition: "opacity .4s ease",
            zIndex: 1,
          }}
        />
      )}
      {label && <div className="ph-label">{label}</div>}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  LOGO — JSW monogram inside a hazard-bordered tag                   */
/* ------------------------------------------------------------------ */
function Logo({ compact = false }) {
  return (
    <a href="#top" className="logo" aria-label="Jacksonville Site Works home">
      <span className="logo-mark" aria-hidden="true">
        <svg viewBox="0 0 40 40" width="36" height="36">
          <rect x="1" y="1" width="38" height="38" fill="none" stroke="#d97706" strokeWidth="2" />
          <path d="M9 9 L9 26 Q9 31 14 31 L18 31" fill="none" stroke="#f4ede3" strokeWidth="2.5" strokeLinecap="square"/>
          <path d="M22 9 L22 31 M22 31 L31 31 M31 9 L31 31" fill="none" stroke="#f4ede3" strokeWidth="2.5" strokeLinecap="square"/>
        </svg>
      </span>
      {!compact && (
        <span className="logo-wordmark">
          <span className="lw-1">Jacksonville</span>
          <span className="lw-2">Site Works</span>
        </span>
      )}
      <style>{`
        .logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
        .logo-mark { display: inline-block; line-height: 0; }
        .logo-wordmark { display: inline-flex; flex-direction: column; line-height: 1; }
        .lw-1 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
        .lw-2 { font-family: var(--head); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-top: 2px; }
      `}</style>
    </a>
  );
}

/* ------------------------------------------------------------------ */
/*  NAV — sticky with phone CTA + mobile menu                           */
/* ------------------------------------------------------------------ */
function Nav({ phone }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Services",  "#services"],
    ["Process",   "#process"],
    ["Work",      "#work"],
    ["Reviews",   "#reviews"],
    ["FAQ",       "#faq"],
  ];

  return (
    <header className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container nav-inner">
        <Logo />
        <nav className="nav-links" aria-label="Primary">
          {links.map(([label, href]) => (
            <a key={href} href={href}>{label}</a>
          ))}
        </nav>
        <div className="nav-cta">
          <a href={`tel:${phone.replace(/[^\d]/g, "")}`} className="nav-phone">
            <span className="np-label">CALL</span>
            <span className="np-num">{phone}</span>
          </a>
          <a href="#quote" className="btn btn--sm">
            Get a Quote
            <span className="arrow" />
          </a>
        </div>
        <button
          className="nav-menu-btn"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span /><span /><span />
        </button>
      </div>

      {open && (
        <div className="nav-mobile">
          {links.map(([label, href]) => (
            <a key={href} href={href} onClick={() => setOpen(false)}>{label}</a>
          ))}
          <a href={`tel:${phone.replace(/[^\d]/g, "")}`} className="mobile-phone">{phone}</a>
        </div>
      )}

      <style>{`
        .nav {
          position: fixed; top: 0; left: 0; right: 0; z-index: 50;
          background: linear-gradient(180deg, rgba(20,23,26,0.85), rgba(20,23,26,0.3));
          backdrop-filter: blur(0px);
          transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
          border-bottom: 1px solid transparent;
        }
        .nav.is-scrolled {
          background: rgba(20,23,26,0.92);
          backdrop-filter: blur(10px);
          border-bottom-color: var(--line);
        }
        .nav-inner {
          display: flex; align-items: center; justify-content: space-between;
          gap: 24px; padding: 18px 0;
        }
        .nav-links {
          display: flex; gap: 28px; flex: 1;
          margin-left: 48px;
        }
        .nav-links a {
          font-family: var(--head);
          text-transform: uppercase;
          letter-spacing: 0.08em;
          font-size: 13px;
          color: var(--ink-2);
          padding: 6px 0;
          border-bottom: 2px solid transparent;
          transition: color .15s ease, border-color .15s ease;
        }
        .nav-links a:hover { color: var(--ink); border-bottom-color: var(--clay); }
        .nav-cta { display: flex; align-items: center; gap: 18px; }
        .nav-phone {
          display: inline-flex; flex-direction: column; align-items: flex-end;
          line-height: 1; color: var(--ink);
        }
        .np-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-3); margin-bottom: 4px; }
        .np-num { font-family: var(--head); font-size: 15px; letter-spacing: 0.04em; font-weight: 500; }
        .btn--sm { padding: 12px 18px; font-size: 12px; }

        .nav-menu-btn { display: none; background: transparent; border: 1px solid var(--line-2); width: 44px; height: 44px; padding: 10px; }
        .nav-menu-btn span { display: block; height: 2px; background: var(--ink); margin: 4px 0; }

        .nav-mobile {
          display: none;
          flex-direction: column;
          gap: 12px;
          padding: 24px;
          background: var(--bg-2);
          border-top: 1px solid var(--line);
        }
        .nav-mobile a {
          font-family: var(--head);
          text-transform: uppercase;
          letter-spacing: 0.08em;
          font-size: 18px;
          color: var(--ink);
          padding: 10px 0;
          border-bottom: 1px solid var(--line);
        }
        .mobile-phone { color: var(--clay) !important; }

        @media (max-width: 1000px) {
          .nav-links, .nav-cta { display: none; }
          .nav-menu-btn { display: block; }
          .nav-mobile { display: flex; }
        }
      `}</style>
    </header>
  );
}

/* ------------------------------------------------------------------ */
/*  HERO                                                               */
/* ------------------------------------------------------------------ */
function Hero({ phone }) {
  return (
    <section id="top" className="hero grain">
      <Photo
        className="hero-photo"
        src={window.PHOTOS.hero}
        label="HERO ⋅ EXCAVATOR @ DUSK ⋅ CLAY COUNTY"
        alt="Excavator clearing a wooded lot"
      />

      <div className="hero-overlay" />

      <div className="container hero-content">
        <div className="hero-eyebrow">
          <span className="dot" />
          <span>Est. 2011 ⋅ Licensed &amp; Insured ⋅ Northeast Florida</span>
        </div>

        <h1 className="hero-head h-display">
          We clear land.<br/>
          <span className="hero-head__accent">Fast.</span>
        </h1>

        <p className="hero-sub">
          Forestry mulching, tree removal, and site prep across Jacksonville and surrounding counties.
          Family-owned. On-site quotes within 48 hours.
        </p>

        <div className="hero-ctas">
          <a href="#quote" className="btn">
            Get a free quote
            <span className="arrow" />
          </a>
          <a href={`tel:${phone.replace(/[^\d]/g, "")}`} className="btn btn--ghost">
            {phone}
          </a>
        </div>

        <div className="hero-meta">
          <div>
            <div className="mono hero-meta__k">Service Area</div>
            <div className="hero-meta__v">Duval ⋅ St. Johns ⋅ Clay ⋅ Nassau ⋅ Baker</div>
          </div>
          <div>
            <div className="mono hero-meta__k">Response Time</div>
            <div className="hero-meta__v">48-hour site visit, guaranteed</div>
          </div>
          <div>
            <div className="mono hero-meta__k">Fleet</div>
            <div className="hero-meta__v">CAT mulcher ⋅ Kubota excavators ⋅ Skid steers</div>
          </div>
        </div>
      </div>

      <a href="#stats" className="hero-scroll" aria-label="Scroll">
        <span className="mono">scroll</span>
        <span className="hs-line" />
      </a>

      <style>{`
        .hero {
          position: relative;
          min-height: 100vh;
          min-height: 100svh;
          display: flex;
          align-items: flex-end;
          padding: 160px 0 80px;
          overflow: hidden;
          background: var(--bg-2);
        }
        .hero-photo {
          position: absolute !important;
          inset: 0;
          z-index: 0;
        }
        .hero-overlay {
          position: absolute; inset: 0;
          background:
            linear-gradient(180deg, rgba(20,23,26,0.55) 0%, rgba(20,23,26,0.45) 35%, rgba(20,23,26,0.95) 100%),
            linear-gradient(90deg, rgba(20,23,26,0.85) 0%, rgba(20,23,26,0.2) 50%, rgba(20,23,26,0.0) 100%);
          z-index: 1;
        }
        .hero-content {
          position: relative;
          z-index: 3;
          width: 100%;
        }
        .hero-eyebrow {
          display: inline-flex; align-items: center; gap: 12px;
          font-family: var(--mono);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--ink-2);
          background: rgba(0,0,0,0.4);
          border: 1px solid var(--line-2);
          padding: 8px 14px;
        }
        .hero-eyebrow .dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--clay);
          box-shadow: 0 0 0 4px rgba(217,119,6,0.2);
        }

        .hero-head {
          font-size: clamp(72px, 13vw, 220px);
          margin: 28px 0 24px;
          max-width: 18ch;
        }
        .hero-head__accent {
          color: var(--clay);
          font-style: italic;
        }

        .hero-sub {
          font-size: clamp(17px, 1.6vw, 22px);
          color: var(--ink-2);
          max-width: 56ch;
          margin: 0 0 36px;
          line-height: 1.5;
        }

        .hero-ctas {
          display: flex; gap: 14px; flex-wrap: wrap;
          margin-bottom: 64px;
        }

        .hero-meta {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
          padding-top: 28px;
          border-top: 1px solid var(--line-2);
          max-width: 980px;
        }
        .hero-meta__k {
          font-size: 10px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--ink-4);
          margin-bottom: 8px;
        }
        .hero-meta__v {
          font-family: var(--head);
          text-transform: uppercase;
          letter-spacing: 0.04em;
          font-size: 14px;
          color: var(--ink);
        }

        .hero-scroll {
          position: absolute;
          right: var(--rail);
          bottom: 40px;
          display: flex; flex-direction: column; align-items: center;
          gap: 8px;
          font-size: 10px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--ink-3);
          z-index: 3;
        }
        .hs-line {
          width: 1px; height: 60px;
          background: linear-gradient(180deg, var(--ink-3), transparent);
        }

        @media (max-width: 800px) {
          .hero { padding-top: 120px; }
          .hero-meta { grid-template-columns: 1fr; gap: 18px; }
          .hero-scroll { display: none; }
        }
      `}</style>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  STATS MARQUEE — sliding numbers on a hazard-striped band            */
/* ------------------------------------------------------------------ */
function StatsBand() {
  const stats = [
    ["14,800+", "Acres cleared"],
    ["2,300+",  "Jobs completed"],
    ["13",       "Years in business"],
    ["5",        "Counties served"],
    ["48hr",    "Quote turnaround"],
    ["100%",    "Insured & licensed"],
    ["4.9★",    "Google rating"],
    ["0",        "Hidden fees"],
  ];
  // Duplicate for seamless loop
  const loop = [...stats, ...stats];

  return (
    <section id="stats" className="stats">
      <div className="stripes-bar" aria-hidden="true" />
      <div className="stats-marquee">
        <div className="marquee-track">
          {loop.map((s, i) => (
            <div className="stat" key={i}>
              <span className="stat-num">{s[0]}</span>
              <span className="stat-lbl">{s[1]}</span>
              <span className="stat-sep" aria-hidden="true">+</span>
            </div>
          ))}
        </div>
      </div>
      <div className="stripes-bar" aria-hidden="true" />

      <style>{`
        .stats {
          background: var(--bg-2);
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          position: relative;
        }
        .stripes-bar {
          height: 14px;
          background-image: repeating-linear-gradient(
            -45deg,
            #d97706 0 14px,
            #14171a 14px 28px
          );
          opacity: 0.95;
        }
        .stats-marquee {
          overflow: hidden;
          padding: 36px 0;
        }
        .marquee-track {
          display: inline-flex;
          gap: 64px;
          white-space: nowrap;
          animation: marquee 60s linear infinite;
          will-change: transform;
        }
        .stat {
          display: inline-flex;
          align-items: baseline;
          gap: 16px;
        }
        .stat-num {
          font-family: var(--display);
          font-size: clamp(40px, 5vw, 64px);
          color: var(--ink);
          letter-spacing: -0.01em;
        }
        .stat-lbl {
          font-family: var(--mono);
          text-transform: uppercase;
          letter-spacing: 0.16em;
          font-size: 12px;
          color: var(--ink-3);
        }
        .stat-sep {
          font-family: var(--display);
          font-size: 40px;
          color: var(--clay);
          margin-left: 32px;
        }
      `}</style>
    </section>
  );
}

/* Expose to other script files */
Object.assign(window, { Photo, Logo, Nav, Hero, StatsBand });