/* Home — phone-first operator memo */

const { useState, useEffect } = React;

const HEADLINES = {
  qualified: {
    eyebrow: "Hardscape only. $2M+ builders.",
    h1: <>Know who can afford you <em style={{ fontStyle: "italic", color: "var(--gold)" }}>before</em> you drive out.</>,
    sub: "Your estimator stops burning 30 hours a month on people who can't afford you. Every appointment is pre-qualified by budget, zip, and scope."
  },
  appointments: {
    eyebrow: "Hardscape only. $2M+ builders.",
    h1: <>A calendar of homeowners who can actually pay you.</>,
    sub: "Budget, zip, and scope confirmed before they ever reach your calendar. Your sales team talks to buyers, not browsers."
  },
  partner: {
    eyebrow: "Hardscape only. $2M+ builders.",
    h1: <>Your marketing partner. Not another lead vendor.</>,
    sub: "No more teaching your agency what hardscape is. One team that already knows your trade, your margins, and your sales cycle."
  },
  bouncer: {
    eyebrow: "Hardscape only. $2M+ builders.",
    h1: <>Put a bouncer on your calendar.</>,
    sub: "Homeowners confirm their budget, scope, and timeline before they ever reach you. If they can't afford your work, they never get through."
  }
};

function HomePage() {
  const defaults = window.TWEAK_DEFAULTS || {};
  const [values, setValues] = useState(defaults);
  useEffect(() => {
    document.documentElement.dataset.density = values.density || "default";
  }, [values.density]);

  const headline = HEADLINES[values.headline] || HEADLINES.qualified;

  return (
    <>
      <Nav active="index.html" />

      {/* Hero — dark, one of only two dark sections */}
      <section className="section dark" style={{ paddingBlock: "clamp(64px, 10vh, 120px)" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 20 }}>{headline.eyebrow}</div>
          <h1 className="h1" style={{ maxWidth: 18 + "ch", marginBottom: 24 }}>
            {headline.h1}
          </h1>
          <p className="lead" style={{ fontSize: 18, maxWidth: "44ch", marginBottom: 32 }}>
            {headline.sub}
          </p>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", alignItems: "center" }}>
            <a href="book.html" className="btn btn-gold btn-lg">Book a call →</a>
            <a href="#proof" className="btn btn-ghost" style={{ color: "var(--paper)" }}>See the numbers</a>
          </div>

          {/* Stats kept per user */}
          <div className="stats">
            <Stat n="$7.28M" label="Revenue generated for clients" />
            <Stat n="4,232" label="Qualified estimates booked" />
            <Stat n="Hardscape only" label="One trade. Since day one." />
          </div>
        </div>
      </section>

      {/* Logo slider — social proof right after hero */}
      <LogoSlider />

      {/* Single testimonial strip — trust signal right after hero */}
      <section className="section" style={{ paddingBlock: 48, borderBottom: "1px solid var(--rule-soft)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "center", maxWidth: 900 }}>
            <div style={{
              width: 56, height: 56, borderRadius: "50%",
              background: "var(--forest-500)", color: "var(--gold)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--serif)", fontSize: 24
            }}>A</div>
            <div>
              <p style={{ fontFamily: "var(--serif)", fontSize: "clamp(18px, 2.4vw, 24px)", lineHeight: 1.3, color: "var(--ink)", margin: 0 }}>
                "I've worked with agencies where everything is cookie cutter BS. Henry and his team are far from that. Every solution is tailored to your business needs. I've recommended over 5 other contractors to him and they're all upset they didn't start sooner."
              </p>
              <div style={{ marginTop: 10, fontSize: 14, color: "var(--ink-soft)" }}>
                <strong style={{ color: "var(--ink)" }}>Andres V.</strong> — Blue Stone Landscaping, TX
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Problem → What we do — short, scannable */}
      <Section>
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "var(--gap)", maxWidth: 820 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>The problem</div>
            <h2 className="h2" style={{ marginBottom: 16 }}>
              You've already fired one agency. Maybe two.
            </h2>
            <p className="lead">
              They sent you reports full of impressions and clicks, but couldn't tell you the cost of a single booked job. Your estimator is spending two days on a $1,500 proposal for a homeowner with a $10K budget. And the "marketing partner" you're paying $5K a month can't tell you where the money went.
            </p>
          </div>
        </div>
      </Section>

      {/* What we do — 3 simple cards, no icons, just numbers */}
      <Section style={{ paddingTop: 0 }}>
        <div className="eyebrow" style={{ marginBottom: 24 }}>What we do</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "var(--gap)" }}>
          {[
            { n: "01", t: "Ads that filter out tire-kickers", d: "Budget, zip, scope, and timeline filtered in the ad itself. Your sales team never sees a lead that can't afford you. No shared leads. No Angi. No race to the bottom." },
            { n: "02", t: "Booking that eliminates back-and-forth", d: "Homeowner picks a slot on their phone. Confirmation, reminders, and no-show recovery are automatic. Your calendar fills while your crews are on site." },
            { n: "03", t: "One number: cost per booked job", d: "Not impressions. Not clicks. Not \"leads.\" One Friday report: how much you spent, how many jobs booked, and what each one cost. That's it." }
          ].map(c => (
            <div key={c.n} className="card">
              <div style={{ fontFamily: "var(--serif)", fontSize: 32, color: "var(--forest-500)", marginBottom: 12 }}>{c.n}</div>
              <h3 style={{ fontFamily: "var(--sans)", fontSize: 18, fontWeight: 600, marginBottom: 10 }}>{c.t}</h3>
              <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 15, lineHeight: 1.5 }}>{c.d}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* Proof — one case study, not three */}
      <Section id="proof" style={{ borderTop: "1px solid var(--rule-soft)" }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>Proof · one client, 14 months</div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "center" }} className="proof-grid">
          <div>
            <h2 className="h2" style={{ marginBottom: 20 }}>
              $32K in ads → $1.5M in booked revenue.
            </h2>
            <p className="lead" style={{ marginBottom: 24 }}>
              Blue Stone Landscaping in Texas. 14 months, $32K in ad spend: 774 qualified appointments, $1.5M in new contracts, and a waiting list running into next season.
            </p>
            <a href="case-studies.html?case=bluestone" className="btn btn-gold">Read the full breakdown →</a>
          </div>
          <div style={{ borderRadius: 12, overflow: "hidden", aspectRatio: "1/1" }}>
            <img src="images/project-patio.jpg" alt="Completed luxury hardscape patio with outdoor kitchen" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
      </Section>

      {/* Who we work with — qualifier, softened */}
      <Section style={{ paddingTop: 0 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }} className="two-col">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14, color: "var(--forest-500)" }}>Good fit</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
              {[
                "You're a hardscape builder doing $2M+ / year",
                "Your average job is $50K or higher",
                "You have at least 2 install crews",
                "You've spent money on marketing before and it didn't work",
                "You're done explaining your business to a new account manager every 8 months"
              ].map(x => (
                <li key={x} style={{ paddingLeft: 22, position: "relative", fontSize: 16 }}>
                  <span style={{ position: "absolute", left: 0, top: 2, color: "var(--forest-500)", fontWeight: 700 }}>✓</span>
                  {x}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14, color: "var(--ink-soft)" }}>Not a fit (yet)</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12, color: "var(--ink-soft)" }}>
              {[
                "Under $2M — you need a crew before a funnel",
                "Jobs under $20K — margins won't carry ad spend",
                "Solo operator — you'll drown in booked work",
                "General contractor — hardscape only here"
              ].map(x => (
                <li key={x} style={{ paddingLeft: 22, position: "relative", fontSize: 16 }}>
                  <span style={{ position: "absolute", left: 0, top: 2 }}>—</span>
                  {x}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Section>

      {/* Final CTA — dark, single CTA */}
      <section className="section dark" style={{ textAlign: "center" }}>
        <div className="wrap" style={{ maxWidth: 720 }}>
          <h2 className="h2" style={{ marginBottom: 20 }}>
            One call. We'll tell you if we can help.
          </h2>
          <p className="lead" style={{ marginInline: "auto", marginBottom: 32 }}>
            30 minutes. No deck. No pitch. We'll ask what you're spending, what it's producing, and whether we can beat it. If we can't, we'll tell you.
          </p>
          <a href="book.html" className="btn btn-gold btn-lg">Book a call →</a>
        </div>
      </section>

      <Footer />
      <MobileCTA />

      <Tweaks
        config={{
          values,
          fields: [
            {
              key: "headline", label: "Hero headline",
              options: [
                { value: "qualified", label: "Qualified" },
                { value: "appointments", label: "Appointments" },
                { value: "partner", label: "Partner" },
                { value: "bouncer", label: "Bouncer" }
              ]
            },
            {
              key: "density", label: "Density",
              options: [
                { value: "tight", label: "Tight" },
                { value: "default", label: "Default" },
                { value: "spacious", label: "Spacious" }
              ]
            }
          ]
        }}
        onChange={setValues}
      />

      <style>{`
        @media (max-width: 800px) {
          .proof-grid, .two-col { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </>
  );
}

window.HomePage = HomePage;
ReactDOM.createRoot(document.getElementById("root")).render(<HomePage />);