const { useState, useEffect, useRef } = React;

const HERO_IMAGES = [
window.__resources.aussen1,
window.__resources.aussen2,
window.__resources.aussen3,
window.__resources.innen1,
window.__resources.innen2];


const NAV_LINKS = [
{ label: 'Home', hash: 'home' },
{ label: 'Gemeinde', hash: 'gemeinde' },
{ label: 'Projekt', hash: 'projekt' },
{ label: 'Wohnungen', hash: 'wohnungen' },
{ label: 'Baubeschrieb', hash: 'baubeschrieb' },
{ label: 'Innenausbau', hash: 'innenausbau' },
{ label: 'Projektablauf', hash: 'projektablauf' },
{ label: 'Kontakt', hash: 'kontakt' },
{ label: 'Referenzen', hash: 'referenzen' }];


function Navigation({ transparent = false }) {
  const t = useTheme();
  const scrollY = useScrollY();
  const mobile = useMobile(1200);
  const hash = useHash();
  const [menuOpen, setMenuOpen] = useState(false);
  const scrolled = scrollY > 60 || !transparent;
  const onLight = !scrolled;

  return (
    <>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
        padding: scrolled ? '10px clamp(20px,4vw,40px)' : '18px clamp(20px,4vw,40px)',
        background: scrolled ? `${t.bg}ee` : 'transparent',
        backdropFilter: scrolled ? 'blur(20px) saturate(1.4)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(1.4)' : 'none',
        borderBottom: scrolled ? `1px solid ${t.border}40` : '1px solid transparent',
        transition: 'all 0.4s ease',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr auto' : '1fr auto 1fr',
        alignItems: 'center',
        gap: '24px'
      }}>
        <a href="#home" style={{ textDecoration: 'none', transition: 'transform 0.4s ease', transform: `scale(${scrolled ? 0.88 : 1})`, transformOrigin: 'left center', display: 'inline-block', justifySelf: 'start' }}>
          <Logo compact={scrolled} light={onLight} />
        </a>
        {!mobile &&
        <div style={{ display: 'flex', gap: 'clamp(10px, 1.2vw, 22px)', alignItems: 'center', justifySelf: 'center' }}>
            {NAV_LINKS.map((l) => {
              if (l.hash === 'wohnungen') {
                return <WohnungenNavLink key={l.hash} {...l} active={hash === l.hash || hash.startsWith('wohnung-')} onLight={onLight} />;
              }
              if (l.hash === 'projekt') {
                return <ProjektNavLink key={l.hash} {...l} active={hash === l.hash || hash.startsWith('projekt-')} onLight={onLight} />;
              }
              return <NavLink key={l.hash} {...l} active={hash === l.hash} onLight={onLight} />;
            })}
          </div>
        }
        {!mobile &&
        <a href="#kontakt" style={{
          justifySelf: 'end',
          display: 'inline-flex', alignItems: 'center', gap: '8px',
          padding: '11px 22px', borderRadius: '999px',
          background: onLight ? 'rgba(255,255,255,0.14)' : t.accent,
          color: '#fff',
          border: onLight ? '1px solid rgba(255,255,255,0.35)' : 'none',
          textDecoration: 'none',
          fontFamily: t.body, fontWeight: 600, fontSize: '0.66rem',
          letterSpacing: '0.16em', textTransform: 'uppercase',
          backdropFilter: onLight ? 'blur(10px)' : 'none',
          WebkitBackdropFilter: onLight ? 'blur(10px)' : 'none',
          transition: 'all 0.4s ease',
          whiteSpace: 'nowrap'
        }}
        onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-1px)';}}
        onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';}}>
          
            Anfragen
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </a>
        }
        {mobile &&
        <button onClick={() => setMenuOpen(!menuOpen)} style={{
          background: 'none', border: 'none', cursor: 'pointer', justifySelf: 'end',
          padding: '6px', color: scrolled ? t.text : '#fff', zIndex: 1001
        }}>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
              {menuOpen ?
            <><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></> :
            <><line x1="4" y1="7" x2="20" y2="7" /><line x1="4" y1="17" x2="20" y2="17" /></>}
            </svg>
          </button>
        }
      </nav>
      {menuOpen &&
      <div style={{
        position: 'fixed', inset: 0, zIndex: 999,
        background: `${t.bg}f5`, backdropFilter: 'blur(30px)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '20px',
        padding: '80px 20px 40px', overflowY: 'auto'
      }}>
          {NAV_LINKS.map((l) =>
        <a key={l.hash} href={`#${l.hash}`} onClick={() => setMenuOpen(false)} style={{
          fontFamily: t.heading, fontSize: 'clamp(1.5rem, 4vw, 2rem)', fontWeight: 400,
          color: hash === l.hash ? t.accent : t.text,
          textDecoration: 'none', letterSpacing: '0.04em'
        }}>{l.label}</a>
        )}
        </div>
      }
    </>);

}

function NavLink({ label, hash, active, onLight }) {
  const t = useTheme();
  const [hov, setHov] = useState(false);
  const baseColor = onLight ? '#fff' : t.text;
  return (
    <a href={`#${hash}`} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
    style={{
      fontFamily: t.body, fontWeight: 500, fontSize: '0.62rem',
      letterSpacing: '0.13em', textTransform: 'uppercase',
      color: active ? t.accent : baseColor, textDecoration: 'none',
      opacity: hov || active ? 1 : 0.78, transition: 'all 0.3s', position: 'relative',
      padding: '6px 0', whiteSpace: 'nowrap'
    }}>
      {label}
      <span style={{
        position: 'absolute', bottom: 0, left: 0,
        width: hov || active ? '100%' : '0%', height: '1px',
        background: active ? t.accent : onLight ? '#fff' : t.accent,
        transition: 'width 0.3s'
      }} />
    </a>);

}

function ProjektNavLink({ label, hash, active, onLight }) {
  const t = useTheme();
  const [open, setOpen] = useState(false);
  const baseColor = onLight ? '#fff' : t.text;
  const items = [
    { label: 'Umgebung', hash: 'projekt-umgebung' },
    { label: 'Untergeschoss', hash: 'projekt-untergeschoss' },
  ];
  return (
    <div onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}
      style={{ position: 'relative' }}>
      <a href={`#${hash}`}
        style={{
          fontFamily: t.body, fontWeight: 500, fontSize: '0.62rem',
          letterSpacing: '0.13em', textTransform: 'uppercase',
          color: active ? t.accent : baseColor, textDecoration: 'none',
          opacity: open || active ? 1 : 0.78, transition: 'all 0.3s', position: 'relative',
          padding: '6px 0', whiteSpace: 'nowrap',
          display: 'inline-flex', alignItems: 'center', gap: '4px',
        }}>
        {label}
        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
          style={{ transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.25s' }}>
          <path d="M6 9l6 6 6-6" />
        </svg>
        <span style={{
          position: 'absolute', bottom: 0, left: 0,
          width: open || active ? '100%' : '0%', height: '1px',
          background: active ? t.accent : onLight ? '#fff' : t.accent,
          transition: 'width 0.3s'
        }} />
      </a>
      {open && <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, height: '14px' }} />}
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 14px)', left: '50%', transform: 'translateX(-50%)',
          background: `${t.bg}f5`, backdropFilter: 'blur(20px) saturate(1.4)',
          WebkitBackdropFilter: 'blur(20px) saturate(1.4)',
          border: `1px solid ${t.border}40`, borderRadius: t.radius,
          padding: '14px 22px',
          boxShadow: '0 18px 60px rgba(0,0,0,0.25)',
          display: 'flex', flexDirection: 'column', gap: '6px',
          zIndex: 1001, minWidth: '160px',
        }}>
          {items.map(it => (
            <a key={it.hash} href={`#${it.hash}`}
              style={{
                fontFamily: t.body, fontSize: '0.78rem', fontWeight: 500,
                color: t.text, textDecoration: 'none', padding: '4px 0',
                letterSpacing: '0.06em',
                transition: 'color 0.2s', whiteSpace: 'nowrap',
              }}
              onMouseEnter={e => e.currentTarget.style.color = t.accent}
              onMouseLeave={e => e.currentTarget.style.color = t.text}>
              {it.label}
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

function WohnungenNavLink({ label, hash, active, onLight }) {
  const t = useTheme();
  const [open, setOpen] = useState(false);
  const baseColor = onLight ? '#fff' : t.text;
  const details = (typeof window !== 'undefined' && window.WOHNUNG_DETAILS) || [];
  const houses = ['A', 'B', 'C', 'D'];
  const order = { EG: 0, OG: 1, Attika: 2 };
  const sortedByHaus = (h) =>
    details.filter(d => d.haus === h)
      .slice()
      .sort((a, b) => (order[a.geschossShort] ?? 9) - (order[b.geschossShort] ?? 9) || a.id.localeCompare(b.id));

  return (
    <div onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}
      style={{ position: 'relative' }}>
      <a href={`#${hash}`}
        style={{
          fontFamily: t.body, fontWeight: 500, fontSize: '0.62rem',
          letterSpacing: '0.13em', textTransform: 'uppercase',
          color: active ? t.accent : baseColor, textDecoration: 'none',
          opacity: open || active ? 1 : 0.78, transition: 'all 0.3s', position: 'relative',
          padding: '6px 0', whiteSpace: 'nowrap',
          display: 'inline-flex', alignItems: 'center', gap: '4px',
        }}>
        {label}
        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
          style={{ transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.25s' }}>
          <path d="M6 9l6 6 6-6" />
        </svg>
        <span style={{
          position: 'absolute', bottom: 0, left: 0,
          width: open || active ? '100%' : '0%', height: '1px',
          background: active ? t.accent : onLight ? '#fff' : t.accent,
          transition: 'width 0.3s'
        }} />
      </a>

      {/* Invisible hover bridge so cursor can move into dropdown without losing hover */}
      {open && <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, height: '14px' }} />}

      {open && details.length > 0 && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 14px)', left: '50%', transform: 'translateX(-50%)',
          background: `${t.bg}f5`, backdropFilter: 'blur(20px) saturate(1.4)',
          WebkitBackdropFilter: 'blur(20px) saturate(1.4)',
          border: `1px solid ${t.border}40`, borderRadius: t.radius,
          padding: '22px 28px',
          boxShadow: '0 18px 60px rgba(0,0,0,0.25)',
          display: 'grid', gridTemplateColumns: 'repeat(4, auto)', gap: '28px',
          zIndex: 1001,
        }}>
          {houses.map(h => (
            <div key={h} style={{ minWidth: '80px' }}>
              <div style={{
                fontFamily: t.body, fontWeight: 700, fontSize: '0.62rem',
                letterSpacing: '0.22em', textTransform: 'uppercase',
                color: t.accent, marginBottom: '12px',
              }}>Haus {h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                {sortedByHaus(h).map(d => (
                  <a key={d.key} href={`#wohnung-${d.key}`}
                    style={{
                      fontFamily: t.body, fontSize: '0.78rem', fontWeight: 500,
                      color: t.text, textDecoration: 'none', padding: '3px 0',
                      transition: 'color 0.2s', whiteSpace: 'nowrap',
                    }}
                    onMouseEnter={e => e.currentTarget.style.color = t.accent}
                    onMouseLeave={e => e.currentTarget.style.color = t.text}>
                    {d.id}
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function HeroSection() {
  const t = useTheme();
  const scrollY = useScrollY();
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    const ti = setInterval(() => setIdx((i) => (i + 1) % HERO_IMAGES.length), 6500);
    return () => clearInterval(ti);
  }, [paused]);

  const vh = typeof window !== 'undefined' ? window.innerHeight : 800;
  const fadeProgress = Math.min(Math.max(scrollY / (vh * 0.7), 0), 1);
  const contentOpacity = 1 - fadeProgress;
  const contentTranslate = fadeProgress * -50;
  const bgTranslate = scrollY * 0.35;
  const bgScale = 1 + scrollY * 0.0004;
  const overlayBoost = Math.min(scrollY / vh, 1) * 0.25;

  return (
    <section style={{
      height: '100vh', minHeight: '600px', position: 'relative',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center', overflow: 'hidden'
    }}>
      <div style={{ position: 'absolute', inset: 0, background: t.heroBg }}>
        {HERO_IMAGES.map((src, i) =>
        <div key={i} style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${src})`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          opacity: idx === i ? 1 : 0,
          transform: idx === i ?
          `translate3d(0, ${bgTranslate}px, 0) scale(${bgScale})` :
          'translate3d(0, 0, 0) scale(1.04)',
          transition: 'opacity 1.4s ease',
          willChange: 'opacity, transform'
        }} />
        )}
        <div style={{ position: 'absolute', inset: 0, background: t.heroOverlay, opacity: 1 + overlayBoost }} />
      </div>

      {/* Carousel controls */}
      <button onClick={() => {setPaused(true);setIdx((i) => (i - 1 + HERO_IMAGES.length) % HERO_IMAGES.length);}}
      style={{ ...navBtnStyle('left'), opacity: contentOpacity }} aria-label="Vorheriges Bild">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 6l-6 6 6 6" /></svg>
      </button>
      <button onClick={() => {setPaused(true);setIdx((i) => (i + 1) % HERO_IMAGES.length);}}
      style={{ ...navBtnStyle('right'), opacity: contentOpacity }} aria-label="Nächstes Bild">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 6l6 6-6 6" /></svg>
      </button>

      {/* Content with scroll-fade */}
      <div style={{
        position: 'relative', zIndex: 2, textAlign: 'center',
        paddingBottom: 'clamp(70px, 12vh, 120px)', maxWidth: '820px',
        padding: '0 24px clamp(70px, 12vh, 120px)',
        opacity: contentOpacity,
        transform: `translate3d(0, ${contentTranslate}px, 0)`,
        willChange: 'opacity, transform'
      }}>
        <FadeIn delay={0.15}>
          <div style={{
            fontFamily: t.body, fontWeight: 400, fontSize: '0.72rem',
            letterSpacing: '0.32em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.7)', marginBottom: '14px'
          }}>Eigenmatt 11a-d, 5082 Kaisten (AG)</div>
        </FadeIn>
        <FadeIn delay={0.35}>
          <h1 style={{
            fontFamily: t.heading, fontWeight: 300,
            fontSize: 'clamp(2.6rem, 6vw, 5rem)',
            color: '#fff', lineHeight: 1.05, marginBottom: '18px', fontStyle: 'italic'
          }}>Eigenmatt Kaisten</h1>
        </FadeIn>
        <FadeIn delay={0.55}>
          <p style={{
            fontFamily: t.body, fontWeight: 300, fontSize: 'clamp(0.9rem, 1.2vw, 1.05rem)',
            color: 'rgba(255,255,255,0.78)', lineHeight: 1.65,
            maxWidth: '600px', margin: '0 auto'
          }}>28 Eigentumswohnungen in Neubauprojekt, 2.5 - 5.5 Zimmer-Wohnungen</p>
        </FadeIn>
        <FadeIn delay={0.75}>
          <div style={{ marginTop: '36px', display: 'flex', gap: '14px', justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="#projekt" style={{ textDecoration: 'none' }}><Btn variant="light">Projekt entdecken</Btn></a>
            <a href="#wohnungen" style={{ textDecoration: 'none' }}><Btn variant="light">Wohnungen ansehen</Btn></a>
          </div>
        </FadeIn>
      </div>

      {/* Dots */}
      <div style={{
        position: 'absolute', bottom: '32px', left: '50%', transform: 'translateX(-50%)',
        display: 'flex', gap: '10px', zIndex: 3,
        opacity: contentOpacity
      }}>
        {HERO_IMAGES.map((_, i) =>
        <button key={i} onClick={() => {setPaused(true);setIdx(i);}}
        style={{
          width: idx === i ? '28px' : '8px', height: '2px',
          background: idx === i ? '#fff' : 'rgba(255,255,255,0.4)',
          border: 'none', transition: 'all 0.4s ease', cursor: 'pointer',
          padding: 0
        }}
        aria-label={`Bild ${i + 1}`} />

        )}
      </div>

      {/* Scroll hint at bottom edge */}
      <div style={{
        position: 'absolute', bottom: '12px', right: 'clamp(20px, 4vw, 40px)',
        zIndex: 3, opacity: contentOpacity * 0.7,
        display: 'flex', alignItems: 'center', gap: '10px',
        color: '#fff',
        fontFamily: t.body, fontSize: '0.62rem', letterSpacing: '0.22em', textTransform: 'uppercase'
      }}>
        <span>Scrollen</span>
        <span style={{
          display: 'inline-block', width: '40px', height: '1px',
          background: 'rgba(255,255,255,0.5)',
          animation: 'scrollLine 2s ease-in-out infinite'
        }} />
      </div>
    </section>);

}

function navBtnStyle(side) {
  return {
    position: 'absolute', top: '50%', [side]: 'clamp(16px, 3vw, 36px)',
    transform: 'translateY(-50%)', zIndex: 3,
    width: '46px', height: '46px', borderRadius: '50%',
    background: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)',
    border: '1px solid rgba(255,255,255,0.25)', color: '#fff',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer', transition: 'background 0.3s'
  };
}

function HomeIntro() {
  const t = useTheme();
  return (
    <section id="top-projekt" style={sec(t, { paddingTop: 'clamp(80px, 10vw, 130px)', paddingBottom: 'clamp(60px, 8vw, 100px)' })}>
      <div style={{ maxWidth: '880px', margin: '0 auto', textAlign: 'center' }}>
        <RevealText delay={0.05}>
          <div style={lbl(t)}>Willkommen</div>
        </RevealText>
        <RevealText delay={0.15} dur={1.2}>
          <h2 style={hdg(t, { marginBottom: '36px', fontSize: 'clamp(2.4rem, 5vw, 4rem)', lineHeight: 1.08 })}>
            Neubauprojekt in <em style={{ fontWeight: 300 }}>Kaisten / AG</em>
          </h2>
        </RevealText>
        <RevealText delay={0.35}>
          <p style={{ ...para(t), color: t.textMuted, fontSize: '1.08rem', marginBottom: '14px', textAlign: "left" }}>
            In <a href="#gemeinde" style={ilink(t)}>Kaisten / AG</a> entsteht an der Eigenmatt,
            am Ufer des Kaisterbachs, ein Architektur-Ensemble aus vier Wohnhäusern
            mit 28 Eigentumswohnungen, 2,5 bis 5,5 Zimmer.
          </p>
        </RevealText>
        <RevealText delay={0.5}>
          <p style={{ ...para(t), color: t.textMuted, fontSize: '1.08rem', marginBottom: '14px', textAlign: "left" }}>
            Hier können Sie sich über das <a href="#projekt" style={ilink(t)}>Projekt Eigenmatt Kaisten</a> informieren
            und die Grundrisse der <a href="#wohnungen" style={ilink(t)}>Wohnungen</a> anschauen.
          </p>
        </RevealText>
        <RevealText delay={0.65}>
          <p style={{ ...para(t), color: t.textMuted, fontSize: '1.08rem', marginBottom: 0, textAlign: "center", letterSpacing: "0px" }}>
            Bei Interesse nehmen Sie <a href="#kontakt" style={ilink(t)}>Kontakt</a> mit uns auf.
          </p>
        </RevealText>
      </div>
    </section>);

}

const ilink = (t) => ({
  color: t.accent, textDecoration: 'none', fontWeight: 500,
  borderBottom: `1px solid ${t.accent}50`, paddingBottom: '1px', transition: 'all 0.2s'
});

function StatsBar() {
  const t = useTheme();
  const stats = [
  { value: 28, label: 'Wohnungen', cap: '2,5 bis 5,5 Zimmer' },
  { value: 4, label: 'Wohnhäuser', cap: 'Architektur-Ensemble' },
  { value: 43, label: 'Parkplätze', cap: 'In der Einstellhalle' }];

  const mobile = useMobile();
  return (
    <section style={{
      background: t.bg,
      padding: 'clamp(80px, 12vw, 140px) clamp(20px, 5vw, 48px)',
      borderBottom: `1px solid ${t.border}`
    }}>
      <div style={{ maxWidth: '1160px', margin: '0 auto', height: "445.227px" }}>
        <div style={{ textAlign: 'center', marginBottom: 'clamp(48px, 6vw, 72px)' }}>
          <RevealText delay={0.05}><div style={{ ...lbl(t), margin: "4px 0px 14px" }}>Das Projekt in Zahlen</div></RevealText>
          <RevealText delay={0.15} dur={1.2}>
            <h2 style={hdg(t, { fontSize: 'clamp(2rem, 3.8vw, 3rem)' })}>Ein Architektur-Ensemble</h2>
          </RevealText>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 0,
          borderTop: `1px solid ${t.border}`
        }}>
          {stats.map((s, i) =>
          <FadeIn key={i} delay={i * 0.12}>
              <div style={{
              padding: 'clamp(40px, 5vw, 64px) clamp(20px, 3vw, 36px)',
              borderRight: !mobile && i < stats.length - 1 ? `1px solid ${t.border}` : 'none',
              borderBottom: mobile && i < stats.length - 1 ? `1px solid ${t.border}` : 'none',
              textAlign: 'center',
              position: 'relative'
            }}>
                <RevealText delay={0.05 + i * 0.08} dur={1.1}>
                  <div style={{
                  fontFamily: t.heading, fontWeight: 300,
                  fontSize: 'clamp(4rem, 9vw, 7rem)',
                  color: t.text, lineHeight: 0.9, letterSpacing: '-0.02em',
                  fontFeatureSettings: '"lnum"'
                }}>
                    <AnimCounter value={s.value} />
                  </div>
                </RevealText>
                <div style={{
                width: '36px', height: '1px', background: t.accent,
                margin: '20px auto'
              }} />
                <div style={{
                fontFamily: t.body, fontWeight: 600, fontSize: '0.72rem',
                letterSpacing: '0.22em', textTransform: 'uppercase',
                color: t.text, marginBottom: '6px'
              }}>{s.label}</div>
                <div style={{
                fontFamily: t.body, fontWeight: 300, fontSize: '0.84rem',
                color: t.textMuted, fontStyle: 'italic'
              }}>{s.cap}</div>
              </div>
            </FadeIn>
          )}
        </div>
      </div>
    </section>);

}

function PullQuote() {
  const t = useTheme();
  const scrollY = useScrollY();
  const ref = useRef(null);
  let offset = 0;
  if (typeof window !== 'undefined' && ref.current) {
    const rect = ref.current.getBoundingClientRect();
    const winH = window.innerHeight;
    const center = rect.top + rect.height / 2;
    const dist = (center - winH / 2) / winH;
    offset = dist * 30;
  }

  return (
    <section ref={ref} style={{
      padding: 'clamp(110px, 16vw, 200px) clamp(20px, 5vw, 48px)',
      background: t.bgAlt,
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', top: '8%', left: 'clamp(20px, 5vw, 8%)',
        fontFamily: t.heading, fontWeight: 400,
        fontSize: 'clamp(8rem, 18vw, 18rem)',
        color: t.accent, opacity: 0.08, lineHeight: 1,
        userSelect: 'none', pointerEvents: 'none',
        transform: `translate3d(0, ${offset}px, 0)`,
        willChange: 'transform'
      }}>"</div>
      <div style={{ maxWidth: '980px', margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <RevealText delay={0.05}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: '14px', marginBottom: '40px'
          }}>
            <span style={{ width: '32px', height: '1px', background: t.accent }} />
            <span style={{
              fontFamily: t.body, fontWeight: 600, fontSize: '0.62rem',
              letterSpacing: '0.3em', textTransform: 'uppercase', color: t.accent
            }}>Im Fricktal</span>
            <span style={{ width: '32px', height: '1px', background: t.accent }} />
          </div>
        </RevealText>
        <RevealText delay={0.2} dur={1.3}>
          <h2 style={{
            fontFamily: t.heading, fontWeight: 300,
            fontSize: 'clamp(1.7rem, 4vw, 3.2rem)',
            color: t.text, lineHeight: 1.3, fontStyle: 'italic'
          }}>
            Windgeschützt und sonnig liegt das Dorf in einer Talweitung auf{' '}
            <span style={{ color: t.accent, fontStyle: 'normal', fontWeight: 400 }}>335 Metern über Meer</span>,
            eingebettet in sattes Wiesengrün.
          </h2>
        </RevealText>
        <RevealText delay={0.45}>
          <div style={{
            marginTop: '36px',
            fontFamily: t.body, fontSize: '0.78rem', letterSpacing: '0.14em',
            textTransform: 'uppercase', color: t.textMuted, fontWeight: 500
          }}>— Kaisten, Kanton Aargau</div>
        </RevealText>
      </div>
    </section>);

}

function QuickLinks() {
  const t = useTheme();
  const mobile = useMobile();
  const items = [
  { hash: 'gemeinde', eyebrow: '01 — Lage', label: 'Die Gemeinde', desc: 'Kaisten im Fricktal — sonnig am Südrand des Tafeljuras, knapp 2 km südlich des Rheins.', img: window.__resources.gemeinde },
  { hash: 'projekt', eyebrow: '02 — Architektur', label: 'Das Projekt', desc: 'Vier visuell identische Wohnhäuser, gestaffelt um einen lebendigen Innenhof.', img: window.__resources.aussen1 },
  { hash: 'wohnungen', eyebrow: '03 — Wohnen', label: 'Die Wohnungen', desc: '28 Eigentumswohnungen, 2,5 bis 5,5 Zimmer, lichtdurchflutet mit raumhohen Fenstern.', img: window.__resources.innen2 },
  { hash: 'kontakt', eyebrow: '04 — Beratung', label: 'Sprechen wir', desc: 'Persönliche Beratung — direkt von RE/MAX Immobilien Frick.', img: window.__resources.aussen2 }];

  return (
    <section style={sec(t)}>
      <div style={{ maxWidth: '1240px', margin: '0 auto' }}>
        <FadeIn style={{ textAlign: 'center', marginBottom: 'clamp(48px, 7vw, 80px)' }}>
          <div style={lbl(t)}>Entdecken</div>
          <h2 style={hdg(t, { marginBottom: '14px', fontSize: 'clamp(2.4rem, 4.5vw, 3.6rem)' })}>
            Was Sie <em style={{ fontWeight: 300 }}>erwartet</em>
          </h2>
          <p style={{ ...bdy(t), maxWidth: '560px', margin: '0 auto', fontSize: '1rem' }}>
            Vier Perspektiven auf das Projekt — wählen Sie Ihren Einstieg.
          </p>
        </FadeIn>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
          gap: 'clamp(14px, 1.6vw, 22px)'
        }}>
          {items.map((it, i) => <ImmersiveCard key={it.hash} {...it} idx={i} />)}
        </div>
      </div>
    </section>);

}

function ImmersiveCard({ hash, label, desc, eyebrow, img, idx }) {
  const t = useTheme();
  const [hov, setHov] = useState(false);
  const [pRef, pY] = useParallax(40);
  return (
    <FadeIn delay={idx * 0.1}>
      <a href={`#${hash}`}
      ref={pRef}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        display: 'block', textDecoration: 'none',
        position: 'relative',
        aspectRatio: '4/3',
        borderRadius: t.radius, overflow: 'hidden',
        background: t.cardBg,
        boxShadow: hov ? '0 30px 80px rgba(0,0,0,0.25)' : '0 8px 30px rgba(0,0,0,0.08)',
        transition: 'box-shadow 0.5s ease'
      }}>
        {/* Background image with parallax */}
        <div style={{
          position: 'absolute', inset: '-8% 0',
          backgroundImage: `url(${img})`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          transform: `translate3d(0, ${pY}px, 0) scale(${hov ? 1.08 : 1.04})`,
          transition: 'transform 0.9s cubic-bezier(0.16,1,0.3,1)',
          willChange: 'transform'
        }} />
        {/* Gradient overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: hov ?
          'linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.15) 100%)' :
          'linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.2) 55%, transparent 100%)',
          transition: 'background 0.6s ease'
        }} />
        {/* Number tag, top-left */}
        <div style={{
          position: 'absolute', top: 'clamp(20px, 3vw, 32px)', left: 'clamp(22px, 3vw, 36px)',
          color: '#fff', opacity: 0.85,
          fontFamily: t.body, fontWeight: 600, fontSize: '0.6rem',
          letterSpacing: '0.22em', textTransform: 'uppercase'
        }}>{eyebrow}</div>

        {/* Text content bottom */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: 'clamp(28px, 4vw, 44px) clamp(22px, 3vw, 38px)',
          color: '#fff',
          transform: hov ? 'translateY(0)' : 'translateY(0)'
        }}>
          <h3 style={{
            fontFamily: t.heading, fontWeight: 400,
            fontSize: 'clamp(1.7rem, 3vw, 2.4rem)', lineHeight: 1.08,
            marginBottom: '10px'
          }}>{label}</h3>
          <p style={{
            fontFamily: t.body, fontWeight: 300, fontSize: '0.95rem',
            lineHeight: 1.55, marginBottom: '20px',
            color: 'rgba(255,255,255,0.88)',
            maxWidth: '440px',
            opacity: hov ? 1 : 0.85,
            transform: hov ? 'translateY(0)' : 'translateY(4px)',
            transition: 'opacity 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1)'
          }}>{desc}</p>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: '12px',
            fontFamily: t.body, fontWeight: 600, fontSize: '0.66rem',
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: '#fff',
            paddingBottom: '6px',
            position: 'relative'
          }}>
            <span>Mehr erfahren</span>
            <span style={{
              display: 'inline-block',
              transform: hov ? 'translateX(6px)' : 'translateX(0)',
              transition: 'transform 0.4s ease'
            }}>→</span>
            <span style={{
              position: 'absolute', bottom: 0, left: 0,
              height: '1px', background: '#fff',
              width: hov ? '100%' : '40%',
              transition: 'width 0.5s cubic-bezier(0.16,1,0.3,1)'
            }} />
          </div>
        </div>
      </a>
    </FadeIn>);

}

function HomeContactTeaser() {
  const t = useTheme();
  const [pRef, pY] = useParallax(80);
  return (
    <section ref={pRef} style={{
      position: 'relative', overflow: 'hidden',
      minHeight: 'clamp(520px, 70vh, 720px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      {/* Parallax bg image */}
      <div style={{
        position: 'absolute', inset: '-10% 0',
        backgroundImage: `url(${window.__resources.aussen3})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        transform: `translate3d(0, ${pY}px, 0) scale(1.06)`,
        willChange: 'transform'
      }} />
      {/* Dark gradient */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to bottom, rgba(15,20,18,0.45) 0%, rgba(15,20,18,0.7) 100%)'
      }} />
      {/* Content */}
      <div style={{ position: 'relative', textAlign: 'center', padding: '0 24px', maxWidth: '820px' }}>
        <RevealText delay={0.05}>
          <div style={{
            fontFamily: t.body, fontWeight: 600, fontSize: '0.62rem',
            letterSpacing: '0.3em', textTransform: 'uppercase',
            color: t.accent, marginBottom: '18px'
          }}>Interessiert?</div>
        </RevealText>
        <RevealText delay={0.18} dur={1.2}>
          <h2 style={{
            fontFamily: t.heading, fontWeight: 300,
            fontSize: 'clamp(2.4rem, 5.5vw, 4.2rem)',
            color: '#fff', lineHeight: 1.08, marginBottom: '20px',
            fontStyle: 'italic'
          }}>Sprechen wir miteinander.</h2>
        </RevealText>
        <RevealText delay={0.32}>
          <p style={{
            fontFamily: t.body, fontWeight: 300, fontSize: 'clamp(0.95rem, 1.2vw, 1.05rem)',
            color: 'rgba(255,255,255,0.82)', lineHeight: 1.7,
            maxWidth: '520px', margin: '0 auto 36px'
          }}>
            Bei Interesse nehmen Sie Kontakt mit uns auf. Wir freuen uns auf Ihre Anfrage.
          </p>
        </RevealText>
        <RevealText delay={0.45}>
          <a href="#kontakt" style={{
            display: 'inline-flex', alignItems: 'center', gap: '12px',
            padding: '14px 28px', borderRadius: '999px',
            background: t.accent, color: '#fff', textDecoration: 'none',
            fontFamily: t.body, fontWeight: 600, fontSize: '0.7rem',
            letterSpacing: '0.16em', textTransform: 'uppercase',
            boxShadow: `0 14px 40px ${t.accent}55`,
            transition: 'transform 0.3s ease, box-shadow 0.3s ease'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = `0 18px 48px ${t.accent}77`;}}
          onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = `0 14px 40px ${t.accent}55`;}}>
            
            Kontakt aufnehmen
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </a>
        </RevealText>
      </div>
    </section>);

}

function FooterSection() {
  const t = useTheme();
  const mobile = useMobile();
  const footBg = t.isDark ? t.bgAlt : t.bgInverse;
  const footTxt = t.isDark ? t.textMuted : 'rgba(255,255,255,0.55)';
  return (
    <footer style={{ padding: '56px clamp(20px,4vw,48px) 32px', background: footBg }}>
      <div style={{
        maxWidth: '1160px', margin: '0 auto',
        display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.4fr 1fr 1fr',
        gap: '32px', alignItems: 'flex-start'
      }}>
        <div>
          <Logo compact light={!t.isDark} />
          <p style={{ fontFamily: t.body, fontSize: '0.78rem', color: footTxt, marginTop: '12px', lineHeight: 1.7 }}>
            Ein Projekt von JKB Immobilien AG<br />
            Eigenmatt 11a-d, 5082 Kaisten (AG)
          </p>
        </div>
        <div>
          <div style={{ fontFamily: t.body, fontWeight: 600, fontSize: '0.66rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: t.isDark ? t.text : 'rgba(255,255,255,0.85)', marginBottom: '14px' }}>Navigation</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            {['home', 'gemeinde', 'projekt', 'wohnungen'].map((h) =>
            <a key={h} href={`#${h}`} style={{
              fontFamily: t.body, fontSize: '0.82rem', color: footTxt, textDecoration: 'none'
            }}>{NAV_LINKS.find((n) => n.hash === h)?.label}</a>
            )}
          </div>
        </div>
        <div>
          <div style={{ fontFamily: t.body, fontWeight: 600, fontSize: '0.66rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: t.isDark ? t.text : 'rgba(255,255,255,0.85)', marginBottom: '14px' }}>Information</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            {['baubeschrieb', 'innenausbau', 'projektablauf', 'kontakt'].map((h) =>
            <a key={h} href={`#${h}`} style={{
              fontFamily: t.body, fontSize: '0.82rem', color: footTxt, textDecoration: 'none'
            }}>{NAV_LINKS.find((n) => n.hash === h)?.label}</a>
            )}
          </div>
        </div>
      </div>
      <div style={{
        maxWidth: '1160px', margin: '40px auto 0', paddingTop: '20px',
        borderTop: `1px solid ${t.isDark ? t.border : 'rgba(255,255,255,0.1)'}`,
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px'
      }}>
        <p style={{ ...{ fontFamily: t.body, fontSize: '0.7rem', color: `${footTxt}99` }, color: "rgb(196, 154, 108)" }}>© 2026 Eigenmatt Kaisten. Alle Rechte vorbehalten.</p>
        <div style={{ display: 'flex', gap: '20px' }}>
          {['Datenschutz', 'Impressum'].map((l) =>
          <a key={l} href="#" style={{ ...{
              fontFamily: t.body, fontSize: '0.7rem', letterSpacing: '0.08em',
              color: `${footTxt}99`, textDecoration: 'none'
            }, color: "rgb(255, 255, 255)" }}>{l}</a>
          )}
        </div>
      </div>
    </footer>);

}

function ScrollProgress() {
  const t = useTheme();
  const scrollY = useScrollY();
  const max = typeof window !== 'undefined' ? Math.max(document.body.scrollHeight - window.innerHeight, 1) : 1;
  const pct = Math.min(scrollY / max, 1) * 100;
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0,
      height: '2px', zIndex: 1001,
      background: 'transparent', pointerEvents: 'none'
    }}>
      <div style={{
        height: '100%', width: `${pct}%`,
        background: t.accent,
        boxShadow: `0 0 12px ${t.accent}88`,
        willChange: 'width'
      }} />
    </div>);

}

function Filmstrip() {
  const t = useTheme();
  const ref = useRef(null);
  const scrollY = useScrollY();

  let panX = 0;
  if (typeof window !== 'undefined' && ref.current) {
    const rect = ref.current.getBoundingClientRect();
    const winH = window.innerHeight;
    const progress = (winH - rect.top) / (winH + rect.height);
    const clamped = Math.max(0, Math.min(1, progress));
    const maxPan = Math.min(Math.max(500, window.innerWidth * 0.5), window.innerWidth * 0.7);
    panX = -clamped * maxPan;
  }

  const items = [
  { img: window.__resources.aussen1, num: '01', label: 'Aussenansicht' },
  { img: window.__resources.aussen2, num: '02', label: 'Am Kaisterbach' },
  { img: window.__resources.aussen3, num: '03', label: 'Innenhof' },
  { img: window.__resources.innen1, num: '04', label: 'Wohnraum' },
  { img: window.__resources.innen2, num: '05', label: 'Küche' }];


  return (
    <section ref={ref} style={{
      padding: 'clamp(80px, 10vw, 130px) 0 clamp(60px, 8vw, 100px)',
      overflow: 'hidden',
      background: t.bgAlt,
      borderTop: `1px solid ${t.border}`,
      borderBottom: `1px solid ${t.border}`,
      position: 'relative'
    }}>
      <div style={{ textAlign: 'center', marginBottom: '52px', padding: '0 24px' }}>
        <RevealText delay={0.05}><div style={lbl(t)}>Eindrücke</div></RevealText>
        <RevealText delay={0.15} dur={1.2}>
          <h2 style={hdg(t, { fontSize: 'clamp(1.8rem, 3.5vw, 2.6rem)' })}>
            Bilder vom Projekt
          </h2>
        </RevealText>
      </div>

      <div style={{
        display: 'flex', gap: 'clamp(14px, 1.6vw, 24px)',
        transform: `translate3d(${panX}px, 0, 0)`,
        willChange: 'transform',
        paddingLeft: 'clamp(20px, 5vw, 80px)',
        paddingRight: 'clamp(20px, 5vw, 80px)'
      }}>
        {items.map((it, i) =>
        <div key={i} style={{
          flexShrink: 0,
          width: 'clamp(280px, 36vw, 460px)'
        }}>
            <div style={{
            aspectRatio: '4/5',
            backgroundImage: `url(${it.img})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            borderRadius: t.radius,
            boxShadow: '0 16px 50px rgba(0,0,0,0.14)'
          }} />
            <div style={{
            marginTop: '16px', display: 'flex', alignItems: 'baseline', gap: '14px'
          }}>
              <span style={{
              fontFamily: t.body, fontWeight: 600, fontSize: '0.62rem',
              letterSpacing: '0.2em', textTransform: 'uppercase', color: t.accent
            }}>{it.num}</span>
              <span style={{
              fontFamily: t.heading, fontWeight: 400, fontSize: '1.25rem', color: t.text
            }}>{it.label}</span>
            </div>
          </div>
        )}
      </div>

      {/* Subtle scroll hint */}
      <div style={{
        position: 'absolute', bottom: '24px', right: 'clamp(20px, 5vw, 60px)',
        display: 'flex', alignItems: 'center', gap: '10px',
        fontFamily: t.body, fontSize: '0.6rem',
        letterSpacing: '0.2em', textTransform: 'uppercase',
        color: t.textMuted, opacity: 0.7
      }}>
        <span>Weiter scrollen</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M19 12H5M14 18l-6-6 6-6" transform="rotate(180 12 12)" />
        </svg>
      </div>
    </section>);

}

Object.assign(window, {
  HERO_IMAGES, NAV_LINKS, Navigation, HeroSection, HomeIntro, StatsBar, PullQuote,
  QuickLinks, HomeContactTeaser, FooterSection, ScrollProgress, Filmstrip, ilink
});