/* ============================================================
   HOME PAGE
   ============================================================ */
const HOME_TWEAKS = /*EDITMODE-BEGIN*/{
  "heroVariant": "full",
  "accent": "#BC9A5B",
  "displayFont": "Archivo",
  "showStats": true
} /*EDITMODE-END*/;

const FEATURES = [
{ icon: "ruler", title: "Ontwerp op maat", text: "Elke veranda wordt volledig op maat getekend, afgestemd op uw woning, tuin en manier van leven.", img: "assets/projects/veranda-binnenplaats.jpg", cell: "a" },
{ icon: "diamond", title: "Kwaliteitsmaterialen", text: "Thermisch onderbroken aluminium, gehard glas en duurzame profielen die jarenlang hun klasse behouden.", img: "assets/projects/veranda-interieur.jpg", cell: "b" },
{ icon: "tools", title: "Vakkundige plaatsing", text: "Eigen ervaren monteurs plaatsen alles strak en waterdicht, met respect voor uw woning en planning.", img: "assets/projects/veranda-glas-antraciet.jpg", cell: "c" },
{ icon: "shield", title: "10 jaar garantie", text: "Op constructie en afwerking. Wij blijven bereikbaar, ook lang nadat de laatste schroef vastzit.", img: "assets/projects/veranda-aanbouw-zwart.jpg", cell: "d" }];


function Hero({ t }) {
  const v = t.heroVariant;
  const stats = [
  { n: <>Op&nbsp;<b>maat</b></>, l: "Elke veranda uniek getekend" },
  { n: <><b>10</b> jaar</>, l: "Garantie op de constructie" },
  { n: <>A–Z</>, l: "Van ontwerp tot plaatsing" }];

  const Stats = () => t.showStats ?
  <div className="hero__stats">
      {stats.map((s, i) =>
    <React.Fragment key={i}>
          {i > 0 && <div className="hero__divider" aria-hidden="true"></div>}
          <div className="hero__stat"><div className="n">{s.n}</div><div className="l">{s.l}</div></div>
        </React.Fragment>
    )}
    </div> :
  null;

  const copy =
  <div className="hero__inner">
      <span className="eyebrow">Veranda's &amp; Outdoor Living</span>
      <h1>Uw tuin, het hele jaar door om van te genieten</h1>
      <p className="hero__lead">Altun Works ontwerpt en plaatst veranda's en terrasoverkappingen. vakmanschap dat uw buitenruimte verlengt tot een echte leefruimte.</p>
      <div className="hero__cta">
        <a className="btn" href="contact.html">Vraag een offerte aan <span className="arrow"><Icon name="arrow" size={18} /></span></a>
        <a className={v === "split" ? "btn btn--ghost" : "btn btn--outline-light"} href="projecten.html">Bekijk onze projecten</a>
      </div>
      <Stats />
    </div>;


  if (v === "split") {
    return (
      <section className="hero" data-variant="split" data-screen-label="Hero (split)">
        <div className="wrap">
          <div className="hero__grid">
            {copy}
            <div className="hero__pic">
              <img src="assets/projects/veranda-binnenplaats.jpg" alt="Veranda op een binnenplaats door Altun Works" />
              <div className="hero__badge"><Icon name="award" size={22} /><div><strong>Belgisch vakwerk</strong><div style={{ fontSize: 13, color: "var(--muted)" }}>op maat geplaatst</div></div></div>
            </div>
          </div>
        </div>
      </section>);

  }

  return (
    <section className="hero" data-variant={v} data-screen-label={`Hero (${v})`}>
      <div className="hero__media"><img src="assets/projects/veranda-tuin-wit.jpg?v=orig" alt="Aluminium veranda aan een zonnige tuin" /></div>
      <div className="hero__scrim"></div>
      <div className="wrap">{copy}</div>
      <div className="scroll-cue" aria-hidden="true"></div>
    </section>);

}

function About() {
  return (
    <section className="section about" id="over-ons">
      <div className="wrap">
        <div className="about__grid">
          <Reveal className="about__media">
            <div className="accent" aria-hidden="true"></div>
            <div className="frame"><img src="assets/projects/carport-antraciet.jpg" alt="Aluminium overkapping op maat" /></div>
            <div className="frame frame--sm"><img src="assets/projects/veranda-interieur.jpg" alt="Interieur van een leefveranda" /></div>
          </Reveal>
          <Reveal delay={120}>
            <span className="eyebrow">Over Altun Works</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Vakmanschap dat u buiten laat thuiskomen</h2>
            <p className="lead" style={{ marginTop: 20 }}>Bij Altun Works geloven we dat een veranda meer is dan een uitbreiding, het is een nieuwe favoriete plek in huis. Daarom behandelen we elk project alsof het ons eigen huis is.</p>
            <p style={{ marginTop: 16, color: "var(--ink-soft)" }}>Van het eerste schetsontwerp tot de laatste afwerking werkt u samen met één toegewijd team. We luisteren naar hoe u wilt leven, kiezen materialen die generaties meegaan en plaatsen met de precisie waar onze klanten ons om aanbevelen.</p>
            <div className="about__list">
              {["Persoonlijk ontwerp en eerlijk advies", "Eigen monteurs, geen onderaanneming", "Strakke, waterdichte en isolerende afwerking"].map((x) =>
              <div className="item" key={x}><span className="tick"><Icon name="check" size={15} /></span><span>{x}</span></div>
              )}
            </div>
            <div className="about__sign">
              <a className="btn btn--ghost" href="contact.html">Plan een vrijblijvend gesprek</a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

function Why() {
  return (
    <section className="section why" id="waarom">
      <div className="wrap">
        <Reveal className="section-head center">
          <span className="eyebrow eyebrow--center">Waarom Altun Works</span>
          <h2 className="h-section">Redenen om voor ons te kiezen</h2>
          <p className="lead">Vier beloften die elk project van Altun Works onderscheiden, van de eerste lijn op papier tot lang na de oplevering.</p>
        </Reveal>
        <div className="bento">
          {FEATURES.map((f, i) =>
          <Reveal as="article" className={`bento__cell cell--${f.cell}`} key={f.title} delay={i * 90}>
              <img src={f.img} alt={f.title} />
              <div className="bento__ic"><Icon name={f.icon} size={24} /></div>
              <div className="bento__body">
                <span className="num">0{i + 1}</span>
                <h3>{f.title}</h3>
                <p>{f.text}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function Teaser() {
  const feat = [PROJECTS[0], PROJECTS[1], PROJECTS[2], PROJECTS[3]];
  const cls = ["tcard--lg", "tcard--sm", "tcard--t", "tcard--t"];
  return (
    <section className="section teaser">
      <div className="wrap">
        <div className="teaser__head">
          <Reveal className="section-head" style={{ marginBottom: 0 }}>
            <span className="eyebrow">Uitgelicht werk</span>
            <h2 className="h-section">Recente realisaties</h2>
          </Reveal>
          <Reveal delay={120}><a className="btn btn--ghost" href="projecten.html">Alle projecten <span className="arrow"><Icon name="arrow" size={18} /></span></a></Reveal>
        </div>
        <div className="teaser__grid">
          {feat.map((p, i) =>
          <Reveal as="a" href="projecten.html" className={`tcard ${cls[i]}`} key={p.title} delay={i * 80}>
              <img src={p.img} alt={p.title} />
              <div className="tcard__body">
                <span className="tcard__cat">{p.catLabel}</span>
                <h3>{p.title}</h3>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function CtaBand() {
  return (
    <section className="ctaband">
      <div className="ctaband__media"><img src="assets/projects/terras-schemering.jpg" alt="" /></div>
      <div className="wrap">
        <Reveal className="ctaband__inner">
          <span className="eyebrow">Klaar voor uw project?</span>
          <h2 style={{ marginTop: 16 }}>Laten we uw veranda samen ontwerpen</h2>
          <p>Vertel ons over uw ruimte en wensen. U ontvangt vrijblijvend advies en een heldere offerte op maat, zonder verplichtingen.</p>
          <div className="hero__cta">
            <a className="btn" href="contact.html">Vraag een offerte aan <span className="arrow"><Icon name="arrow" size={18} /></span></a>
            <a className="btn btn--outline-light" href={BRAND.phoneHref}><Icon name="phone" size={17} /> {BRAND.phone}</a>
          </div>
        </Reveal>
      </div>
    </section>);

}

function HomeApp() {
  const [t, setTweak] = useTweaks(HOME_TWEAKS);
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--gold", t.accent);
    r.style.setProperty("--display", `'${t.displayFont}', system-ui, sans-serif`);
  }, [t.accent, t.displayFont]);

  return (
    <React.Fragment>
      <Navbar active="home" />
      <main>
        <Hero t={t} />
        <About />
        <Why />
        <Teaser />
        <CtaBand />
      </main>
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio label="Hero-indeling" value={t.heroVariant}
        options={[{ value: "full", label: "Volledig" }, { value: "split", label: "Split" }, { value: "panel", label: "Paneel" }]}
        onChange={(v) => setTweak("heroVariant", v)} />
        <TweakToggle label="Toon kerncijfers" value={t.showStats} onChange={(v) => setTweak("showStats", v)} />
        <TweakSection label="Merk" />
        <TweakColor label="Accentkleur" value={t.accent}
        options={["#BC9A5B", "#A8843E", "#9C7B53", "#C7A86A"]}
        onChange={(v) => setTweak("accent", v)} />
        <TweakSelect label="Titelfont" value={t.displayFont}
        options={["Archivo", "Hanken Grotesk", "Georgia"]}
        onChange={(v) => setTweak("displayFont", v)} />
      </TweaksPanel>
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<HomeApp />);