// Home page — feinplaner.de content + elevated structure

const HERO_SLIDES = [
  window.__resources.hero1,
  window.__resources.hero2,
  window.__resources.hero3,
  window.__resources.hero4,
  window.__resources.hero5,
];

function HeroSlideshow() {
  const [current, setCurrent] = React.useState(0);
  const [prev, setPrev] = React.useState(null);
  const [fading, setFading] = React.useState(false);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setPrev(current);
      setFading(true);
      setCurrent(c => (c + 1) % HERO_SLIDES.length);
      setTimeout(() => { setPrev(null); setFading(false); }, 1200);
    }, 5000);
    return () => clearInterval(timer);
  }, [current]);

  const goTo = (i) => {
    if (i === current) return;
    setPrev(current);
    setFading(true);
    setCurrent(i);
    setTimeout(() => { setPrev(null); setFading(false); }, 1200);
  };

  return (
    <div className="hero__slides">
      {prev !== null && (
        <div className="hero__slide hero__slide--out">
          <img src={HERO_SLIDES[prev]} loading="lazy" width="1920" height="1280" alt="" aria-hidden="true" />
        </div>
      )}
      <div className="hero__slide hero__slide--in">
        <img src={HERO_SLIDES[current]} loading="eager" fetchPriority="high" width="1920" height="1280" alt={`Architekt Stuttgart – Architekturprojekte feinplaner – Einblick ${current + 1}`} />
      </div>
      <div className="hero__dots">
        {HERO_SLIDES.map((_, i) => (
          <button key={i} className={`hero__dot${i === current ? ' active' : ''}`} onClick={() => goTo(i)} aria-label={`Bild ${i + 1}`} />
        ))}
      </div>
    </div>
  );
}

function HomePage({ navigate }) {
  const { PROJECTS, NEWS } = window.feinData;
  const featured = PROJECTS.slice(0, 4);

  // Hide the static hero fallback (index.html) once the React hero slideshow is live
  React.useEffect(() => {
    const el = document.getElementById('static-hero-wrap');
    if (el) el.hidden = true;
  }, []);

  return (
    <>
      <Header route="home" navigate={navigate} transparent={true} dark={true} />

      {/* HERO — Slideshow */}
      <section className="hero">
        <HeroSlideshow />
        <div className="hero__overlay" />
        <div className="hero__content">
          <h1 className="hero__title">
            <span className="ital">Ganzheitliche</span> <span className="b">Architektur</span><br />
            <span style={{ fontWeight: 200 }}>aus einer</span> <span className="b">Hand.</span><br />
            <span style={{ fontWeight: 200 }}>In allen</span> <span className="ital">Maßstäben</span>.
          </h1>
          <div className="hero__row">
            <p className="hero__sub">
              feinplaner ist das Architekturbüro von Timo Pietschmann in Stuttgart. Vom städtebaulichen Konzept bis zum Möbeldetail — Entwurf, Planung und Bauleitung aus einer Hand.
            </p>
            <div className="hero__cta">
              <button className="btn btn--light" onClick={() => navigate('projects')}>
                Projekte ansehen <span className="arrow">→</span>
              </button>
              <button className="btn btn--ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.6)' }} onClick={() => navigate('contact')}>
                Erstgespräch
              </button>
            </div>
          </div>
        </div>
        <div className="hero__scroll"><span className="line"></span> Scrollen</div>
      </section>

      {/* MANIFESTO */}
      <section className="manifesto">
        <div className="wrap">
          <div className="manifesto__head">
            <div className="label eyebrow petrol">— Haltung</div>
            <h2 className="manifesto__lead">
              <span className="b">Architektur</span> ist Verantwortung —<br />
              für den <span className="ital">Ort</span>, für die <span className="ital">Bauherrschaft</span>, für die <span className="petrol">Zeit</span>, in der wir bauen.
            </h2>
          </div>
          <div className="manifesto__row">
            <div className="label eyebrow">— So arbeiten wir</div>
            <div className="col">
              <h4>Aus einer Hand</h4>
              <p className="body">Entwurf, Genehmigung, Ausführung und Bauleitung liegen bei mir. Eine Telefonnummer, ein Ansprechpartner — von der ersten Idee bis zur Schlüsselübergabe.</p>
            </div>
            <div className="col">
              <h4>In allen Maßstäben</h4>
              <p className="body">Vom Städtebau 1:500 bis zum Möbeldetail 1:1. Architektur entsteht nicht nur in einzelnen Maßstäben — sondern in deren Übergängen.</p>
            </div>
            <div className="col">
              <h4>Mit Sorgfalt</h4>
              <p className="body">Sorgfalt im Hören, Sorgfalt im Zeichnen, Sorgfalt im Detail. Wo diese Sorgfalt einmal angekommen ist, hält sie sich über die Jahre.</p>
            </div>
          </div>
        </div>
      </section>

      {/* CAPABILITIES */}
      <section className="caps">
        <div className="wrap">
          <div className="caps__head">
            <div>
              <div className="eyebrow petrol" style={{ marginBottom: 16 }}>— Leistungen</div>
              <h2 className="h2">Was ich <span style={{ fontStyle: 'italic', fontWeight: 200 }}>für Sie</span> tun kann.</h2>
            </div>
            <button className="text-link" onClick={() => navigate('services')}>Alle Leistungen <span>→</span></button>
          </div>
          <div className="caps__grid">
            {[
              ['01', 'Neubau', 'Vom Einfamilienhaus über Mehrfamilien­häuser bis zum öffentlichen Bauvorhaben. Volle Leistungs­phasen 1–9 nach HOAI.'],
              ['02', 'Bauen im Bestand', 'Sanierung, Umbau, Aufstockung und Umnutzung — auch bei denkmalgeschützten Gebäuden.'],
              ['03', 'Innenarchitektur', 'Räume von innen gedacht: Möblierung, Materialwahl, Detailplanung — eigenständig oder als Teil eines Bauprojekts.'],
              ['04', 'Beratung', 'Machbarkeit, Vorprüfung, Bauvoranfrage. Auch ohne Folgeauftrag.']
            ].map(([n, t, d]) => (
              <div key={n} className="caps__tile" onClick={() => navigate('services')}>
                <div className="num">{n}</div>
                <h3>{t}</h3>
                <p>{d}</p>
                <div className="more">Mehr →</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED PROJECTS */}
      <section className="feat">
        <div className="wrap">
          <div className="feat__head">
            <div>
              <div className="eyebrow petrol" style={{ marginBottom: 16 }}>— Auswahl</div>
              <h2 className="h2">Aktuelle <span style={{ fontStyle: 'italic', fontWeight: 200 }}>Arbeiten</span></h2>
            </div>
            <button className="text-link" onClick={() => navigate('projects')}>Alle Projekte <span>→</span></button>
          </div>
          <div className="feat__list">
            {featured.map((p) => (
              <div key={p.slug} className="feat-row" onClick={() => navigate(`project/${p.slug}`)}>
                <div className="feat-row__num">{p.nr}</div>
                <div className="feat-row__title">
                  {p.title.map((part, i) => typeof part === 'string' ? <span key={i}>{part}</span> : <span key={i} className="ital">{part.ital}</span>)}
                </div>
                <div className="feat-row__meta">
                  <div>{p.typeLabel}</div>
                  <div>{p.location} · {p.year}</div>
                </div>
                <img className="feat-row__thumb" src={p.thumb} loading="lazy" alt={`Architekt Stuttgart – ${p.title.map(t => typeof t === 'string' ? t : t.ital).join('')} – feinplaner`} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="process">
        <div className="wrap">
          <div className="process__head">
            <div>
              <div className="eyebrow light" style={{ marginBottom: 16 }}>— Vorgehen</div>
              <h2 className="h2" style={{ color: '#fff' }}>Vier Phasen, die <span style={{ fontStyle: 'italic', fontWeight: 200 }}>jedes Projekt</span> tragen.</h2>
            </div>
            <p className="body" style={{ color: 'rgba(255,255,255,0.78)' }}>
              Ich arbeite transparent entlang der HOAI-Leistungsphasen. Hier in vier Etappen zusammengefasst — ausführlich auf der Seite Leistungen.
            </p>
          </div>
          <div className="process__list">
            {[
              ['Hören', 'Erstgespräch, Begehung, Briefing. Ich kläre Wünsche, Budget, Zeitplan — und ob wir zueinander passen.'],
              ['Entwerfen', 'Vorentwurf bis Genehmigungsplanung. Variantenstudien, Modellbau, gemeinsame Entscheidung.'],
              ['Planen', 'Werkplanung, Ausschreibung, Vergabe. Hier entstehen die Details, die später nicht auffallen sollen.'],
              ['Bauen', 'Bauleitung, Abnahme, Übergabe. Ich bleibe dabei, bis der letzte Schalter sitzt.']
            ].map(([title, body], i) => (
              <div key={i} className="process__step">
                <div className="num">0{i+1}<span className="of">/04</span></div>
                <div>
                  <h4>{title}</h4>
                  <p>{body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PRESS */}
      <section className="press">
        <div className="wrap">
          <div className="feat__head">
            <div>
              <div className="eyebrow petrol" style={{ marginBottom: 16 }}>— Aktuelles</div>
              <h2 className="h2">Was uns <span style={{ fontStyle: 'italic', fontWeight: 200 }}>gerade</span> beschäftigt.</h2>
            </div>
          </div>
          <div className="press__list">
            {NEWS.map((n, i) => (
              <div key={i} className="press__item">
                <div className="yr">{n.date} · {n.tag}</div>
                <h4>{n.title}</h4>
                {n.img && <img src={n.img} loading="lazy" alt={n.title} className="press__img" />}
              </div>
            ))}
            <div className="press__item" style={{ background: 'var(--paper-2)' }}>
              <div className="yr">Newsletter</div>
              <h4>Vier Mal im Jahr Post aus dem Studio.</h4>
              <p>Neue Projekte, Vorträge, ein Detail aus der Werkstatt.</p>
              <a className="text-link" style={{ marginTop: 12, fontSize: 11 }}>Abonnieren →</a>
            </div>
          </div>
        </div>
      </section>

      {/* LEISTUNGSGEBIET — SEO-Textblock */}
      <section className="seo-region">
        <div className="wrap">
          <div className="seo-region__inner">
            <div className="eyebrow petrol" style={{ marginBottom: 16 }}>— Architekturbüro Stuttgart</div>
            <p className="body">
              <strong>feinplaner</strong> ist das Architekturbüro von Timo Pietschmann, freier Architekt in Stuttgart.
              Ich begleite Bauherrschaften in Stuttgart und ganz Baden-Württemberg von der ersten Idee
              bis zur Schlüsselübergabe — bei <strong>Neubau</strong>, <strong>Umbau</strong>, <strong>Sanierung</strong> und <strong>Denkmalpflege</strong>.
              Als Mitglied der <a href="https://www.akbw.de" target="_blank" rel="noopener noreferrer">Architektenkammer Baden-Württemberg</a> biete ich alle neun HOAI-Leistungsphasen
              aus einer Hand: Entwurf, Genehmigungsplanung, Werkplanung, Ausschreibung und Bauleitung.
              Meine Schwerpunkte liegen im Wohnungsbau, bei öffentlichen Bauten sowie im Bereich
              Gewerbe und Innenarchitektur. Tätig bin ich im Großraum Stuttgart sowie in den Landkreisen
              Böblingen, Esslingen, Ludwigsburg, Reutlingen und Tübingen. Persönliche Betreuung, direkte Kommunikation
              und sorgfältige Planung in jedem Detail  — das ist das Versprechen von feinplaner.
            </p>
          </div>
        </div>
      </section>

      {/* FAQ — Häufige Fragen / GEO-Optimierung */}
      <section className="hp-faq">
        <div className="wrap">
          <div className="eyebrow petrol" style={{ marginBottom: 16 }}>— Häufige Fragen</div>
          <h2 className="h2">Was Bauherrinnen und Bauherren <span style={{ fontStyle: 'italic', fontWeight: 200 }}>oft</span> <span style={{ fontStyle: 'italic', fontWeight: 200 }}>fragen</span>.</h2>
          <div className="hp-faq__grid">
            {window.feinData.FAQ.map(([q, a], i) => (
              <div key={i} className="hp-faq__item">
                <h3 className="hp-faq__q">{q}</h3>
                <p className="body hp-faq__a">{a}</p>
              </div>
            ))}
          </div>
          <button className="text-link" style={{ marginTop: 32 }} onClick={() => navigate('services')}>
            Alle Leistungen ansehen <span>→</span>
          </button>
        </div>
      </section>

      <CtaStrip navigate={navigate} />
      <Footer navigate={navigate} />
    </>
  );
}

window.HomePage = HomePage;