// Headlines (3 variants). Kept here so it's editable and tweakable.
const HEADLINES = {
  A: { eyebrow: "Upfront flat rate pricing. No extra fees at your door.", h1: <>Get your<br className="br-m" /> <em>home</em><br className="br-d" /> back.</>, lede: <><strong>Home resets</strong> and <strong>white glove junk removal</strong> for <strong>busy homeowners</strong> in the <strong>Salt Lake Valley</strong> and <strong>Park City</strong>.</> },
  B: { eyebrow: "See your price first", h1: <>The price is the <em>price.</em></>, lede: "Pick what's going. See your total before you book. No on-site surprises, no upsells, no phone tag." },
  C: { eyebrow: "How clearouts should feel", h1: <>Tell us what's going.<br /><em>We'll handle the rest.</em></>, lede: "Two-hour windows, seven days a week. We text the morning of with the team's name and a photo." }
};

function Hero({ variant, headline, navigate }) {
  const h = HEADLINES[headline] || HEADLINES.A;
  if (variant === "centered") return <HeroCentered h={h} navigate={navigate} />;
  if (variant === "editorial") return <HeroEditorial h={h} navigate={navigate} />;
  return <HeroSplit h={h} navigate={navigate} />;
}
window.Hero = Hero;

function HeroSplit({ h, navigate }) {
  return (
    <section className="hero hero--split">
      <div className="hero__copy">
        <span className="eyebrow">{h.eyebrow}</span>
        <h1 className="display-h1" style={{ fontSize: "80px", lineHeight: "0.95" }}>{h.h1}</h1>
        <p className="lede">{h.lede}</p>
        <p className="hero__tag">WE QUIETLY REMOVE WHAT DOESN’T BELONG AND MAKE ROOM FOR WHAT’S NEXT, SO THE ROOMS YOU’VE BEEN AVOIDING FEEL LIKE PART OF YOUR HOME AGAIN.</p>
        <div className="hero__ctas">
          <button className="btn btn--primary btn--lg" onClick={() => {window.location.href = "Quote.html";}}>
            Get an instant quote <span className="arrow" aria-hidden>→</span>
          </button>
          <button className="btn btn--ghost" onClick={() => navigate("pricing")}>See pricing</button>
        </div>
        <p className="hero__cta-note">Instant estimate in about 30 seconds. No email required.</p>
        <div className="hero__meta">
          <span>Salt Lake <span style={{ color: "var(--tossit-red)" }}>·</span> Park City</span>
          <span>No deposit. Pay after.</span>
        </div>
      </div>
      <div className="hero__media">
        <div className="photo">
          <HeroIllustration />
        </div>
      </div>
    </section>);

}

function HeroCentered({ h, navigate }) {
  return (
    <section className="hero hero--centered">
      <div className="hero__copy">
        <span className="eyebrow">{h.eyebrow}</span>
        <h1 className="display-h1" style={{ maxWidth: "1180px" }}>{h.h1}</h1>
        <p className="lede">{h.lede}</p>
        <div className="hero__ctas">
          <button className="btn btn--primary btn--lg" onClick={() => {window.location.href = "Quote.html";}}>
            Get an instant quote <span className="arrow" aria-hidden>→</span>
          </button>
          <button className="btn btn--ghost" onClick={() => navigate("pricing")}>See pricing</button>
        </div>
        <div className="hero__meta">
          <span><b>4.9</b> avg · 2,300+ pickups</span>
          <span>Salt Lake · Park City</span>
          <span>No deposit. Pay after.</span>
        </div>
      </div>
    </section>);

}

function HeroEditorial({ h, navigate }) {
  return (
    <section className="hero hero--editorial">
      <div className="hero__copy">
        <span className="eyebrow">{h.eyebrow}</span>
        <h1 className="display-h1">{h.h1}</h1>
        <p className="lede">{h.lede}</p>
        <div className="hero__ctas">
          <button className="btn btn--primary btn--lg" onClick={() => {window.location.href = "Quote.html";}}>
            Get an instant quote <span className="arrow" aria-hidden>→</span>
          </button>
          <button className="btn btn--ghost" onClick={() => navigate("pricing")}>See pricing</button>
        </div>
      </div>
      <div className="hero__media">
        <div className="photo">
          <HeroIllustration />
        </div>
      </div>
    </section>);

}

window.HEADLINES = HEADLINES;