// RoofLinker — extra-simple homepage
// Intro: 3 phrases over full-bleed photos, then the home content reveals.

const { useState, useEffect, useRef } = React;

const HOME_CDN = "/assets/rl-home/";
const HOME_INTRO = [
  { img: HOME_CDN + "hf_20260714_030929_4233a6f2-b82a-41c6-80b8-684e88ac8e42.png", text: "Buy and sell roofing materials near you." },
  { img: HOME_CDN + "hf_20260714_030931_99a7a696-a1d5-40ef-ac00-9449e5252c35.png", text: "Rent machinery by the day." },
  { img: HOME_CDN + "hf_20260714_030933_e64e3643-91ee-43dc-a874-d99fd7d6f2d9.png", text: "Find crews. Find work. Grow together." },
];

const PHRASE_MS = 3300;

// ── Intro overlay ────────────────────────────────────────────────────────
function Intro({ onDone }) {
  const [step, setStep] = useState(0);
  const [leaving, setLeaving] = useState(false);

  useEffect(() => {
    if (step < HOME_INTRO.length - 1) {
      const t = setTimeout(() => setStep(s => s + 1), PHRASE_MS);
      return () => clearTimeout(t);
    }
    const t = setTimeout(finish, PHRASE_MS);
    return () => clearTimeout(t);
  }, [step]);

  function finish() {
    setLeaving(true);
    setTimeout(onDone, 700);
  }

  return (
    <div className={"hm-intro" + (leaving ? " hm-intro-out" : "")}
         onClick={finish} data-screen-label={"Intro phrase " + (step + 1)}>
      {HOME_INTRO.map((s, i) => (
        <div key={i} className={"hm-intro-slide" + (i === step ? " on" : "")}>
          <img src={s.img} alt="" />
        </div>
      ))}
      <div className="hm-intro-scrim"></div>
      <div className="hm-intro-copy">
        <div className="hm-intro-brand">
          <span className="hm-brandmark">RL</span> Roof Linker
        </div>
        <div key={step} className="hm-intro-phrase">{HOME_INTRO[step].text}</div>
        <div className="hm-intro-dots">
          {HOME_INTRO.map((_, i) => <span key={i} className={i <= step ? "on" : ""}></span>)}
        </div>
      </div>
      <button className="hm-skip" onClick={e => { e.stopPropagation(); finish(); }}>Skip →</button>
    </div>
  );
}

// ── Service cards ────────────────────────────────────────────────────────
const HOME_SERVICES = [
  { title: "Buy materials", desc: "Shingles, underlayment, nails — surplus deals near you.",
    img: HOME_CDN + "hf_20260714_024808_c843f72f-5ad2-4150-b4a7-852dc5d2ecd6.png", href: "/marketplace.html" },
  { title: "Rent machinery", desc: "Lifts, trailers, hoists — by the day, from other roofers.",
    img: HOME_CDN + "hf_20260714_024904_3e25c68e-8345-4ff4-ad99-d0cb3a0cae87.png", href: "/marketplace.html" },
  { title: "Find a vetted roofer", desc: "For homeowners. Licensed, insured, rated by real customers.",
    img: HOME_CDN + "hf_20260714_024829_5736a0b8-380e-4ec6-b2be-a46acadce0b2.png", href: "/marketplace.html" },
  { title: "Crews & jobs", desc: "Offer your crew for sub-work, or apply for roofing jobs.",
    img: HOME_CDN + "hf_20260714_030933_e64e3643-91ee-43dc-a874-d99fd7d6f2d9.png", href: "/marketplace.html" },
  { title: "Sell to roofers", desc: "Vendors: put your products in front of 240+ companies.",
    img: HOME_CDN + "hf_20260714_030929_4233a6f2-b82a-41c6-80b8-684e88ac8e42.png", href: "/marketplace.html" },
  { title: "Join the Alliance", desc: "Playbooks, mastermind, and alliance rates on everything.",
    img: HOME_CDN + "hf_20260714_030931_99a7a696-a1d5-40ef-ac00-9449e5252c35.png", href: "website.html" },
];

function ServiceCard({ s, index }) {
  return (
    <a className="hm-card mpx-enter" style={{ animationDelay: (index * 70) + "ms" }} href={s.href}>
      <div className="hm-card-img"><img src={s.img} alt="" loading="lazy" /></div>
      <div className="hm-card-body">
        <div className="hm-card-title">{s.title}</div>
        <div className="hm-card-desc">{s.desc}</div>
        <div className="hm-card-go">Go →</div>
      </div>
    </a>
  );
}

// ── Home ─────────────────────────────────────────────────────────────────
function Home({ playIntro }) {
  const [intro, setIntro] = useState(playIntro);
  useEffect(() => { setIntro(playIntro); }, [playIntro]);

  return (
    <div>
      {intro && <Intro onDone={() => setIntro(false)} />}

      <nav className="hm-nav" data-screen-label="Home nav">
        <span className="hm-brand"><span className="hm-brandmark">RL</span> Roof Linker</span>
        <div style={{ display: "flex", gap: 10 }}>
          <a className="btn gold" href="/marketplace.html">Open marketplace</a>
        </div>
      </nav>

      <header className="hm-hero" data-screen-label="Home hero">
        <h1>Everything a roofer needs.<br /><em>One place.</em></h1>
        <p>Buy. Sell. Rent. Hire. Built by roofers, for roofers — and free to browse.</p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <a className="btn gold lg" href="/marketplace.html">Go to the marketplace →</a>
          <a className="btn lg" href="website.html">Learn about the Alliance</a>
        </div>
      </header>

      <main className="hm-grid" data-screen-label="Services">
        {HOME_SERVICES.map((s, i) => <ServiceCard key={s.title} s={s} index={i} />)}
      </main>

      <section className="hm-growth" data-screen-label="Growth membership">
        <div>
          <div className="hm-growth-title">Want more jobs?</div>
          <div className="hm-growth-desc">The growth membership gets you a professional website — built for you — plus a steady flow of quality leads.</div>
        </div>
        <a className="btn gold lg" href="website.html" style={{ flexShrink: 0 }}>Learn more →</a>
      </section>

      <footer className="hm-foot">
        <span>© 2026 Roof Linker, Inc.</span>
        <span>Built by roofers, for roofers.</span>
      </footer>
    </div>
  );
}

Object.assign(window, { Home });