/* ============================================================
   Veranda Bouwer — Home page
   ============================================================ */
function Home({ go }) {
  useReveal();

  const features = [
  { num: "01", icon: "ruler", title: "Op maat ontworpen", desc: "Elke veranda wordt afgestemd op uw woning, tuin en wensen, geen standaardpakket, maar maatwerk tot de millimeter." },
  { num: "02", icon: "diamond", title: "Topkwaliteit materialen", desc: "Wij werken met hoogwaardig aluminium en gehard glas dat jarenlang mooi blijft, weer of geen weer." },
  { num: "03", icon: "tools", title: "Vakkundige montage", desc: "Onze ervaren monteurs plaatsen uw veranda strak, veilig en netjes, afgewerkt tot in het detail." },
  { num: "04", icon: "shield", title: "10 jaar garantie", desc: "Op constructie én montage. Wij staan achter ons werk, ook lang nadat de laatste schroef is gedraaid." }];


  const featured = PROJECTS.slice(0, 4);

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero-bg">
          <img className="hero-img" src="assets/hero.jpg" alt="Glazen veranda met uitzicht op de tuin" />
        </div>
        <div className="hero-overlay"></div>
        <div className="wrap hero-inner">
          <div className="reveal in">
            <span className="eyebrow" style={{ color: "#fff" }}>
              Veranda's &amp; overkappingen
            </span>
            <h1>Buiten leven,<br />het hele jaar door.</h1>
            <p className="tagline">
              Veranda Bouwer ontwerpt en plaatst veranda's en overkappingen op maat.
              Vakmanschap, hoogwaardige materialen en een afwerking waar u trots op bent.
            </p>
            <div className="hero-cta">
              <a href="#" className="btn btn-primary" onClick={(e) => {e.preventDefault();go("contact");}}>
                Vraag een offerte aan <Icon name="arrow" size={18} className="arr" />
              </a>
              <a href="#" className="btn btn-outline-light" onClick={(e) => {e.preventDefault();go("projects");}}>
                Bekijk onze projecten
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* HERO STATS — overlapping cards */}
      <div className="wrap">
        <div className="hero-stats">
          <div className="stat-card reveal in">
            <b data-count="10" data-suffix="+">10+</b>
            <h4>Jaar ervaring</h4>
            <p>Ruim tien jaar vakmanschap in veranda's en overkappingen op maat.</p>
          </div>
          <div className="stat-card reveal in d1">
            <b data-count="200" data-suffix="+">200+</b>
            <h4>Veranda's geplaatst</h4>
            <p>Honderden tevreden klanten door heel Nederland en de wijde omgeving.</p>
          </div>
          <div className="stat-card reveal in d2">
            <b data-count="4.9" data-decimals="1">4,9</b>
            <h4>Klantbeoordeling</h4>
            <p>Gewaardeerd om kwaliteit, eerlijk advies en een strakke afwerking.</p>
          </div>
        </div>
      </div>

      {/* ABOUT */}
      <section className="section">
        <div className="wrap about-grid">
          <div className="reveal">
            <span className="eyebrow">Over Veranda Bouwer</span>
            <h2 className="h2">Een familiebedrijf met passie voor buitenleven</h2>
            <p className="lead" style={{ marginTop: 18 }}>
              Al meer dan tien jaar bouwen wij vanuit Helmond aan mooiere buitenruimtes.
              Wat begon als een klein montagebedrijf groeide uit tot een vaste waarde in de regio,
              dankzij eerlijk advies, vakwerk en afspraken die we nakomen.
            </p>
            <ul className="about-list">
              <li><span className="tick"><Icon name="check" size={14} /></span><span>Persoonlijk ontwerp en advies bij u thuis</span></li>
              <li><span className="tick"><Icon name="check" size={14} /></span><span>Eigen, ervaren montageteam, geen onderaannemers</span></li>
              <li><span className="tick"><Icon name="check" size={14} /></span><span>Heldere offerte zonder verrassingen achteraf</span></li>
            </ul>
            <div className="stat-row">
              <div className="stat"><b data-count="10" data-suffix="+">10+</b><small>jaar vakmanschap</small></div>
              <div className="stat"><b data-count="200" data-suffix="+">200+</b><small>tevreden klanten</small></div>
              <div className="stat"><b>10 jr</b><small>garantie</small></div>
            </div>
            <a href="#" className="btn btn-navy" style={{ marginTop: 30 }} onClick={(e) => {e.preventDefault();go("contact");}}>
              Maak kennis met ons <Icon name="arrow" size={17} className="arr" />
            </a>
          </div>
          <div className="about-media reveal d1">
            <Slot id="about-1" src="assets/about.jpg" className="about-img" placeholder="Sleep hier een foto van uw team of werk" style={{ borderRadius: "var(--radius-lg)", overflow: "hidden" }} />
            <div className="badge-card">
              <div className="big">10<span style={{ fontSize: 18 }}>jr</span></div>
              <small>garantie op constructie &amp; montage</small>
            </div>
          </div>
        </div>
      </section>

      {/* WHY CHOOSE US */}
      <section className="section features">
        <div className="wrap why-grid">
          <div className="why-media reveal">
            <Slot id="why-1" src="assets/process.jpg" placeholder="Sleep hier een foto van uw werk" />
          </div>
          <div className="why-content reveal d1">
            <span className="eyebrow">Waarom Veranda Bouwer</span>
            <h2 className="h2">Gebouwd om generaties mee te gaan</h2>
            <p className="lead" style={{ marginTop: 16 }}>
              Van eerste schets tot laatste afwerking houden we alles in eigen hand.
              Dat merkt u aan de kwaliteit, en aan het gemak.
            </p>
            <div className="why-list">
              {features.map((f) =>
              <div key={f.num} className="why-item">
                  <span className="why-check"><Icon name="check" size={16} /></span>
                  <div>
                    <h3>{f.title}</h3>
                    <p>{f.desc}</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED PROJECTS TEASER */}
      <section className="section">
        <div className="wrap">
          <div className="teaser-head reveal">
            <div className="sec-head">
              <span className="eyebrow">Uitgelicht werk</span>
              <h2 className="h2">Projecten om trots op te zijn</h2>
            </div>
            <a href="#" className="btn btn-ghost" onClick={(e) => {e.preventDefault();go("projects");}}>
              Alle projecten <Icon name="arrow" size={17} className="arr" />
            </a>
          </div>
          <div className="proj-grid teaser">
            {featured.map((p, i) =>
            <div key={p.id} className={"proj-card reveal d" + (i + 1) + (i === 0 ? " tall" : "")}
            onClick={() => go("projects")}>
                <div className="proj-img"><Slot id={"home-" + p.id} src={p.img} placeholder={p.title} /></div>
                <div className="proj-plus"><Icon name="arrow" size={20} /></div>
                <div className="proj-body">
                  <span className="proj-tag">{p.tag}</span>
                  <h3>{p.title}</h3>
                  <p className="proj-desc">{p.desc}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* CTA BAND */}
      <CtaBand go={go} />
    </main>);

}

function CtaBand({ go }) {
  return (
    <section className="cta-band">
      <div className="wrap cta-inner">
        <div className="reveal">
          <span className="eyebrow" style={{ color: "#fff" }}>
            Klaar voor uw droomveranda?
          </span>
          <h2>Vraag vrijblijvend een offerte aan</h2>
          <p>Vertel ons over uw plannen. Binnen één werkdag nemen we contact op voor een gratis adviesgesprek en een scherpe prijsopgave.</p>
        </div>
        <div className="cta-actions reveal d1">
          <a href="#" className="btn btn-primary" onClick={(e) => {e.preventDefault();go("contact");}}>
            Offerte aanvragen <Icon name="arrow" size={18} className="arr" />
          </a>
          <a href="tel:+31640749627" className="btn btn-outline-light">
            <Icon name="phone" size={17} /> Bel direct
          </a>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Home, CtaBand });