/* ============================================================
   Reynard Marketing — homepage sections (part B)
   How we hunt · What we do · Why Reynard · Results · CTA · Footer
   ============================================================ */

/* ---------------- HOW WE HUNT (3 steps) ---------------- */
function HowWeHunt({ motion }) {
  const steps = [
    [Icon.route, "01", "Track the trail",
      "A tracking number and tag on every click, call, and form. The moment a lead comes in, we know exactly which ad, search, or page sent it."],
    [Icon.target, "02", "Bring back the business",
      "PPC, SEO, websites, and funnels run as one system — pointed at the searches and moments that turn into real, booked jobs."],
    [Icon.receipt, "03", "Show you the catch",
      "A plain dashboard: calls, booked jobs, and cost per job. Real numbers tied to real money. No vanity metrics, no guessing."],
  ];
  return (
    <section id="how" style={{ padding: "clamp(34px,5vw,80px) clamp(16px,4vw,40px)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto" }}>
        <Reveal enabled={motion}>
          <div style={{ maxWidth: 660, marginBottom: "clamp(22px,3vw,38px)" }}>
            <Eyebrow>How we hunt</Eyebrow>
            <h2 className="h1" style={{ color: "var(--text-on-dark)", margin: "14px 0 14px" }}>
              Three moves. Every dollar accounted for.
            </h2>
            <p className="lead" style={{ color: "var(--text-on-dark-soft)", margin: 0 }}>
              It’s data-driven, end to end. Every tracked call and booked job feeds back into the
              system — so the hunt gets sharper the longer we run it.
            </p>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "18px" }} className="three-grid">
          {steps.map(([ic, n, t, d], i) => (
            <Reveal key={t} enabled={motion} delay={i * 110}>
              <StepCard ic={ic} n={n} t={t} d={d} />
            </Reveal>
          ))}
        </div>
        <Reveal enabled={motion} delay={120}>
          <Glass style={{ marginTop: "18px", padding: "22px 26px", borderRadius: "var(--r-xl)",
            display: "flex", alignItems: "center", gap: "20px", flexWrap: "wrap" }}>
            <div style={{ width: 50, height: 50, borderRadius: "var(--r-sm)", display: "grid", placeItems: "center", flexShrink: 0,
              background: "rgba(224,137,47,0.14)", border: "1px solid rgba(224,137,47,0.3)", color: "var(--amber-400)" }}>
              {Icon.loop({ s: 25 })}
            </div>
            <div style={{ flex: 1, minWidth: 240 }}>
              <div className="eyebrow" style={{ color: "var(--amber-400)", marginBottom: 7 }}>And then it compounds</div>
              <p className="body" style={{ color: "var(--text-on-dark-soft)", margin: 0, fontSize: "1.02rem", maxWidth: 760 }}>
                Every booked job teaches the algorithms who to chase next. The data goes back in,
                the targeting tightens, and your cost per job keeps dropping — a loop that pays you
                back the longer it runs.
              </p>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: "12px", fontFamily: "var(--font-mono)", flexShrink: 0 }}>
              <span className="data" style={{ color: "var(--text-on-dark)", fontSize: "0.92rem" }}>booked job</span>
              <span style={{ color: "var(--amber-400)" }}>{Icon.arrow({ s: 18 })}</span>
              <span className="data" style={{ color: "var(--text-on-dark)", fontSize: "0.92rem" }}>better targeting</span>
              <span style={{ color: "var(--amber-400)" }}>{Icon.arrow({ s: 18 })}</span>
              <span className="data" style={{ color: "var(--amber-400)", fontSize: "0.92rem" }}>next job</span>
            </div>
          </Glass>
        </Reveal>
      </div>
    </section>
  );
}
function StepCard({ ic, n, t, d }) {
  const [h, setH] = React.useState(false);
  return (
    <Glass onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ padding: "28px 26px", height: "100%", display: "flex", flexDirection: "column",
        borderRadius: "var(--r-xl)", transition: "transform var(--dur) var(--ease-out), box-shadow var(--dur)",
        transform: h ? "translateY(-4px)" : "none",
        boxShadow: h ? "var(--sh-glass-lg), var(--inset-glass-hi)" : "var(--sh-glass-md), var(--inset-glass-hi)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ width: 50, height: 50, borderRadius: "var(--r-sm)", display: "grid", placeItems: "center",
          background: "rgba(224,137,47,0.14)", border: "1px solid rgba(224,137,47,0.3)", color: "var(--amber-400)" }}>
          {ic({ s: 25 })}
        </div>
        <span className="data" style={{ fontSize: "1.6rem", color: "var(--text-on-dark-mute)", opacity: 0.6 }}>{n}</span>
      </div>
      <h3 className="h3" style={{ color: "var(--text-on-dark)", margin: "20px 0 9px" }}>{t}</h3>
      <p className="body" style={{ color: "var(--text-on-dark-soft)", margin: 0, fontSize: "0.97rem" }}>{d}</p>
    </Glass>
  );
}

/* ---------------- WHAT WE DO (4 services, one line each) ---------------- */
function Services({ motion }) {
  const items = [
    [Icon.target, "PPC", "Google and Local Services Ads aimed at searches that turn into booked jobs."],
    [Icon.search, "SEO", "Show up in the map pack and search where customers are already looking for you."],
    [Icon.layout, "Websites", "Fast, trust-building sites engineered to turn a visit into a phone call."],
    [Icon.funnel, "Funnels", "Landing pages and follow-up that track every dollar back to a real call."],
  ];
  return (
    <section id="services" style={{ padding: "clamp(34px,5vw,80px) clamp(16px,4vw,40px)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto" }}>
        <Reveal enabled={motion}>
          <div style={{ maxWidth: 640, marginBottom: "clamp(22px,3vw,38px)" }}>
            <Eyebrow>What we do</Eyebrow>
            <h2 className="h1" style={{ color: "var(--text-on-dark)", margin: "14px 0 0" }}>
              Four tools. One job: more booked work.
            </h2>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "16px" }} className="four-grid">
          {items.map(([ic, t, d], i) => (
            <Reveal key={t} enabled={motion} delay={i * 90}>
              <ServiceCard ic={ic} t={t} d={d} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
function ServiceCard({ ic, t, d }) {
  const [h, setH] = React.useState(false);
  return (
    <Glass onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ padding: "26px 24px", height: "100%", display: "flex", flexDirection: "column",
        transition: "transform var(--dur) var(--ease-out), box-shadow var(--dur)",
        transform: h ? "translateY(-4px)" : "none",
        boxShadow: h ? "var(--sh-glass-lg), var(--inset-glass-hi)" : "var(--sh-glass-md), var(--inset-glass-hi)" }}>
      <div style={{ width: 48, height: 48, borderRadius: "var(--r-sm)", display: "grid", placeItems: "center",
        background: "rgba(224,137,47,0.14)", border: "1px solid rgba(224,137,47,0.3)", color: "var(--amber-400)" }}>
        {ic({ s: 24 })}
      </div>
      <h3 className="h3" style={{ color: "var(--text-on-dark)", margin: "18px 0 8px" }}>{t}</h3>
      <p className="body" style={{ color: "var(--text-on-dark-soft)", margin: 0, fontSize: "0.95rem" }}>{d}</p>
    </Glass>
  );
}

/* ---------------- WHY REYNARD (differentiator + drop-in plate) ---------------- */
function WhyReynard({ motion, onBook }) {
  const points = [
    [Icon.target, "Built on attribution, not adjectives", "Tracking is the foundation, not a bolt-on. Every campaign reports back to a booked job."],
    [Icon.loop, "One fox, one system", "PPC, SEO, sites, and funnels run together — so we can trace the whole trail, end to end."],
    [Icon.receipt, "We can actually prove ROI", "Most local agencies can’t tell ROI from a vanity number. We hand you the receipt: cost in, jobs out."],
  ];
  return (
    <section id="why" style={{ padding: "clamp(34px,5vw,80px) clamp(16px,4vw,40px)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto" }}>
        <Reveal enabled={motion}>
          <Glass strong style={{ padding: "clamp(30px,3.6vw,56px)" }}>
            <div style={{ display: "grid", gridTemplateColumns: "0.92fr 1.08fr", gap: "clamp(28px,4vw,60px)", alignItems: "start" }} className="split-grid">
              <div>
                <Eyebrow>Why Reynard</Eyebrow>
                <h2 className="h1" style={{ color: "var(--text-on-dark)", margin: "14px 0 16px" }}>
                  The difference is we can prove it.
                </h2>
                <p className="body" style={{ color: "var(--text-on-dark-soft)", margin: 0, fontSize: "1.05rem", maxWidth: 460 }}>
                  Anyone can run ads. Almost nobody can show you the booked jobs those ads brought back.
                  Our whole operation is built on attribution — so the question “what did my money do?”
                  always has a real answer.
                </p>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
                {points.map(([ic, t, d]) => (
                  <div key={t} style={{ display: "flex", gap: "16px", padding: "18px 0",
                    borderTop: "1px solid rgba(255,255,255,0.09)" }}>
                    <span style={{ width: 42, height: 42, borderRadius: "var(--r-sm)", flexShrink: 0, display: "grid", placeItems: "center",
                      background: "rgba(224,137,47,0.13)", border: "1px solid rgba(224,137,47,0.28)", color: "var(--amber-400)" }}>
                      {ic({ s: 21 })}
                    </span>
                    <div>
                      <div className="body" style={{ color: "var(--text-on-dark)", fontWeight: 700, marginBottom: 4 }}>{t}</div>
                      <div className="small" style={{ color: "var(--text-on-dark-soft)" }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Glass>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- REVIEWS ---------------- */
function Reviews({ motion }) {
  const long = [
    {
      quote: "They turned exactly what we asked for into reality. We needed functionality our website platform couldn’t do — and Reynard built a system that let us make easy updates ourselves, plus style work that normally wouldn’t be possible. 10/10.",
      name: "Matt", role: "Yacht Club Films", tag: "10 / 10",
    },
    {
      quote: "A true senior team — not just solving the problem, but sharing the insights and recommendations behind it. They took ownership of every deliverable and caught edge cases most would have missed. Professional, experienced, and a genuinely great communicator. When things were ambiguous, they asked the right questions and shipped the best solution. High-quality, maintainable work. I strongly recommend them.",
      name: "Client", role: "Consulting firm",
    },
  ];
  const short = {
    quote: "True professionals. Highly proactive and very collaborative.",
    name: "Client", role: "Marketing agency",
  };
  return (
    <section id="reviews" style={{ padding: "clamp(34px,5vw,80px) clamp(16px,4vw,40px)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto" }}>
        <Reveal enabled={motion}>
          <div style={{ maxWidth: 640, marginBottom: "clamp(22px,3vw,38px)" }}>
            <Eyebrow>What clients say</Eyebrow>
            <h2 className="h1" style={{ color: "var(--text-on-dark)", margin: "14px 0 0" }}>
              Don’t take our word for it.
            </h2>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "18px", alignItems: "stretch" }} className="reviews-grid">
          {long.map((r, i) => (
            <Reveal key={r.role} enabled={motion} delay={i * 110} style={{ display: "flex" }}>
              <ReviewCard {...r} />
            </Reveal>
          ))}
        </div>
        <Reveal enabled={motion} delay={120}>
          <ReviewCard {...short} wide />
        </Reveal>
      </div>
    </section>
  );
}
function QuoteMark({ light = false }) {
  return (
    <span aria-hidden="true" style={{
      fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "3.4rem", lineHeight: 0.7,
      color: "var(--amber-400)", opacity: light ? 0.5 : 0.85, display: "block", height: "0.5em",
    }}>“</span>
  );
}
function ReviewCard({ quote, name, role, tag, wide = false }) {
  const [h, setH] = React.useState(false);
  return (
    <Glass onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ padding: "clamp(26px,2.8vw,38px)", height: "100%", width: "100%", display: "flex",
        flexDirection: wide ? "row" : "column", gap: wide ? "clamp(20px,3vw,44px)" : 0,
        alignItems: wide ? "center" : "stretch", flexWrap: "wrap",
        marginTop: wide ? "18px" : 0,
        transition: "transform var(--dur) var(--ease-out), box-shadow var(--dur)",
        transform: h ? "translateY(-4px)" : "none",
        boxShadow: h ? "var(--sh-glass-lg), var(--inset-glass-hi)" : "var(--sh-glass-md), var(--inset-glass-hi)" }}>
      <div style={{ flex: wide ? "1 1 360px" : "1", minWidth: wide ? 280 : "auto" }}>
        <QuoteMark />
        <p className={wide ? "h3" : "lead"} style={{
          margin: wide ? 0 : "12px 0 0", color: "var(--text-on-dark)",
          fontFamily: "var(--font-body)", fontWeight: wide ? 600 : 400,
          fontSize: wide ? "clamp(1.2rem,1.8vw,1.5rem)" : "clamp(1.02rem,1.3vw,1.18rem)",
          lineHeight: 1.5, letterSpacing: 0, textWrap: "pretty",
        }}>{quote}</p>
      </div>
      <div style={{
        marginTop: wide ? 0 : "auto", paddingTop: wide ? 0 : "22px",
        borderTop: wide ? "none" : "1px solid rgba(255,255,255,0.1)",
        flex: wide ? "0 0 auto" : "none",
        display: "flex", alignItems: "center", gap: "14px", flexWrap: "wrap",
      }}>
        <div style={{ width: 42, height: 42, borderRadius: "50%", flexShrink: 0, display: "grid", placeItems: "center",
          background: "rgba(224,137,47,0.14)", border: "1px solid rgba(224,137,47,0.3)",
          color: "var(--amber-400)", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.05rem" }}>
          {name.charAt(0)}
        </div>
        <div>
          <div className="body" style={{ color: "var(--text-on-dark)", fontWeight: 700, lineHeight: 1.2 }}>{name}</div>
          <div className="small" style={{ color: "var(--text-on-dark-mute)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>{role}</div>
        </div>
        {tag && (
          <span className="data" style={{ marginLeft: "auto", color: "var(--amber-400)", fontSize: "0.85rem",
            border: "1px solid rgba(224,137,47,0.4)", borderRadius: "var(--r-pill)", padding: "5px 12px", whiteSpace: "nowrap" }}>{tag}</span>
        )}
      </div>
    </Glass>
  );
}

/* ---------------- FINAL CTA ---------------- */
function CTA({ onBook, motion }) {
  return (
    <section id="cta" style={{ padding: "clamp(34px,5vw,84px) clamp(16px,4vw,40px)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto" }}>
        <Reveal enabled={motion}>
          <Glass style={{ padding: "clamp(36px,5vw,68px)", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
            <Eyebrow>The fox is already moving</Eyebrow>
            <h2 className="h-display" style={{ color: "var(--text-on-dark)", margin: "16px 0 0", fontSize: "clamp(2.2rem,5vw,3.6rem)" }}>
              Ready to put us on the hunt?
            </h2>
            <p className="lead" style={{ color: "var(--text-on-dark-soft)", maxWidth: 560, margin: "20px 0 30px" }}>
              Book a free strategy call. No pitch deck, no jargon — just where your booked jobs
              are coming from, and where they should be.
            </p>
            <AmberButton onClick={onBook} style={{ padding: "16px 32px", fontSize: "1.1rem" }}>
              Book a free strategy call {Icon.arrow({ s: 20 })}
            </AmberButton>
            <div className="small" style={{ color: "var(--text-on-dark-mute)", marginTop: "16px", fontFamily: "var(--font-mono)" }}>
              Every dollar → a real call
            </div>
          </Glass>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer({ links }) {
  return (
    <footer style={{ padding: "clamp(20px,3vw,40px) clamp(16px,4vw,40px) 40px" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto" }}>
        <Glass style={{ padding: "30px 34px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "24px", flexWrap: "wrap" }}>
          <div style={{ maxWidth: 320 }}>
            <Wordmark variant="light" height={24} />
            <p className="small" style={{ color: "var(--text-on-dark-mute)", margin: "12px 0 0" }}>
              We hunt, you book. Lead-gen for local service businesses — every dollar tracked back to a real phone call.
            </p>
          </div>
          <div style={{ display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }}>
            {links.map((l) => (
              <a key={l.id} href={`#${l.id}`} onClick={(e) => { e.preventDefault(); smoothTo(l.id); }}
                className="small" style={{ color: "var(--text-on-dark-soft)", textDecoration: "none", fontWeight: 500 }}>{l.label}</a>
            ))}
            <a href="tel:+18005550199" className="data" style={{ color: "var(--amber-400)", textDecoration: "none", fontSize: "0.9rem",
              display: "inline-flex", alignItems: "center", gap: "8px", marginLeft: "8px" }}>
              {Icon.phone({ s: 16 })}(800) 555-0199
            </a>
          </div>
        </Glass>
      </div>
    </footer>
  );
}

Object.assign(window, { HowWeHunt, Services, WhyReynard, Reviews, CTA, Footer });