// Hero — 3 variants controlled by window.__TWEAKS.heroVariant
// editorial | magazine | split

const { useState, useEffect, useRef } = React;

// ----- Nav -----
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();window.addEventListener('scroll', on);
    return () => window.removeEventListener('scroll', on);
  }, []);
  const linkStyle = {
    fontSize: 13, letterSpacing: "0.06em", textTransform: "uppercase",
    color: "var(--ink-dim)", transition: "color 0.2s"
  };
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      padding: scrolled ? "14px 32px" : "22px 32px",
      background: scrolled ? "rgba(11,11,11,0.85)" : "transparent",
      backdropFilter: scrolled ? "blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "all 0.3s ease",
      display: "flex", alignItems: "center", justifyContent: "space-between"
    }} className="fb-nav">
      <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{
          width: 32, height: 32, background: "#fff", borderRadius: 4,
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          overflow: "hidden"
        }}>
          <img src="assets/firebrand-logo.jpeg" alt="Firebrand Media"
          style={{ width: "100%", height: "100%", objectFit: "contain" }} />
        </span>
        <span style={{ fontSize: 15, letterSpacing: "0.01em", fontWeight: 500 }}>
          Firebrand Media
        </span>
      </a>
      <div className="fb-nav-links" style={{ display: "flex", gap: 36 }}>
        <a href="#work" style={linkStyle} className="navlink">Work</a>
        <a href="#process" style={linkStyle} className="navlink">Process</a>
        <a href="#calc" style={linkStyle} className="navlink">Calculator</a>
        <a href="#about" style={linkStyle} className="navlink">About</a>
        <a href="#faq" style={linkStyle} className="navlink">FAQ</a>
      </div>
      <a href="#contact" className="fb-nav-cta" style={{
        padding: "10px 18px", background: "var(--ink)", color: "#000",
        fontSize: 13, fontWeight: 500, letterSpacing: "0.02em",
        display: "inline-flex", alignItems: "center", gap: 8
      }}>
        Book a call
        <span style={{ fontSize: 16 }}>→</span>
      </a>
      <button className="fb-menu-btn" onClick={() => setOpen(!open)} style={{
        display: "none", width: 36, height: 36, flexDirection: "column",
        justifyContent: "center", alignItems: "center", gap: 5
      }}>
        <span style={{ width: 20, height: 1.5, background: "var(--ink)" }} />
        <span style={{ width: 20, height: 1.5, background: "var(--ink)" }} />
      </button>
      {open &&
      <div className="fb-mobile-menu" style={{
        position: "fixed", top: 60, left: 0, right: 0, background: "var(--bg)",
        borderBottom: "1px solid var(--line)", padding: "24px 32px",
        display: "flex", flexDirection: "column", gap: 16
      }}>
          {["Work", "Process", "Calculator", "About", "FAQ", "Contact"].map((l) =>
        <a key={l} href={"#" + l.toLowerCase()} onClick={() => setOpen(false)}
        style={{ fontSize: 22, letterSpacing: "-0.01em" }}>{l}</a>
        )}
        </div>
      }
    </nav>);

};

// ----- Animated marquee tagline ------
const Marquee = ({ children, speed = 40 }) =>
<div style={{ overflow: "hidden", whiteSpace: "nowrap", padding: "12px 0",
  borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
  background: "var(--bg)", opacity: "0" }}>
    <div style={{
    display: "inline-block",
    animation: `marquee ${speed}s linear infinite`,
    fontFamily: "'IBM Plex Mono', monospace",
    fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
    color: "var(--ink-dim)"
  }}>
      {Array(6).fill(0).map((_, i) =>
    <span key={i} style={{ paddingRight: 48 }}>
          {children} <span style={{ color: "var(--flame)", padding: "0 20px" }}>✦</span>
        </span>
    )}
    </div>
  </div>;


// ============ HERO VARIANT A — EDITORIAL ============
const HeroEditorial = () =>
<section id="top" className="hero-ed" style={{
  minHeight: "100vh", padding: "140px 32px 0", position: "relative",
  display: "flex", flexDirection: "column", justifyContent: "flex-end"
}}>
    {/* masthead */}
    <div style={{
    display: "flex", justifyContent: "space-between", alignItems: "flex-start",
    borderBottom: "1px solid var(--line)", paddingBottom: 14, marginBottom: 48,
    fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
    letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-faint)"
  }}>
      <span>Vol. 04 / Iss. 12</span>
      <span className="hide-sm">Firebrand Media — Growth for Land Clearing Operators</span>
      <span>Est. 2021</span>
    </div>

    <div className="hero-ed-grid" style={{
    display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end"
  }}>
      <div>
        <div className="mono" style={{
        fontSize: 12, color: "var(--flame)", letterSpacing: "0.14em",
        textTransform: "uppercase", marginBottom: 32,
        display: "flex", alignItems: "center", gap: 12
      }}>
          <span style={{ width: 24, height: 1, background: "var(--flame)" }} />
          Meta lead generation
        </div>
        <h1 className="hero-ed-title" style={{
        fontSize: "clamp(48px, 7vw, 104px)",
        lineHeight: 0.92, letterSpacing: "-0.03em", fontWeight: 500,
        marginBottom: 32
      }}>
          No more paying <br />
          for <em style={{
          fontFamily: "'Space Grotesk'", fontStyle: "italic", fontWeight: 400,
          color: "var(--flame)"
        }}>bad leads</em>.<br />
          Pay when <br />
          you're <span style={{ position: "relative" }}>
            happy
            <svg viewBox="0 0 200 12" preserveAspectRatio="none" style={{
            position: "absolute", left: 0, right: 0, bottom: -6, width: "100%", height: 10
          }}>
              <path d="M 2 6 Q 50 1 100 6 T 198 6" stroke="var(--flame)" strokeWidth="2.5" fill="none" />
            </svg>
          </span>.
        </h1>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href="#contact" className="btn-primary">
            Book a discovery call <span>→</span>
          </a>
          <a href="#work" className="btn-ghost">
            See client results
          </a>
        </div>
      </div>

      <div className="hero-ed-right">
        <p style={{
        fontSize: 17, lineHeight: 1.55, color: "var(--ink-dim)",
        maxWidth: 420, marginBottom: 24, marginLeft: "auto"
      }}>
          We build lead gen systems for land clearing companies.
          Booked appointments with property owners in your service area — or you don't pay.
        </p>
        <div style={{
        borderLeft: "2px solid var(--flame)", paddingLeft: 20,
        marginLeft: "auto", maxWidth: 420, display: "none"
      }}>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
          letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 6 }}>
            Currently serving
          </div>
          <div style={{ fontSize: 15 }}>
            14 operators across TX, FL, GA, NC, SC, OK
          </div>
        </div>
      </div>
    </div>

    {/* large photo strip */}
    <div style={{ marginTop: 80, display: "grid",
    gridTemplateColumns: "2fr 1fr 1fr", gap: 2,
    height: "clamp(200px, 28vw, 360px)",
    marginBottom: 0
  }} className="hero-photostrip">
      <img src="photos/hero-cover.png" alt="forestry mulcher clearing land" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      <img src="photos/hero-before.png" alt="operator portrait" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      <img src="photos/hero-after.png" alt="forestry mulcher actively clearing" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    </div>
  </section>;


// ============ HERO VARIANT B — MAGAZINE COVER ============
const HeroMagazine = () =>
<section id="top" style={{
  minHeight: "100vh", padding: "100px 32px 40px", position: "relative"
}}>
    <div style={{
    position: "relative", height: "calc(100vh - 140px)", minHeight: 620,
    overflow: "hidden"
  }}>
      <img src="photos/hero-cover.png" alt="forestry mulcher clearing overgrown parcel" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{
      position: "absolute", inset: 0,
      background: "linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 70%, rgba(11,11,11,1) 100%)"
    }} />
      <div style={{
      position: "absolute", inset: 0, padding: "32px",
      display: "flex", flexDirection: "column", justifyContent: "space-between"
    }}>
        <div style={{ display: "flex", justifyContent: "space-between",
        fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
        letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--warm)" }}>
          <span>Firebrand / №04</span>
          <span className="hide-sm">Growth playbook — Q2 2026</span>
          <span>$— / free</span>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 12, color: "var(--flame)",
          letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 20 }}>
            Issue theme — Stop paying for bad leads
          </div>
          <h1 style={{
          fontSize: "clamp(56px, 10vw, 160px)", lineHeight: 0.85,
          letterSpacing: "-0.04em", fontWeight: 600,
          maxWidth: "12ch"
        }}>
            Burn the <span style={{ color: "var(--flame)", fontStyle: "italic", fontWeight: 400 }}>bad leads</span>.
          </h1>
          <p style={{ fontSize: "clamp(16px, 1.4vw, 20px)", color: "var(--ink-dim)",
          maxWidth: 520, marginTop: 24, lineHeight: 1.5 }}>
            Performance-based Meta ads for land clearing operators.
            You pay when we book you a qualified job — not a second before.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <a href="#contact" className="btn-primary">Book a discovery call <span>→</span></a>
            <a href="#work" className="btn-ghost">See the work</a>
          </div>
        </div>
      </div>
    </div>
  </section>;


// ============ HERO VARIANT C — SPLIT SYSTEM ============
const HeroSplit = () =>
<section id="top" className="hero-split" style={{
  minHeight: "100vh", paddingTop: 80,
  display: "grid", gridTemplateColumns: "1.1fr 0.9fr"
}}>
    <div style={{ padding: "80px 48px", display: "flex", flexDirection: "column", justifyContent: "center", borderRight: "1px solid var(--line)" }}>
      <div className="mono" style={{ fontSize: 12, color: "var(--flame)",
      letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 28 }}>
        ● Performance-based · Land clearing specialists
      </div>
      <h1 style={{ fontSize: "clamp(44px, 6vw, 88px)", lineHeight: 0.95,
      letterSpacing: "-0.03em", fontWeight: 500, marginBottom: 28 }}>
        Qualified jobs on the calendar.<br />
        <span style={{ color: "var(--flame)", fontStyle: "italic", fontWeight: 400 }}>Not another dashboard.</span>
      </h1>
      <p style={{ fontSize: 19, color: "var(--ink-dim)", maxWidth: 520, lineHeight: 1.55, marginBottom: 36 }}>
        Firebrand builds Meta lead gen systems for land clearing operators across the Southeast and beyond. You only pay when you're happy with the lead.
      </p>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 56 }}>
        <a href="#contact" className="btn-primary">Book a call <span>→</span></a>
        <a href="#calc" className="btn-ghost">Run the numbers</a>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line)" }}>
        {[
      ["$4.2M", "booked for clients — last 12 mo"],
      ["312", "qualified jobs sent"],
      ["$34", "avg. cost per booked call"]].
      map(([n, l]) =>
      <div key={n} style={{ background: "var(--bg)", padding: "20px 4px" }}>
            <div className="mono" style={{ fontSize: "clamp(24px, 2.4vw, 32px)", color: "var(--ink)", fontWeight: 500 }}>{n}</div>
            <div style={{ fontSize: 12, color: "var(--ink-faint)", marginTop: 6, textTransform: "uppercase", letterSpacing: "0.08em" }}>{l}</div>
          </div>
      )}
      </div>
    </div>
    <div style={{ position: "relative" }}>
      <PhotoPlaceholder label="active jobsite — skid steer, 18 ac." tone="ember" scene="machinery" ratio="auto" style={{ height: "100%", minHeight: 600 }} />
    </div>
  </section>;


const Hero = () => {
  const v = window.__TWEAKS.heroVariant;
  if (v === "magazine") return <HeroMagazine />;
  if (v === "split") return <HeroSplit />;
  return <HeroEditorial />;
};

Object.assign(window, { Nav, Hero, Marquee });