// Main sections: Stats, Services, Process, Case studies, Testimonials, Founder, FAQ, Contact, Footer

const { useState: useSt, useEffect: useEf, useRef: useRf } = React;

// ---- useInView for scroll-triggered animations ----
const useInView = (opts = { threshold: 0.15 }) => {
  const ref = useRf(null);
  const [seen, setSeen] = useSt(false);
  useEf(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setSeen(true);io.disconnect();}
    }, opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, seen];
};

// ---- Animated counter ----
const Counter = ({ to, prefix = "", suffix = "", decimals = 0, duration = 1400 }) => {
  const [ref, seen] = useInView();
  const [val, setVal] = useSt(0);
  useEf(() => {
    if (!seen) return;
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(to * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [seen, to, duration]);
  const fmt = val.toLocaleString(undefined, {
    minimumFractionDigits: decimals, maximumFractionDigits: decimals
  });
  return <span ref={ref}>{prefix}{fmt}{suffix}</span>;
};

// ---- Section header atom ----
const SectionLabel = ({ num, children, style = {} }) =>
<div className="mono" style={{
  display: "flex", alignItems: "center", gap: 14,
  fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
  color: "var(--flame)", marginBottom: 40, ...style
}}>
    <span style={{ color: "var(--ink-faint)" }}>{num}</span>
    <span style={{ width: 24, height: 1, background: "var(--flame)" }} />
    {children}
  </div>;


// =========== STATS BAR ===========
const Stats = () =>
<section style={{
  borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
  padding: "60px 32px"
}}>
    <div className="stats-grid" style={{
    display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 48,
    maxWidth: 1400, margin: "0 auto"
  }}>
      {[
    ["$4.2M", "Revenue booked for clients in the last 12 months", "revenue"],
    ["312", "Qualified land clearing jobs placed on calendars", "jobs"],
    ["$34", "Average cost per booked consultation", "cpl"],
    ["14", "Operators we're actively running ads for", "ops"]].
    map(([n, l, k], i) =>
    <div key={k} style={{ borderTop: "1px solid var(--line)", paddingTop: 20 }}>
          <div className="mono" style={{
        fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1, fontWeight: 500,
        marginBottom: 16, letterSpacing: "-0.02em"
      }}>
            {k === "revenue" && <><Counter to={4.2} decimals={1} prefix="$" suffix="M" /></>}
            {k === "jobs" && <Counter to={312} />}
            {k === "cpl" && <Counter to={34} prefix="$" />}
            {k === "ops" && <Counter to={14} />}
          </div>
          <div style={{ fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.5, maxWidth: 240 }}>
            {l}
          </div>
        </div>
    )}
    </div>
  </section>;


// =========== SERVICES — hover reveals ===========
const ServiceRow = ({ idx, label, tag, desc, bullets }) => {
  const [hover, setHover] = useSt(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="service-row"
      style={{
        position: "relative",
        borderTop: "1px solid var(--line)",
        padding: "36px 0",
        cursor: "pointer",
        transition: "padding 0.3s ease"
      }}>
      
      <div style={{
        display: "grid", gridTemplateColumns: "80px 1fr auto 60px",
        gap: 32, alignItems: "center"
      }} className="service-row-grid">
        <div className="mono" style={{ fontSize: 12, color: "var(--ink-faint)", letterSpacing: "0.1em" }}>
          {String(idx).padStart(2, "0")}
        </div>
        <div>
          <h3 style={{
            fontSize: "clamp(28px, 3.4vw, 44px)", lineHeight: 1.05,
            letterSpacing: "-0.02em", fontWeight: 500,
            color: hover ? "var(--ink)" : "var(--ink-dim)",
            transition: "color 0.25s"
          }}>
            {label}
          </h3>
        </div>
        <div className="mono hide-sm" style={{
          fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
          color: "var(--ink-faint)"
        }}>
          {tag}
        </div>
        <div style={{
          width: 36, height: 36, borderRadius: "50%",
          border: "1px solid var(--line)",
          display: "flex", alignItems: "center", justifyContent: "center",
          background: hover ? "var(--flame)" : "transparent",
          color: hover ? "#000" : "var(--ink-dim)",
          transform: hover ? "rotate(45deg)" : "rotate(0deg)",
          transition: "all 0.3s ease",
          justifySelf: "end"
        }}>
          +
        </div>
      </div>
      <div style={{
        maxHeight: hover ? 260 : 0,
        opacity: hover ? 1 : 0,
        overflow: "hidden",
        transition: "max-height 0.4s ease, opacity 0.3s ease",
        paddingLeft: 112
      }} className="service-reveal">
        <div style={{ paddingTop: 24, paddingBottom: 8, display: "grid",
          gridTemplateColumns: "1fr 1fr", gap: 40 }} className="service-reveal-grid">
          <p style={{ fontSize: 16, color: "var(--ink-dim)", lineHeight: 1.55, maxWidth: 460 }}>
            {desc}
          </p>
          <ul style={{ listStyle: "none" }}>
            {bullets.map((b, i) =>
            <li key={i} style={{
              fontSize: 14, padding: "6px 0", color: "var(--ink)",
              display: "flex", alignItems: "baseline", gap: 12
            }}>
                <span className="mono" style={{ color: "var(--flame)", fontSize: 11 }}>
                  /{String(i + 1).padStart(2, "0")}
                </span>
                {b}
              </li>
            )}
          </ul>
        </div>
      </div>
    </div>);

};

const Services = () =>
<section id="services" style={{ padding: "140px 32px", maxWidth: 1400, margin: "0 auto" }}>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 48, marginBottom: 40 }}
  className="services-header">
      <div>
        <SectionLabel num="01">What we do</SectionLabel>
        <h2 style={{
        fontSize: "clamp(40px, 5.5vw, 80px)", lineHeight: 0.95,
        letterSpacing: "-0.03em", fontWeight: 500
      }}>
          A full lead engine,<br />
          <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--ink-dim)" }}>
            built around your crew.
          </span>
        </h2>
      </div>
      <div style={{ alignSelf: "end", paddingBottom: 20 }}>
        <p style={{ fontSize: 17, color: "var(--ink-dim)", maxWidth: 480, lineHeight: 1.55 }}>
          We specialize in one thing: getting land clearing operators booked with qualified property owners. Here's how.
        </p>
      </div>
    </div>

    <div>
      {[
    { label: "Meta lead generation", tag: "Core offer",
      desc: "Facebook & Instagram ad systems purpose-built for land clearing. We handle creative, targeting, budget pacing, and lead follow-up automation so your phone rings with qualified property owners.",
      bullets: ["Geo-fenced targeting by zip & acreage", "Video + carousel creative shot on real jobsites", "Automated SMS callback in under 60s", "Weekly optimization calls"] },
    { label: "Lead qualification system", tag: "Infrastructure",
      desc: "The difference between a raw lead and a booked job is the 10 minutes after form submit. We build the SMS, email, and calendar flow that gets property owners on your calendar — fast.",
      bullets: ["Twilio-based instant SMS replies", "Acreage + urgency qualifier questions", "Direct-to-calendar booking links", "CRM pipeline setup (GHL or HubSpot)"] },
    { label: "Creative production", tag: "Monthly",
      desc: "Bad creative is why your ads don't work. We deliver fresh video and photo ad assets every month — shot on your jobsites or stock-matched to your market.",
      bullets: ["4 video ads per month", "Before/after photo packs", "Drone footage coordination", "A/B testing cycles"] },
    { label: "Tracking & reporting", tag: "Always on",
      desc: "You get a live dashboard showing leads, calls booked, and revenue closed — plus a weekly Loom from your account lead walking you through what's working.",
      bullets: ["Server-side pixel tracking (iOS 17+ safe)", "Revenue attribution by campaign", "Weekly video recaps", "Monthly strategy calls"] }].
    map((s, i) => <ServiceRow key={s.label} idx={i + 1} {...s} />)}
      <div style={{ borderTop: "1px solid var(--line)" }} />
    </div>

    <div style={{
    marginTop: 64, padding: 32, background: "var(--bg-2)",
    display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap"
  }}>
      <div>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em",
        textTransform: "uppercase", color: "var(--flame)", marginBottom: 6 }}>
          The guarantee
        </div>
        <p style={{ fontSize: 20, letterSpacing: "-0.01em", maxWidth: 720 }}>
          If we don't deliver booked jobs in the first 30 days, you don't pay us. Simple as that.
        </p>
      </div>
      <a href="#contact" className="btn-primary">See if you qualify <span>→</span></a>
    </div>
  </section>;


// =========== PROCESS ===========
const Process = () => {
  const steps = [
  { n: "01", h: "Discovery call", t: "30 minutes. We learn about your service area, crew size, job types, and current marketing. No pressure — if we're not a fit, we'll tell you.", d: "Day 1" },
  { n: "02", h: "Onboarding", t: "We audit your existing ads (if any), Google Business presence, site, and call handling. You get a written plan with projected CPL and monthly capacity.", d: "Day 2" },
  { n: "03", h: "Ads Launched", t: "We stand up your pixel, CRM pipeline, SMS automation, and first ad creative batch. Your number starts ringing with qualified leads.", d: "Day 3" },
  { n: "04", h: "Leads Delivered", t: "Weekly creative refreshes, budget pacing, and qualifier tuning. Scale budget as your crew capacity grows.", d: "Day 4" }];

  return (
    <section id="process" style={{ padding: "140px 32px", background: "var(--bg-2)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionLabel num="02">How it works</SectionLabel>
        <h2 style={{
          fontSize: "clamp(40px, 5.5vw, 80px)", lineHeight: 0.95,
          letterSpacing: "-0.03em", fontWeight: 500, marginBottom: 80, maxWidth: "14ch"
        }}>
          From first call to first booked job in <span style={{ color: "var(--flame)" }}>5 days</span>.
        </h2>
        <div className="process-grid" style={{ display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line)" }}>
          {steps.map((s) =>
          <div key={s.n} style={{ background: "var(--bg-2)", padding: "32px 24px", minHeight: 320,
            display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div className="mono" style={{ fontSize: 12,
                color: "var(--flame)", letterSpacing: "0.14em", marginBottom: 32 }}>
                  {s.n} — {s.d}
                </div>
                <h3 style={{ fontSize: 26, letterSpacing: "-0.01em", fontWeight: 500, marginBottom: 16 }}>
                  {s.h}
                </h3>
                <p style={{ fontSize: 15, color: "var(--ink-dim)", lineHeight: 1.55 }}>
                  {s.t}
                </p>
              </div>
              <div style={{
              marginTop: 40, fontSize: 32, color: "var(--ink-faint)"
            }}>↓</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// =========== CASE STUDIES ===========
const Case = ({ tag, company, location, headline, metrics, photo, tone }) => {
  const [ref, seen] = useInView({ threshold: 0.1 });
  return (
    <article ref={ref} className="case-card" style={{
      borderTop: "1px solid var(--line)",
      paddingTop: 48, paddingBottom: 48,
      opacity: seen ? 1 : 0, transform: seen ? "translateY(0)" : "translateY(24px)",
      transition: "opacity 0.7s ease, transform 0.7s ease"
    }}>
      <div className="case-grid" style={{
        display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "start"
      }}>
        <div>
          <div style={{ display: "flex", gap: 16, marginBottom: 24, alignItems: "center" }}>
            <span className="mono" style={{
              fontSize: 11, padding: "4px 10px", border: "1px solid var(--flame)",
              color: "var(--flame)", letterSpacing: "0.12em", textTransform: "uppercase"
            }}>{tag}</span>
            <span className="mono" style={{ fontSize: 12, color: "var(--ink-faint)", letterSpacing: "0.08em" }}>
              {company} — {location}
            </span>
          </div>
          <h3 style={{
            fontSize: "clamp(32px, 3.6vw, 52px)", lineHeight: 1.02,
            letterSpacing: "-0.02em", fontWeight: 500, marginBottom: 32
          }}>
            {headline}
          </h3>
          <div className="case-metrics" style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
            paddingTop: 24, borderTop: "1px solid var(--line)"
          }}>
            {metrics.map((m) =>
            <div key={m.l}>
                <div className="mono" style={{
                fontSize: "clamp(22px, 2.2vw, 30px)", lineHeight: 1, fontWeight: 500,
                color: "var(--ink)", marginBottom: 8
              }}>{m.n}</div>
                <div style={{ fontSize: 12, color: "var(--ink-faint)",
                textTransform: "uppercase", letterSpacing: "0.08em" }}>{m.l}</div>
              </div>
            )}
          </div>
        </div>
        <PhotoPlaceholder label={photo} tone={tone} scene="machinery" ratio="4/3" />
      </div>
    </article>);

};

const CaseStudies = () =>
<section id="work" style={{ padding: "140px 32px", maxWidth: 1400, margin: "0 auto" }}>
    <div style={{ display: "flex", justifyContent: "space-between",
    alignItems: "flex-end", marginBottom: 60, gap: 40, flexWrap: "wrap" }}>
      <div>
        <SectionLabel num="03">Selected work</SectionLabel>
        <h2 style={{
        fontSize: "clamp(40px, 5.5vw, 80px)", lineHeight: 0.95,
        letterSpacing: "-0.03em", fontWeight: 500, maxWidth: "14ch"
      }}>
          Results from real operators.
        </h2>
      </div>
      <p style={{ fontSize: 16, color: "var(--ink-dim)", maxWidth: 380 }}>
        A few of the land clearing companies currently running Firebrand systems.
      </p>
    </div>

    <Case
    tag="Case 01"
    company="Ironwood Land Co."
    location="Tyler, TX"
    headline="Built a 7-figure clearing operation from a one-man skid steer crew."
    photo="Ironwood site — 62-acre ranch clearing"
    tone="ember"
    metrics={[
    { n: "$1.4M", l: "Booked in 11 months" },
    { n: "184", l: "Qualified jobs" },
    { n: "12×", l: "Return on ad spend" }]
    } />
  
    <Case
    tag="Case 02"
    company="Palmetto Ground Works"
    location="Charleston, SC"
    headline="Scaled from 2 to 8 crews without hiring a single sales rep."
    photo="Palmetto — pine thinning operation"
    tone="warm"
    metrics={[
    { n: "$28", l: "Avg. cost per booked call" },
    { n: "68", l: "Calls booked last month" },
    { n: "4 mo", l: "To break even on system" }]
    } />
  
    <Case
    tag="Case 03"
    company="Deep South Clearing"
    location="Valdosta, GA"
    headline="Filled a 6-month backlog in the dead of winter off-season."
    photo="Deep South — forestry mulcher in cypress"
    tone="green"
    metrics={[
    { n: "42", l: "Jobs booked in Q1" },
    { n: "$89K", l: "Largest single contract" },
    { n: "2.1%", l: "Meta click-to-book rate" }]
    } />
  
    <div style={{ borderTop: "1px solid var(--line)" }} />
  </section>;


// =========== TESTIMONIALS ===========
const Testimonials = () => {
  const quotes = [
  { q: "Within three weeks the phone was ringing so much we had to pause ads to catch up. I've never had that problem before.", a: "Marcus Hollis", r: "Owner, Ironwood Land Co." },
  { q: "Firebrand is the only agency that actually understood what a qualified land clearing lead looks like. We stopped wasting time on tire-kickers.", a: "DeShawn Rivers", r: "Operations Lead, Palmetto Ground Works" },
  { q: "I was burned by two other marketing companies before these guys. They're different. You only pay when it works.", a: "Tucker Reid", r: "Founder, Deep South Clearing" }];

  return (
    <section style={{ padding: "140px 32px", background: "var(--bg-2)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <SectionLabel num="04">In their words</SectionLabel>
        <div className="testimonial-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line)"
        }}>
          {quotes.map((t, i) =>
          <figure key={i} style={{ background: "var(--bg-2)", padding: 36,
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            minHeight: 380 }}>
              <div style={{ fontSize: 38, lineHeight: 1, color: "var(--flame)", marginBottom: 24 }}>“</div>
              <blockquote style={{
              fontSize: "clamp(18px, 1.5vw, 22px)", lineHeight: 1.4,
              letterSpacing: "-0.005em", fontWeight: 400, flex: 1
            }}>
                {t.q}
              </blockquote>
              <figcaption style={{ marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
                <div style={{ fontSize: 15, marginBottom: 2 }}>{t.a}</div>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
                letterSpacing: "0.08em", textTransform: "uppercase" }}>{t.r}</div>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

};

// =========== FOUNDER ===========
const Founder = () =>
<section id="about" style={{ padding: "140px 32px", maxWidth: 1400, margin: "0 auto" }}>
    <div className="founder-grid" style={{
    display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start"
  }}>
      {window.__TWEAKS.showFounderPhoto &&
    <div>
          <div style={{ aspectRatio: "4 / 5", width: "100%", overflow: "hidden", background: "#000" }}>
            <img src="photos/founder.jpg" alt="Cole — founder, Firebrand Media" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
        letterSpacing: "0.08em", textTransform: "uppercase", marginTop: 14,
        display: "flex", justifyContent: "space-between" }}>
            <span>DYLAN SAWYER — FOUNDER</span>
            <span>2024</span>
          </div>
        </div>
    }
      <div>
        <SectionLabel num="05">Founder's note</SectionLabel>
        <p style={{
        fontSize: "clamp(22px, 2.2vw, 32px)", lineHeight: 1.35,
        letterSpacing: "-0.01em", fontWeight: 400, marginBottom: 32
      }}>
          I grew up around heavy equipment. My uncle ran a clearing crew in East Texas for 30 years — and he never spent a dollar on marketing that actually worked.
        </p>
        <p style={{ fontSize: 17, color: "var(--ink-dim)", lineHeight: 1.65, marginBottom: 20, maxWidth: 620 }}>
          That's why I started Firebrand. Every "marketing agency" I watched pitch him promised the world and delivered Yelp leads and SEO reports. Nobody understood the difference between a homeowner who wants a tree cut and a rancher with 80 acres of post oak to clear.
        </p>
        <p style={{ fontSize: 17, color: "var(--ink-dim)", lineHeight: 1.65, marginBottom: 40, maxWidth: 620 }}>So we built the agency we wished had existed for him. Land clearing only. Performance-based. You pay when your calendar fills up with the right jobs — not blindly

      </p>
        <div className="mono" style={{
        fontSize: 14, letterSpacing: "0.02em", display: "flex", alignItems: "center", gap: 14
      }}>
          <span style={{ fontFamily: "'Space Grotesk'", fontStyle: "italic", fontSize: 28,
          color: "var(--flame)" }}>Dylan Sawyer</span>
          <span style={{ color: "var(--ink-faint)" }}>— Founder, Firebrand Media</span>
        </div>
      </div>
    </div>
  </section>;


// =========== FAQ ===========
const FAQItem = ({ q, a }) => {
  const [open, setOpen] = useSt(false);
  return (
    <div style={{ borderTop: "1px solid var(--line)" }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", textAlign: "left", padding: "28px 0",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24
      }}>
        <span style={{ fontSize: "clamp(18px, 1.7vw, 22px)", letterSpacing: "-0.01em",
          color: open ? "var(--ink)" : "var(--ink-dim)", transition: "color 0.2s", textAlign: "left" }}>
          {q}
        </span>
        <span style={{
          width: 32, height: 32, borderRadius: "50%", border: "1px solid var(--line)",
          display: "flex", alignItems: "center", justifyContent: "center",
          transform: open ? "rotate(45deg)" : "rotate(0deg)",
          background: open ? "var(--flame)" : "transparent",
          color: open ? "#000" : "var(--ink-dim)",
          transition: "all 0.25s", flexShrink: 0
        }}>+</span>
      </button>
      <div style={{
        maxHeight: open ? 300 : 0, overflow: "hidden",
        transition: "max-height 0.35s ease", paddingLeft: 0
      }}>
        <p style={{ fontSize: 16, color: "var(--ink-dim)",
          lineHeight: 1.65, paddingBottom: 28, maxWidth: 760 }}>
          {a}
        </p>
      </div>
    </div>);

};

const FAQ = () =>
<section id="faq" style={{ padding: "140px 32px", maxWidth: 1400, margin: "0 auto" }}>
    <div className="faq-grid" style={{
    display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80
  }}>
      <div>
        <SectionLabel num="06">Questions</SectionLabel>
        <h2 style={{
        fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 0.95,
        letterSpacing: "-0.03em", fontWeight: 500
      }}>
          Frequently<br />asked.
        </h2>
      </div>
      <div>
        {[
      { q: "What does \"pay when you're happy\" actually mean?", a: "We charge a small setup fee to build your systems, then our monthly management fee is only due after we've delivered a minimum of 15 qualified booked calls. If we don't hit that in month one, there's no fee that month. We stake our business on performance." },
      { q: "What does a qualified lead look like for land clearing?", a: "A property owner (not a renter) in your service area, with a specific parcel in mind, an acreage range that matches your crew capacity, and a timeline of 90 days or less. We filter out homeowners looking for single-tree removal, tire-kickers, and out-of-area inquiries." },
      { q: "Do I need an existing website or Facebook page?", a: "You need an active Facebook business page — if you don't have one, we'll help you set it up. A dedicated landing page isn't required; we build you a purpose-built one that outperforms most clearing company websites." },
      { q: "Which states and markets do you work in?", a: "We work with land clearing operators across the U.S. We only take one operator per service area to prevent competing with ourselves — reach out and we'll confirm availability in your territory." },
      { q: "How much should I budget for ad spend?", a: "We can start as low as $20/day — about $600/month — and we've had operators scale from there. Most of our operators end up running $3,000–$5,000/month in Meta ad spend once they see what's working. This is paid directly to Meta and is separate from our management fee." },
      { q: "What if my crew can't handle more jobs yet?", a: "We pause ads until you can. We'd rather build a sustainable engine than overwhelm you. Several of our clients run in \"season mode\" — aggressive in spring and fall, slower in summer/winter." }].
      map((f, i) => <FAQItem key={i} {...f} />)}
        <div style={{ borderTop: "1px solid var(--line)" }} />
      </div>
    </div>
  </section>;


// =========== CONTACT ===========
const CALENDAR_URL = "https://api.leadconnectorhq.com/widget/booking/yGJ8ku3zJR6Cc0G0o9TG";

const Contact = () => {
  const [sent,    setSent]    = useSt(false);
  const [loading, setLoading] = useSt(false);
  const [error,   setError]   = useSt("");
  const [form, setForm] = useSt({ name: "", company: "", phone: "", area: "", spend: "" });

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || "Something went wrong.");
      }
      setSent(true);
    } catch (err) {
      setError("Something went wrong. Please call us directly.");
    } finally {
      setLoading(false);
    }
  };
  const field = (name, label, type = "text", placeholder = "") =>
  <label style={{ display: "block" }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
      letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 8 }}>{label}</div>
      <input type={type} required
    value={form[name]}
    onChange={(e) => setForm({ ...form, [name]: e.target.value })}
    placeholder={placeholder}
    style={{
      width: "100%", background: "transparent", border: "none",
      borderBottom: "1px solid var(--line)", padding: "8px 0 16px",
      color: "var(--ink)", fontSize: 18, fontFamily: "inherit",
      letterSpacing: "-0.005em", outline: "none"
    }} />
    </label>;

  return (
    <section id="contact" style={{ padding: "140px 32px", background: "var(--bg-2)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div className="contact-grid" style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80
        }}>
          <div>
            <SectionLabel num="07">Let's talk</SectionLabel>
            <h2 style={{
              fontSize: "clamp(48px, 7vw, 104px)", lineHeight: 0.9,
              letterSpacing: "-0.035em", fontWeight: 500, marginBottom: 32
            }}>
              Book a 30-minute discovery call.
            </h2>
            <p style={{ fontSize: 18, color: "var(--ink-dim)", lineHeight: 1.55, maxWidth: 520, marginBottom: 40 }}>
              No pitch deck, no pressure. We'll look at your market, your current marketing, and tell you straight whether we can help.
            </p>
            <div style={{ display: "grid", gap: 20, maxWidth: 420 }}>
              {[
              ["Response time", "Within 4 business hours"],
              ["Call length", "30 minutes, zero pressure"],
              ["Phone", "(445) 455-2448"],
              ["Email", "dylan@firebrand-media.org"]].
              map(([l, v]) =>
              <div key={l} style={{
                display: "grid", gridTemplateColumns: "140px 1fr", gap: 16,
                borderBottom: "1px solid var(--line)", paddingBottom: 14
              }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em",
                  textTransform: "uppercase", color: "var(--ink-faint)" }}>{l}</div>
                  <div style={{ fontSize: 15 }}>{v}</div>
                </div>
              )}
            </div>
          </div>
          <div style={{
            background: "var(--bg)", padding: "40px 36px",
            border: "1px solid var(--line)"
          }}>
            {!sent ?
            <form onSubmit={submit} style={{ display: "grid", gap: 28 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--flame)",
                letterSpacing: "0.14em", textTransform: "uppercase" }}>
                  New operator intake — 2026
                </div>
                {field("name", "Your name")}
                {field("company", "Company name")}
                {field("phone", "Phone", "tel", "(555) 123-4567")}
                {field("area", "Service area (city / state)")}
                <label style={{ display: "block" }}>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
                  letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 8 }}>
                    Monthly ad budget
                  </div>
                  <select required
                value={form.spend}
                onChange={(e) => setForm({ ...form, spend: e.target.value })}
                style={{
                  width: "100%", background: "transparent", border: "none",
                  borderBottom: "1px solid var(--line)", padding: "8px 0 16px",
                  color: form.spend ? "var(--ink)" : "var(--ink-faint)", fontSize: 18,
                  fontFamily: "inherit", outline: "none", appearance: "none"
                }}>
                    <option value="" style={{ color: "#000" }}>Select a range</option>
                    <option value="600-1500" style={{ color: "#000" }}>$600 – $1,500 (starter)</option>
                    <option value="1500-3000" style={{ color: "#000" }}>$1,500 – $3,000</option>
                    <option value="3000-5000" style={{ color: "#000" }}>$3,000 – $5,000</option>
                    <option value="5000-10000" style={{ color: "#000" }}>$5,000 – $10,000</option>
                    <option value="10000plus" style={{ color: "#000" }}>$10,000+</option>
                  </select>
                </label>
                {error && (
                  <div style={{ color: "var(--flame)", fontSize: 13, fontFamily: "'IBM Plex Mono', monospace" }}>
                    ▲ {error}
                  </div>
                )}
                <button type="submit" disabled={loading} style={{
                marginTop: 8, padding: "16px 24px",
                background: loading ? "var(--bg-3)" : "var(--flame)",
                color: loading ? "var(--ink-faint)" : "#000",
                fontSize: 15, letterSpacing: "0.01em", fontWeight: 500,
                display: "inline-flex", alignItems: "center", justifyContent: "space-between", gap: 12,
                cursor: loading ? "not-allowed" : "pointer"
              }}>
                  {loading ? "Sending…" : "Request a discovery call"}
                  {!loading && <span style={{ fontSize: 18 }}>→</span>}
                </button>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink-faint)",
                letterSpacing: "0.08em", textTransform: "uppercase", textAlign: "center" }}>
                  No spam. We reply within 4 business hours.
                </div>
              </form> :

            <div style={{ textAlign: "center", padding: "48px 20px" }}>
                <div style={{
                width: 64, height: 64, borderRadius: "50%", background: "var(--flame)",
                color: "#000", fontSize: 32, display: "inline-flex",
                alignItems: "center", justifyContent: "center", marginBottom: 24
              }}>✓</div>
                <h3 style={{ fontSize: 28, letterSpacing: "-0.02em", marginBottom: 12 }}>
                  Got it, {form.name.split(" ")[0] || "talk soon"}.
                </h3>
                <p style={{ color: "var(--ink-dim)", fontSize: 16, lineHeight: 1.5, marginBottom: 32 }}>
                  We'll be in touch at {form.phone || "your phone"} within 4 business hours.
                </p>
                <a href={CALENDAR_URL} target="_blank" rel="noopener noreferrer" style={{
                  display: "inline-flex", alignItems: "center", gap: 10,
                  padding: "14px 24px", background: "var(--flame)", color: "#000",
                  fontSize: 14, fontWeight: 500, letterSpacing: "0.01em"
                }}>
                  Book your call now <span>→</span>
                </a>
                <div className="mono" style={{ marginTop: 16, fontSize: 10, color: "var(--ink-faint)",
                letterSpacing: "0.08em", textTransform: "uppercase" }}>
                  Skip the wait — pick a time that works for you
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

};

// =========== FOOTER ===========
const Footer = () =>
<footer style={{ borderTop: "1px solid var(--line)", padding: "80px 32px 40px" }}>
    <div style={{ maxWidth: 1400, margin: "0 auto" }}>
      <div style={{
      display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 60, marginBottom: 80
    }} className="footer-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
            <span style={{
            width: 40, height: 40, 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: 18, fontWeight: 500 }}>Firebrand Media</span>
          </div>
          <p style={{ fontSize: 15, color: "var(--ink-dim)", lineHeight: 1.55, maxWidth: 380 }}>
            Performance-based Meta lead generation for land clearing operators. Pay when you're happy — never before.
          </p>
        </div>
        {[
      { h: "Pages", l: [["Home", "#top"], ["Process", "#process"], ["Work", "#work"], ["About", "#about"], ["FAQ", "#faq"]] },
      { h: "Contact", l: [["Book a call", "#contact"]] }].
      map((col) =>
      <div key={col.h}>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)",
          letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 20 }}>
              {col.h}
            </div>
            <ul style={{ listStyle: "none", display: "grid", gap: 10 }}>
              {col.l.map(([label, href]) =>
          <li key={label}>
                  {href ? <a href={href} style={{ fontSize: 14 }}>{label}</a> :
            <span style={{ fontSize: 14, color: "var(--ink-dim)" }}>{label}</span>}
                </li>
          )}
            </ul>
          </div>
      )}
      </div>
      <div style={{
      paddingTop: 28, borderTop: "1px solid var(--line)",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
      letterSpacing: "0.08em", textTransform: "uppercase",
      color: "var(--ink-faint)", flexWrap: "wrap", gap: 12
    }}>
        <span>© 2026 Firebrand Media, LLC</span>
        <span>No more paying for bad leads</span>
        <span>
          <a href="dashboard/login.html"
             title=""
             style={{ color: "var(--ink-faint)", opacity: 0.5, letterSpacing: "0.3em" }}
             aria-label="internal">·</a>
        </span>
      </div>
    </div>
  </footer>;

Object.assign(window, {
  Stats, Services, Process, CaseStudies, Testimonials, Founder, FAQ, Contact, Footer
});
