const { useState: useStateP } = React;

function GemeindePage() {
  const t = useTheme();
  const mobile = useMobile();
  return (
    <>
      <PageHero
        compact
        eyebrow="Gemeinde"
        title="Kaisten / AG"
        subtitle="Eingebettet ins Wiesengrün am Nordrand des aargauischen Tafeljuras — knapp zwei Kilometer südlich des Rheins."
      />
      <ContentSection style={{ padding: 'clamp(28px, 4vw, 56px) clamp(20px, 5vw, 48px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr)', gap: 'clamp(32px, 4vw, 56px)' }}>
          {/* Village photo first — it's the location identity, slim so the map is still visible */}
          <FadeIn>
            <div style={{
              aspectRatio: mobile ? '16/9' : '21/7', borderRadius: t.radius, overflow: 'hidden',
              backgroundImage: `url(${window.__resources.gemeinde})`,
              backgroundSize: 'cover', backgroundPosition: 'center',
              border: `1px solid ${t.border}`,
            }} />
            <div style={{
              fontFamily: 'ui-monospace, monospace', fontSize: '0.65rem', letterSpacing: '0.12em',
              color: t.textMuted, textTransform: 'uppercase', marginTop: '10px',
            }}>
              Blick auf Kaisten im Fricktal
            </div>
          </FadeIn>

          {/* Intro + map side-by-side so the map is visible immediately */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr' : '1fr 1.1fr',
            gap: 'clamp(28px, 4vw, 56px)',
            alignItems: 'start',
          }}>
            <FadeIn>
              <h2 style={subhdg(t, { marginTop: 0 })}>Kaisten (AG)</h2>
              <p style={para(t)}>
                Das Dorf Kaisten mit den Ortsteilen Kaisten und Ittenthal befindet sich am
                Nordrand des aargauischen Tafeljuras, dort wo die Bäche vom waldigen
                Schinberg, vom Osthang des Frickbergs und von den fruchtbaren Halden des
                Heubergs zusammenfliessen knapp zwei Kilometer südlich des Rheins.
              </p>
              <p style={para(t)}>
                Windgeschützt und sonnig liegt das Dorf in einer Talweitung auf 335 Metern
                über Meer, eingebettet in sattes Wiesengrün und gegen Norden versteckt
                hinter langgezogenen Hügelrücken. Die Gemeinde ist ländlich geprägt und
                sowohl mit öffentlichen Verkehrsmitteln wie auch individuell gut erreichbar.
                Mit rund 2'700 Einwohnern ist Kaisten eine attraktive Wohngemeinde mit
                einer guten Infrastruktur.
              </p>
              <p style={{ ...para(t), marginBottom: 0 }}>
                Mehr Informationen unter:{' '}
                <a href="https://www.kaisten.ch" target="_blank" rel="noopener noreferrer" style={ilink(t)}>www.kaisten.ch</a>
              </p>
            </FadeIn>
            <FadeIn delay={0.05}>
              <div style={{
                aspectRatio: '4/3', borderRadius: t.radius, overflow: 'hidden',
                background: `#fff url(${window.__resources.karte}) center/contain no-repeat`,
                border: `1px solid ${t.border}`,
              }} />
              <div style={{
                fontFamily: 'ui-monospace, monospace', fontSize: '0.65rem', letterSpacing: '0.12em',
                color: t.textMuted, textTransform: 'uppercase', marginTop: '10px', textAlign: 'center',
              }}>
                Lage / Übersichtskarte © swisstopo
              </div>
            </FadeIn>
          </div>

          {/* Infrastruktur + Verkehrsanbindung side-by-side to save vertical space */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
            gap: 'clamp(28px, 4vw, 56px)',
          }}>
            <FadeIn>
              <h2 style={subhdg(t, { marginTop: 0 })}>Infrastruktur</h2>
              <p style={para(t)}>
                Die Gemeinde Kaisten verfügt über Einkaufsmöglichkeiten, Poststelle im
                Volg-Laden und einen Arzt. In Kaisten werden folgende Schulstufen
                angeboten: Kindergarten und Primarschule. Der öffentliche Kindergarten
                wie auch die Primarschule befinden sich in der Wuermatt. Die Real-,
                Sekundar- und Bezirksschule wird in Laufenburg besucht.
              </p>
              <p style={para(t)}>
                Mehr Informationen zu Kindergarten und Primarschule unter:{' '}
                <a href="https://www.schulekaisten.ch" target="_blank" rel="noopener noreferrer" style={ilink(t)}>www.schulekaisten.ch</a>.
              </p>
              <p style={{ ...para(t), marginBottom: 0 }}>
                Zu Real-, Sekundar- und Bezirksschule:{' '}
                <a href="https://www.ksrl.ch" target="_blank" rel="noopener noreferrer" style={ilink(t)}>www.ksrl.ch</a>.
              </p>
            </FadeIn>
            <FadeIn delay={0.1}>
              <h2 style={subhdg(t, { marginTop: 0 })}>Verkehrsanbindung</h2>
              <p style={{ ...para(t), marginBottom: 0 }}>
                Kaisten liegt an der Postautolinie Frick-Laufenburg. Die Bezirkshauptstadt
                Laufenburg ist mit dem Auto in sechs Minuten erreichbar. Über den
                Kaisterberg ist man in 10 Minuten in Frick.
              </p>
            </FadeIn>
          </div>
        </div>
      </ContentSection>
    </>
  );
}

const PROJEKT_SECTIONS = [
  { key: 'projekt', label: 'Konzept', eyebrow: 'Projekt', title: 'Konzept / Architektur' },
  { key: 'projekt-umgebung', label: 'Umgebung', eyebrow: 'Projekt · Umgebung', title: 'Umgebung',
    subtitle: 'Situationsplan mit Wohnhäusern A, B, C, D, Innenhof und Kaisterbach.' },
  { key: 'projekt-untergeschoss', label: 'Untergeschoss', eyebrow: 'Projekt · Untergeschoss',
    title: 'Untergeschoss und Autoeinstellhalle',
    subtitle: '43 Parkplätze, Keller-, Hobby- und Veloräume — alle Wohnungen barrierefrei mit dem Aufzug erreichbar.' },
];

function ProjektSidebar({ active, onNav }) {
  const t = useTheme();
  const mobile = useMobile(900);
  return (
    <div style={{
      position: mobile ? 'static' : 'sticky', top: '110px',
      paddingRight: mobile ? 0 : '8px',
      marginBottom: mobile ? '24px' : 0,
    }}>
      <div style={{
        fontFamily: t.body, fontWeight: 700, fontSize: '0.66rem',
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: t.accent, marginBottom: '12px',
        borderBottom: `1px solid ${t.border}`, paddingBottom: '8px',
      }}>Projekt</div>
      {PROJEKT_SECTIONS.map(it => {
        const isActive = it.key === active;
        return (
          <a key={it.key} href={`#${it.key}`}
            onClick={(e) => { e.preventDefault(); onNav(it.key); }}
            style={{
              display: 'block', textDecoration: 'none',
              fontFamily: t.body, fontSize: '0.95rem',
              color: isActive ? t.accent : t.text,
              fontWeight: isActive ? 700 : 400,
              padding: '6px 0',
              transition: 'color 0.2s',
              cursor: 'pointer',
            }}>{it.label}</a>
        );
      })}
    </div>
  );
}

function ProjektSectionHeader({ eyebrow, title, subtitle, first }) {
  const t = useTheme();
  return (
    <div style={{
      paddingBottom: '20px',
      marginBottom: '28px',
      borderBottom: `1px solid ${t.border}`,
      paddingTop: first ? 0 : '8px',
    }}>
      <div style={lbl(t)}>{eyebrow}</div>
      <h1 style={{
        fontFamily: t.heading, fontWeight: 400,
        fontSize: 'clamp(1.9rem, 3.6vw, 2.8rem)',
        color: t.text, lineHeight: 1.15, marginTop: '8px',
        marginBottom: subtitle ? '10px' : 0,
      }}>{title}</h1>
      {subtitle && (
        <p style={{
          fontFamily: t.heading, fontStyle: 'italic', fontWeight: 300,
          fontSize: 'clamp(1rem, 1.4vw, 1.2rem)',
          color: t.textMuted, lineHeight: 1.4, maxWidth: '680px',
        }}>{subtitle}</p>
      )}
    </div>
  );
}

function KonzeptBody() {
  const t = useTheme();
  return (
    <FadeIn>
      <p style={{ ...para(t), marginTop: 0 }}>
        Die vier grundsätzlich visuell identischen Wohnhäuser sind nach Westen
        orientiert. Die Erdgeschosse der Wohnhäuser verfügen über private
        Gartenflächen. Die Baukörper sind gestaffelt auf der Parzelle angeordnet
        und ergeben eine spannende Innenhofgestaltung. Durch die geringen
        Abmessungen der Wohnhäuser fügen sich diese übergangslos in das Quartier
        ein. Die Fassaden charakterisieren mit raumhohen Fenstern und einer
        vertikalen Metallfassade. Diese Elemente werden mit geschossweiser
        Umrandung gefasst und akzentuiert.
      </p>
      <p style={para(t)}>
        Die Zufahrt zu den Wohnhäusern erfolgt über die Eigenmatt. Die
        Autoeinstellhalle befindet sich im Untergeschoss und verbindet die vier
        Wohnhäuser miteinander. Von der Einstellhalle aus gelangt man bequem und
        rollstuhlgängig mit dem Lift in alle Wohnungen. Jedes der vier Wohnhäuser
        verfügt im Untergeschoss über eigene Keller- und Technikräume. Zudem hat
        es im Untergeschoss zwei grosszügige Veloräume.
      </p>
      <p style={{ ...para(t), marginBottom: 0 }}>
        Die grosszügigen überdeckten Balkone der Geschosswohnungen wurden in die
        Baukörper eingezogen. Die Attikawohnungen verfügen über sehr grossflächige
        attraktive Terrassen, die zum Verweilen einladen.
      </p>
    </FadeIn>
  );
}

function UmgebungBody() {
  const t = useTheme();
  const mobile = useMobile();
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: mobile ? '1fr' : '1fr 1.15fr',
      gap: 'clamp(28px, 4vw, 56px)',
      alignItems: 'start',
    }}>
      <FadeIn>
        <p style={{ ...para(t), marginTop: 0 }}>
          Die Umgebung ist abwechslungsreich und naturnah konzipiert. Grosszügige
          Grünflächen, Spielwiesen sowie ein zentraler Gemeinschaftsplatz schaffen
          attraktive Aufenthalts- und Begegnungsräume für die Bewohner.
          Unterschiedliche Spielangebote wie Spielhügel, Kletterelemente und
          Schaukeln fördern die Nutzung durch Kinder und Familien.
        </p>
        <p style={{ ...para(t), marginBottom: 0 }}>
          Die Bepflanzung besteht aus einheimischen Bäumen, Sträuchern und
          Wildgehölzen, wodurch die Biodiversität unterstützt und ein harmonisches
          Gesamtbild geschaffen wird. Ergänzend dazu sorgen extensiv genutzte
          Wiesenflächen und Pflanzbereiche für eine ökologische Aufwertung. Wege,
          Sitzplätze und Zugänge sind klar strukturiert und funktional angeordnet.
          Der Uferbereich entlang des Kaisterbachs wird mit naturnahen Elementen
          aufgewertet. Vom Gemeinschaftsplatz aus wird der Bachzugang über eine
          Aussentreppe gewährleistet.
        </p>
      </FadeIn>
      <FadeIn delay={0.05}>
        <img src={window.__resources.situation}
          alt="Situationsplan Eigenmatt Kaisten"
          style={{ width: '100%', height: 'auto', display: 'block' }}/>
        <div style={{
          fontFamily: 'ui-monospace, monospace', fontSize: '0.65rem', letterSpacing: '0.12em',
          color: t.textMuted, textTransform: 'uppercase', marginTop: '12px', textAlign: 'center',
        }}>
          Situationsplan · Massstab 1:500
        </div>
      </FadeIn>
    </div>
  );
}

function UntergeschossBody() {
  const t = useTheme();
  return (
    <>
      <FadeIn>
        <img src={window.__resources.untergeschoss}
          alt="Untergeschoss und Autoeinstellhalle — Grundriss"
          style={{ width: '100%', height: 'auto', display: 'block' }}/>
        <div style={{
          fontFamily: 'ui-monospace, monospace', fontSize: '0.65rem', letterSpacing: '0.12em',
          color: t.textMuted, textTransform: 'uppercase', marginTop: '12px', textAlign: 'left',
        }}>
          Untergeschoss · Massstab 1:175 · Alle Angaben und Masse sind ohne Gewähr
        </div>
      </FadeIn>
      <FadeIn delay={0.05}>
        <p style={{ ...para(t), maxWidth: '760px', marginTop: '36px', marginBottom: 0 }}>
          Die Einstellhalle mit 43 Parkplätzen wird über die Einfahrt an der Eigenmatt
          mit einer Rampe erschlossen. Im gleichen Geschoss sind die Keller-, Hobby-
          und Veloräume untergebracht. Vom Parkplatz gelangt man direkt in das
          Treppenhaus der einzelnen Häuser. Die Wohnungen sind bequem und
          rollstuhlgängig mit dem Aufzug erreichbar.
        </p>
      </FadeIn>
    </>
  );
}

const PROJEKT_BODIES = {
  'projekt': KonzeptBody,
  'projekt-umgebung': UmgebungBody,
  'projekt-untergeschoss': UntergeschossBody,
};

function ProjektShell() {
  const t = useTheme();
  const mobile = useMobile(900);
  const initialKey = (() => {
    const h = window.location.hash.replace('#', '');
    return PROJEKT_BODIES[h] ? h : 'projekt';
  })();
  const [active, setActive] = useStateP(initialKey);
  const isScrollingRef = React.useRef(false);

  React.useLayoutEffect(() => {
    if (initialKey === 'projekt') return;
    const el = document.getElementById('section-' + initialKey);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 130;
    window.scrollTo({ top: y, behavior: 'auto' });
  }, []);

  React.useEffect(() => {
    const sections = PROJEKT_SECTIONS
      .map(s => document.getElementById('section-' + s.key))
      .filter(Boolean);
    if (!sections.length) return;
    const update = () => {
      if (isScrollingRef.current) return;
      const vh = window.innerHeight;
      const anchor = vh * 0.35;
      let best = null;
      let bestDist = Infinity;
      sections.forEach(s => {
        const r = s.getBoundingClientRect();
        if (r.bottom < 0 || r.top > vh) return;
        const dist = Math.abs(r.top - anchor);
        if (dist < bestDist) { bestDist = dist; best = s; }
      });
      if (best) {
        const id = best.id.replace('section-', '');
        setActive(prev => prev === id ? prev : id);
        if (window.location.hash !== '#' + id) {
          history.replaceState(null, '', '#' + id);
        }
      }
    };
    update();
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      window.removeEventListener('scroll', update);
      window.removeEventListener('resize', update);
    };
  }, []);

  const navTo = (key, behavior = 'smooth') => {
    const el = document.getElementById('section-' + key);
    if (!el) return;
    isScrollingRef.current = true;
    setActive(key);
    if (window.location.hash !== '#' + key) {
      history.replaceState(null, '', '#' + key);
    }
    const y = el.getBoundingClientRect().top + window.scrollY - 130;
    window.scrollTo({ top: y, behavior });
    setTimeout(() => { isScrollingRef.current = false; }, behavior === 'smooth' ? 800 : 50);
  };

  React.useEffect(() => {
    const onHashChange = () => {
      const h = window.location.hash.replace('#', '');
      if (PROJEKT_BODIES[h] && h !== active) {
        navTo(h, 'smooth');
      }
    };
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, [active]);

  return (
    <>
      <div style={{ paddingTop: 'clamp(110px, 13vh, 150px)' }} aria-hidden="true" />
      <ContentSection style={{ padding: '0 clamp(20px, 5vw, 48px) clamp(60px, 8vw, 100px)' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '180px 1fr',
          gap: 'clamp(24px, 3vw, 48px)',
          alignItems: 'start',
        }}>
          <ProjektSidebar active={active} onNav={navTo} />
          <div style={{ minWidth: 0 }}>
            {PROJEKT_SECTIONS.map((s, i) => {
              const Body = PROJEKT_BODIES[s.key];
              const isLast = i === PROJEKT_SECTIONS.length - 1;
              return (
                <section key={s.key} id={'section-' + s.key} style={{
                  marginBottom: isLast ? 0 : 'clamp(160px, 22vh, 280px)',
                  scrollMarginTop: '130px',
                }}>
                  <ProjektSectionHeader
                    eyebrow={s.eyebrow}
                    title={s.title}
                    subtitle={s.subtitle}
                    first={i === 0}
                  />
                  <Body />
                </section>
              );
            })}
          </div>
        </div>
      </ContentSection>
    </>
  );
}

const ProjektPage = ProjektShell;
const UmgebungPage = ProjektShell;
const UntergeschossPage = ProjektShell;

function WohnungenPage() {
  const t = useTheme();
  const [hoverApt, setHoverApt] = useStateP(null);
  const apts = [
    { id: 'A.0.1', zi: '2,5', g: 'EG', aussen: 'Loggia 18,30 / Garten 45,90', keller: '8,40', nwf: '69,80' },
    { id: 'A.0.2', zi: '4,5', g: 'EG', aussen: 'Loggia 21,10 / Garten 117,90', keller: '7,50', nwf: '111,80' },
    { id: 'A.0.3', zi: '3,5', g: 'EG', aussen: 'Loggia 18,70 / Garten 17,40', keller: '6,50', nwf: '90,80' },
    { id: 'A.1.1', zi: '2,5', g: 'OG', aussen: 'Loggia 14,50', keller: '5,80', nwf: '70,00' },
    { id: 'A.1.2', zi: '4,5', g: 'OG', aussen: 'Loggia 17,00', keller: '7,50', nwf: '111,80' },
    { id: 'A.1.3', zi: '3,5', g: 'OG', aussen: 'Loggia 15,00', keller: '6,50', nwf: '90,80' },
    { id: 'A.2.1', zi: '2,5', g: 'DG', aussen: 'Terrasse 11,40 (überdeckt) / 69,10', keller: '5,80', nwf: '60,40' },
    { id: 'A.2.2', zi: '4,5', g: 'DG', aussen: 'Terrasse 13,10 (überdeckt) / 89,30', keller: '7,70', nwf: '108,50' },
    { id: 'B.0.1', zi: '3,5', g: 'EG', aussen: 'Loggia 23,50 / Garten 69,10', keller: '6,60', nwf: '94,00' },
    { id: 'B.0.2', zi: '3,5', g: 'EG', aussen: 'Loggia 18,80 / Garten 48,50', keller: '6,60', nwf: '89,10' },
    { id: 'B.1.1', zi: '3,5', g: 'OG', aussen: 'Loggia 19,40', keller: '6,50', nwf: '93,60' },
    { id: 'B.1.2', zi: '3,5', g: 'OG', aussen: 'Loggia 15,10', keller: '6,50', nwf: '89,10' },
    { id: 'B.2.1', zi: '4,5', g: 'DG', aussen: 'Terrasse 14,90 (überdeckt) / 112,90', keller: '7,80', nwf: '129,70' },
    { id: 'C.0.1', zi: '3,5', g: 'EG', aussen: 'Loggia 15,80 / Garten 18,70', keller: '6,50', nwf: '85,90' },
    { id: 'C.0.2', zi: '4,5', g: 'EG', aussen: 'Loggia 18,90 / Garten 59,10', keller: '8,20', nwf: '114,20' },
    { id: 'C.0.3', zi: '4,5', g: 'EG', aussen: 'Loggia 1: 18,90 / Loggia 2: 18,20 / Garten 47,50', keller: '7,50', nwf: '103,9' },
    { id: 'C.1.1', zi: '3,5', g: 'OG', aussen: 'Loggia 13,10', keller: '6,60', nwf: '85,90' },
    { id: 'C.1.2', zi: '4,5', g: 'OG', aussen: 'Loggia 15,50', keller: '6,50', nwf: '114,10' },
    { id: 'C.1.3', zi: '4,5', g: 'OG', aussen: 'Loggia 1: 15,40 / Loggia 2: 15,10', keller: '7,50', nwf: '104,2' },
    { id: 'C.2.1', zi: '3,5', g: 'DG', aussen: 'Terrasse 18,70 (überdeckt) / 56,20', keller: '6,50', nwf: '92,70' },
    { id: 'C.2.2', zi: '3,5', g: 'DG', aussen: 'Terrasse 14,20 (überdeckt) / 121,80', keller: '7,60', nwf: '86,50' },
    { id: 'D.0.1', zi: '2,5', g: 'EG', aussen: 'Loggia 14,80 / Garten 35,50', keller: '6,10', nwf: '62,30' },
    { id: 'D.0.2', zi: '2,5', g: 'EG', aussen: 'Loggia 20,60 / Garten 61,80', keller: '6,10', nwf: '69,00' },
    { id: 'D.0.3', zi: '4,5', g: 'EG', aussen: 'Loggia 20,90 / Garten 90,30', keller: '7,60', nwf: '105,20' },
    { id: 'D.1.1', zi: '2,5', g: 'OG', aussen: 'Loggia 11,50', keller: '5,50', nwf: '63,20' },
    { id: 'D.1.2', zi: '2,5', g: 'OG', aussen: 'Loggia 16,70', keller: '5,50', nwf: '69,60' },
    { id: 'D.1.3', zi: '4,5', g: 'OG', aussen: 'Loggia 16,90', keller: '8,00', nwf: '109,00' },
    { id: 'D.2.1', zi: '5,5', g: 'DG', aussen: 'Terrasse 16,70 (überdeckt) / 143,60', keller: '10,10', nwf: '170,60' },
  ];
  const extras = [
    { g: 'UG', art: 'Hobbyraum (Haus A)', fl: '13,60' },
    { g: 'UG', art: 'Hobbyraum (Haus B)', fl: '20,90' },
    { g: 'UG', art: 'Hobbyraum (Haus D)', fl: '17,20' },
    { g: 'UG', art: 'Veloraum (Haus A)', fl: 'für 24 Velos' },
    { g: 'UG', art: 'Veloraum (Haus C)', fl: 'für 21 Velos' },
    { g: 'UG', art: 'Parkplätze (Einstellhalle)', fl: '43 Stk.' },
  ];
  const mobile = useMobile();
  const aptDiagram = (id) => {
    const d = (window.WOHNUNG_DETAILS || []).find(x => x.id === id);
    return d ? d.diagram3d : null;
  };
  const baseDiagram = 'uploads/kaisten/wohnungen/3d/diagram-base.jpg';
  const activeDiagram = hoverApt ? (aptDiagram(hoverApt) || baseDiagram) : baseDiagram;
  const allDiagrams = [baseDiagram, ...Array.from(new Set((window.WOHNUNG_DETAILS || []).map(d => d.diagram3d)))];
  return (
    <>
      {/* Compact PageHero with the 3D diagram on the right. Bg matches the diagram's beige (#F4F4E8). */}
      <section style={{
        paddingTop: 'clamp(96px, 12vh, 124px)', paddingBottom: 'clamp(16px, 2.5vw, 28px)',
        paddingLeft: 'clamp(20px, 5vw, 48px)', paddingRight: 'clamp(20px, 5vw, 48px)',
        background: '#F4F4E8',
      }}>
        <div style={{ maxWidth: '1160px', margin: '0 auto' }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr' : 'minmax(0, 1fr) minmax(0, 1fr)',
            gap: 'clamp(20px, 3vw, 48px)',
            alignItems: 'center',
          }}>
            <FadeIn>
              <div style={{ ...lbl(t), marginBottom: '10px' }}>Wohnungen</div>
              <h1 style={{
                fontFamily: t.heading, fontWeight: 400,
                fontSize: 'clamp(1.8rem, 3.6vw, 2.6rem)',
                color: '#1A1A18', lineHeight: 1.1, marginBottom: '10px',
              }}>28 Eigentumswohnungen</h1>
              <p style={{
                fontFamily: t.heading, fontStyle: 'italic', fontWeight: 300,
                fontSize: 'clamp(0.95rem, 1.3vw, 1.15rem)',
                color: '#84817A', lineHeight: 1.4,
              }}>2,5 bis 5,5 Zimmer — verteilt auf vier visuell identische Wohnhäuser (A, B, C, D).</p>
            </FadeIn>
            <FadeIn delay={0.05}>
              <div style={{
                position: 'relative',
                maxWidth: '420px',
                marginLeft: mobile ? 'auto' : 'auto',
                marginRight: mobile ? 'auto' : 0,
                background: '#F4F4E8',
                overflow: 'hidden',
              }}>
                {/* Invisible spacer to reserve container size based on the base image's aspect */}
                <img src={baseDiagram} aria-hidden="true"
                  style={{ width: '100%', height: 'auto', display: 'block', visibility: 'hidden' }}/>
                {/* All diagrams stacked; opacity-based cross-fade — preloaded, no src-swap flicker.
                    scale(1.025) + overflow:hidden trims any sub-pixel edge artifacts from the JPGs. */}
                {allDiagrams.map(path => (
                  <img key={path} src={path}
                    alt={path === activeDiagram ? (hoverApt ? `Position Wohnung ${hoverApt} im Ensemble` : 'Wohnhäuser A, B, C, D') : ''}
                    style={{
                      position: 'absolute', top: 0, left: 0,
                      width: '100%', height: '100%', display: 'block',
                      opacity: path === activeDiagram ? 1 : 0,
                      transition: 'opacity 0.4s ease',
                      transform: 'scale(1.025)',
                      transformOrigin: 'center',
                      pointerEvents: 'none',
                    }}/>
                ))}
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      <ContentSection style={{ paddingTop: 'clamp(24px, 3vw, 40px)' }}>
        <FadeIn delay={0.1}>
          <h2 style={{ ...subhdg(t, { marginTop: 0 }), marginBottom: '8px' }}>Wohnungsübersicht</h2>
          <p style={{ ...bdy(t), marginBottom: '20px' }}>
            Fahren Sie mit der Maus über eine Zeile, um die Wohnung im Ensemble hervorzuheben — oder klicken Sie auf eine Wohnungsnummer für Grundriss und Beschrieb.
          </p>
          <div style={{ overflowX: 'auto', borderRadius: t.radius, border: `1px solid ${t.border}` }}>
            <table style={{
              width: '100%', borderCollapse: 'collapse',
              fontFamily: t.body, fontSize: mobile ? '0.78rem' : '0.86rem',
              background: t.cardBg, minWidth: '760px',
            }}>
              <thead>
                <tr style={{ background: `${t.accent}18`, color: t.text }}>
                  <th style={thStyle(t)}>Whg.</th>
                  <th style={thStyle(t)}>Zi.</th>
                  <th style={thStyle(t)}>Gesch.</th>
                  <th style={thStyle(t)}>Aussen m²</th>
                  <th style={thStyle(t)}>Keller m²</th>
                  <th style={thStyle(t)}>NWF m²</th>
                  <th style={thStyle(t)}>Status</th>
                </tr>
              </thead>
              <tbody>
                {apts.map((a, i) => (
                  <tr key={a.id}
                    onMouseEnter={() => setHoverApt(a.id)}
                    onMouseLeave={() => setHoverApt(null)}
                    onClick={() => { window.location.hash = `wohnung-${aptDetailKey(a.id)}`; }}
                    style={{
                      borderTop: `1px solid ${t.border}`,
                      background: hoverApt === a.id ? `${t.accent}22` : (i % 2 === 0 ? 'transparent' : `${t.bgAlt}60`),
                      cursor: 'pointer',
                      transition: 'background 0.15s',
                    }}>
                    <td style={tdStyle(t, { fontWeight: 600 })}>
                      <a href={`#wohnung-${aptDetailKey(a.id)}`}
                        onClick={(e) => e.stopPropagation()}
                        style={{ color: t.accent, textDecoration: 'none', borderBottom: `1px solid ${t.accent}40` }}>{a.id}</a>
                    </td>
                    <td style={tdStyle(t)}>{a.zi}</td>
                    <td style={tdStyle(t)}>{a.g}</td>
                    <td style={tdStyle(t)}>{a.aussen}</td>
                    <td style={tdStyle(t)}>{a.keller}</td>
                    <td style={tdStyle(t)}>{a.nwf}</td>
                    <td style={tdStyle(t)}>
                      <span title="Verfügbar" style={{
                        display: 'inline-block', width: '10px', height: '10px',
                        borderRadius: '50%', background: '#6BAE5A',
                      }} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div style={{ display: 'flex', gap: '16px', marginTop: '12px', fontFamily: t.body, fontSize: '0.78rem', color: t.textMuted, alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
              <span style={{ width: '10px', height: '10px', borderRadius: '50%', background: '#6BAE5A' }} /> verfügbar
            </span>
            <span>NWF = Nettowohnfläche · Gesch.: EG = Erdgeschoss, OG = Obergeschoss, DG = Attikageschoss</span>
          </div>
        </FadeIn>

        <FadeIn delay={0.2}>
          <h2 style={subhdg(t)}>Zusätzliche Räume / Parkierung</h2>
          <div style={{ overflowX: 'auto', borderRadius: t.radius, border: `1px solid ${t.border}` }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: t.body, fontSize: mobile ? '0.78rem' : '0.88rem', background: t.cardBg, minWidth: '480px' }}>
              <thead>
                <tr style={{ background: `${t.accent}18`, color: t.text }}>
                  <th style={thStyle(t)}>Gesch.</th>
                  <th style={thStyle(t)}>Art</th>
                  <th style={thStyle(t)}>Fläche / Anzahl</th>
                </tr>
              </thead>
              <tbody>
                {extras.map((e, i) => (
                  <tr key={i} style={{ borderTop: `1px solid ${t.border}`, background: i % 2 === 0 ? 'transparent' : `${t.bgAlt}60` }}>
                    <td style={tdStyle(t)}>{e.g}</td>
                    <td style={tdStyle(t)}>{e.art}</td>
                    <td style={tdStyle(t)}>{e.fl}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p style={{ fontFamily: t.body, fontSize: '0.78rem', color: t.textMuted, marginTop: '14px', lineHeight: 1.7 }}>
            Alle Wohnungen sind über den Aufzug barrierefrei aus der Autoeinstellhalle
            erreichbar. Detaillierte Grundrisse je Wohnung sind in der Verkaufsbroschüre
            ersichtlich.
          </p>
        </FadeIn>
      </ContentSection>
    </>
  );
}

function thStyle(t) {
  return {
    fontFamily: t.body, fontWeight: 600, fontSize: '0.7rem',
    letterSpacing: '0.1em', textTransform: 'uppercase',
    color: t.text, padding: '14px 16px', textAlign: 'left',
  };
}
function tdStyle(t, extra = {}) {
  return { padding: '14px 16px', color: t.text, ...extra };
}

function aptDetailKey(id) {
  return id.toLowerCase().split('.').join('-');
}

function BaubeschriebPage() {
  const t = useTheme();
  return (
    <>
      <PageHero
        eyebrow="Baubeschrieb"
        title="Gehobener, moderner Standard"
        subtitle="Im Zentrum steht der Wohnkomfort der Bewohner — hochwertig, energieeffizient und durchdacht."
      />
      <ContentSection narrow>
        <FadeIn>
          <p style={para(t)}>
            Die Überbauung wird in gehobenem und modernen Standard erstellt. Im Zentrum
            steht der Wohnkomfort von Gebäudenutzern. Ermöglicht wird dies durch eine
            hochwertige, gut isolierte Gebäudehülle und eine systematische Lufterneuerung
            durch Komfortlüftung.
          </p>
          <p style={para(t)}>
            Als Standard wird in jeder Wohnung die <strong>Joulia Duschrinne</strong> mit
            integrierter Wärmerückgewinnung eingebaut. Die Warmwasseraufbereitung benötigt
            viel Energie. Anstatt das warme Wasser in die Kanalisation abzulassen, wird
            das frische Kaltwasser vorgewärmt. Dies spart Kosten und schont die Umwelt.
            Weitere Informationen unter:{' '}
            <a href="https://www.joulia.com" target="_blank" rel="noopener noreferrer" style={ilink(t)}>www.joulia.com</a>
          </p>
        </FadeIn>

        <SpecBlock title="Haustechnik" defs={[
          { sub: 'Elektro', text: 'Diverse Schalter und Steckdosen, je 2 TV- / Telefonanschlüsse pro Wohnung, Leerrohre für TV / Telefon in allen Zimmern, Multimediavorbereitung.' },
          { sub: 'Einbauleuchten', text: 'Einbauleuchten im Bereich Küche, Eingang, Korridor und Nassräume.' },
          { sub: 'Heizung und Warmwasser', text: 'Grundwasser-Wärmepumpe mit Freecooling. Warmwasser zentral pro Haus. Wärmeverteilung durch Bodenheizung mit Raumthermostaten.' },
          { sub: 'Lüftung', text: 'Dezentrale, kontrollierte Komfortlüftung pro Wohnung für alle beheizten Räume.' },
        ]}/>

        <SpecBlock title="Aussenhülle" defs={[
          { sub: 'Massivbau', text: 'Die Gebäude werden in Massivbauweise (Beton / Mauerwerk) mit einer gedämmten, vertikalen Metallfassade erstellt.' },
          { sub: 'Flachdächer', text: 'Alle Flachdachabdichtungen werden in Bitumen ausgeführt. Loggia- / Terrassenbeläge mit Betonplatten. Die Dachflächen sind extensiv begrünt oder bekiest.' },
          { sub: 'Fenster', text: 'Die Holzmetallfenster sind aussen in Metall, gemäss Farbkonzept Architekt und innen Holz weiss gestrichen. Wohnbereich mit einer Hebeschiebetür zu Loggia / Terrasse. Elektrische Rafflamellenstoren in allen beheizten Räumen.' },
        ]}/>

        <FadeIn delay={0.1}>
          <div style={{
            marginTop: '48px', padding: '20px 24px',
            background: t.bgAlt, borderLeft: `3px solid ${t.accent}`, borderRadius: t.radius,
          }}>
            <p style={{ fontFamily: t.body, fontSize: '0.82rem', color: t.textMuted, lineHeight: 1.7, margin: 0 }}>
              Stand April 2026<br/>
              Alle Angaben und Masse sind ohne Gewähr. Irrtum und Änderungen vorbehalten.<br/>
              Die Käuferdokumentation geht dieser Broschüre vor.
            </p>
          </div>
        </FadeIn>
      </ContentSection>
    </>
  );
}

function SpecBlock({ title, defs }) {
  const t = useTheme();
  const mobile = useMobile();
  return (
    <FadeIn delay={0.08}>
      <h2 style={subhdg(t)}>{title}</h2>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {defs.map((d, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: mobile ? '1fr' : '200px 1fr',
            gap: mobile ? '4px' : '32px',
            padding: '18px 0', borderBottom: `1px solid ${t.border}`,
          }}>
            <div style={{ fontFamily: t.body, fontWeight: 600, fontSize: '0.86rem', color: t.text }}>{d.sub}</div>
            <div style={{ fontFamily: t.body, fontWeight: 300, fontSize: '0.92rem', color: t.textMuted, lineHeight: 1.75 }}>{d.text}</div>
          </div>
        ))}
      </div>
    </FadeIn>
  );
}

function InnenausbauPage() {
  const t = useTheme();
  return (
    <>
      <PageHero
        eyebrow="Innenausbau"
        title="Hochwertige Materialisierung"
        subtitle="Hochwertige Materialien und durchdachte Grundrisse für höchsten Wohnkomfort."
      />
      <ContentSection narrow>
        <SpecBlock title="Küche" defs={[
          { sub: 'Ausstattung', text: 'Einbauküche mit Induktions-Kochfeld, Backofen, Umluft-Dampfabzug, Kühlschrank, Geschirrspüler, Steamer, Steinabdeckung, Rückwand in Glas, Unter- und Oberschränke in Holzwerkstoff, Fronten Kunstharz beschichtet. (Brutto-Ausstellungspreise inkl. MwSt.)' },
          { sub: 'Budget A.0.1 / A.1.1 / A.0.3 / A.1.3 / D.0.2 / D.1.2', text: 'Fr. 25\'000.–' },
          { sub: 'Budget A.2.1 / B.0.1 / B.1.1 / B.2.1', text: 'Fr. 26\'000.–' },
          { sub: 'Budget C.0.1 / C.1.1 / C.2.1 / C.2.2 / D.0.1 / D.1.1', text: 'Fr. 26\'000.–' },
          { sub: 'Budget C.0.3 / C.1.3 / D.0.3 / D.1.3', text: 'Fr. 27\'000.–' },
          { sub: 'Budget A.0.2 / A.1.2 / B.0.2 / B.1.2 / C.0.2 / C.1.2', text: 'Fr. 28\'000.–' },
          { sub: 'Budget A.2.2', text: 'Fr. 30\'000.–' },
          { sub: 'Budget D.2.1', text: 'Fr. 31\'000.–' },
          { sub: 'WM / TU', text: 'Sämtliche Wohnungen verfügen über Waschmaschine und Tumbler' },
        ]}/>

        <SpecBlock title="Sanitär" defs={[
          { sub: 'A.0.1 / A.1.1 / A.2.1 / D.0.1 / D.0.2 / D.1.1 / D.1.2', text: 'Dusche: Bodenebene geflieste Dusche mit Joulia-Rinne und Glas-Duschtrennwand, Lavabo, Spiegelschrank, Wandklosett. Budget Fr. 6\'600.– bis Fr. 8\'000.–' },
          { sub: 'C.2.1', text: 'Bad: Badewanne, Lavabo, Spiegelschrank, Wandklosett. Dusche: Bodenebene geflieste Dusche mit Joulia-Rinne und Glas-Duschtrennwand, Lavabo, Spiegelschrank, Wandklosett. Budget Fr. 9\'800.–' },
          { sub: 'A.0.3 / A.1.3 / B.2.1 / C.0.1 / C.0.2 / C.1.1 / C.1.2 / D.0.3 / D.1.3 / D.2.1', text: 'Bad: Badewanne, Lavabo, Spiegelschrank, Wandklosett. Dusche: Bodenebene geflieste Dusche mit Joulia-Rinne und Glas-Duschtrennwand, Lavabo, Spiegelschrank, Wandklosett. Budget Fr. 11\'400.– bis Fr. 12\'000.–' },
          { sub: 'C.2.2', text: 'Bad/Dusche: Badewanne, Lavabo, Spiegelschrank, Wandklosett, bodenebene geflieste Dusche mit Joulia-Rinne und Glas-Duschtrennwand. WC: Lavabo, Spiegelschrank, Wandklosett. Budget Fr. 11\'900.–' },
          { sub: 'A.0.2 / A.1.2 / A.2.2 / B.0.1 / B.0.2 / B.1.1 / B.1.2 / C.0.3 / C.1.3', text: 'Bad: Badewanne, Lavabo, Spiegelschrank, Wandklosett. Dusche: Bodenebene geflieste Dusche mit Joulia-Rinne und Glas-Duschtrennwand, Lavabo, Spiegelschrank, Wandklosett. Budget Fr. 13\'000.– bis Fr. 13\'700.–' },
        ]}/>

        <SpecBlock title="Ausbau" defs={[
          { sub: 'Aufzug', text: 'Elektrischer Personenlift, rollstuhlgängig.' },
          { sub: 'Gipserarbeiten – Wände', text: 'Abrieb mineralisch 1,5 mm positiv, weiss.' },
          { sub: 'Gipserarbeiten – Decken', text: 'Weissputz.' },
          { sub: 'Metallbau', text: 'Geländer in Metall einbrennlackiert nach Farbkonzept Architekt auf Loggias / Terrassen und im Treppenhaus.' },
          { sub: 'Innentüren', text: 'Stahlzargentüren.' },
          { sub: 'Schreinerarbeiten', text: 'Einbaugarderobe gemäss Plan.' },
        ]}/>

        <SpecBlock title="Plattenarbeiten" defs={[
          { sub: 'Bodenbeläge', text: 'Feinsteinzeugplatten 60 cm × 60 cm in allen beheizten Räumen (ganze Wohnung inkl. Abstellräume). Budget Fr. 100.– / m² inkl. MwSt. verlegt inkl. Sockel. Optional Parkett oder andere Bodenbeläge.' },
          { sub: 'Wandbeläge', text: 'Bad, Dusche mit Steingutplatten 40 cm × 25 cm bis h = 2,14 m (OK Stahlzarge) 4-seitig. Budget Fr. 90.– / m² inkl. MwSt. verlegt.' },
        ]}/>

        <FadeIn delay={0.1}>
          <div style={{
            marginTop: '48px', padding: '20px 24px',
            background: t.bgAlt, borderLeft: `3px solid ${t.accent}`, borderRadius: t.radius,
          }}>
            <p style={{ fontFamily: t.body, fontSize: '0.82rem', color: t.textMuted, lineHeight: 1.7, margin: 0 }}>
              Stand April 2026<br/>
              Alle Angaben und Masse sind ohne Gewähr. Irrtum und Änderungen vorbehalten.<br/>
              Die Käuferdokumentation geht dieser Broschüre vor.
            </p>
          </div>
        </FadeIn>
      </ContentSection>
    </>
  );
}

function ProjektablaufPage() {
  const t = useTheme();
  const mobile = useMobile();
  const payments = [
    { label: 'Reservation', val: 'Fr. 20\'000.-', desc: 'bei Unterzeichnung einer Reservationsvereinbarung bzw. Anmeldung zum Kaufvertrag.' },
    { label: 'Anzahlung', val: '10 %', desc: 'des Kaufpreises bei Unterzeichnung Kaufvertrag.' },
    { label: 'Rohbau', val: '35 %', desc: 'des Kaufpreises bei Fertigstellung Rohbau.' },
    { label: 'Unterlagsböden', val: '35 %', desc: 'des Kaufpreises beim Einbringen der Unterlagsböden.' },
    { label: 'Bezug', val: 'Rest', desc: 'bei Bezugsbereitschaft; Mehr- / Minderkosten aufgrund Käuferwünsche möglich.' },
  ];
  const dates = [
    { phase: 'Baustart', when: 'Sommer 2026' },
    { phase: 'Bezug', when: 'Sommer 2028' },
  ];
  return (
    <>
      <PageHero
        eyebrow="Projektablauf"
        title="Zahlungen, Finanzierung & Termine"
        subtitle="Transparent geplant — von der Reservation bis zum Bezug."
      />
      <ContentSection narrow>
        <FadeIn>
          <h2 style={{ ...subhdg(t, { marginTop: 0 }) }}>Zahlungsmodalitäten</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: '12px' }}>
            {payments.map((p, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: mobile ? '1fr' : '180px 120px 1fr',
                gap: mobile ? '4px' : '24px',
                padding: '20px 0', borderBottom: `1px solid ${t.border}`,
                borderTop: i === 0 ? `1px solid ${t.border}` : 'none',
              }}>
                <div style={{ fontFamily: t.body, fontWeight: 600, fontSize: '0.78rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: t.textMuted }}>{p.label}</div>
                <div style={{ fontFamily: t.heading, fontWeight: 500, fontSize: '1.4rem', color: t.accent }}>{p.val}</div>
                <div style={{ fontFamily: t.body, fontWeight: 300, fontSize: '0.92rem', color: t.text, lineHeight: 1.7 }}>{p.desc}</div>
              </div>
            ))}
          </div>
        </FadeIn>

        <FadeIn delay={0.15}>
          <h2 style={subhdg(t)}>Termine</h2>
          <div style={{
            display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
            gap: '20px', marginTop: '12px',
          }}>
            {dates.map((d, i) => (
              <div key={i} style={{
                padding: '28px 28px', background: t.bgAlt, borderRadius: t.radius,
                border: `1px solid ${t.border}`,
              }}>
                <div style={{ fontFamily: t.body, fontWeight: 600, fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: t.accent, marginBottom: '8px' }}>{d.phase}</div>
                <div style={{ fontFamily: t.heading, fontWeight: 400, fontSize: '1.6rem', color: t.text }}>{d.when}</div>
              </div>
            ))}
          </div>
        </FadeIn>

        <FadeIn delay={0.25}>
          <h2 style={subhdg(t)}>Finanzierung</h2>
          <p style={para(t)}>
            Für die Finanzierung können wir die nachfolgende Bank empfehlen, die das
            Projekt geprüft hat. Der aufgeführte Sachbearbeiter steht gerne für eine
            Beratung oder eine Offerte zur Verfügung.
          </p>
          <div style={{
            padding: '28px 30px', marginTop: '12px',
            background: t.cardBg, borderRadius: t.radius, border: `1px solid ${t.border}`,
            boxShadow: t.shadow,
          }}>
            <div style={lbl(t)}>Bankpartner</div>
            <h3 style={{ fontFamily: t.heading, fontWeight: 500, fontSize: '1.4rem', color: t.text, marginBottom: '4px' }}>Aargauische Kantonalbank</h3>
            <div style={{ fontFamily: t.body, fontSize: '0.92rem', color: t.text, marginBottom: '10px' }}>Okan Kocabas</div>
            <div style={{ fontFamily: t.body, fontSize: '0.88rem', color: t.textMuted, lineHeight: 1.75, marginBottom: '6px' }}>Widenplatz 12, CH-5070 Frick</div>
            <div style={{ fontFamily: t.body, fontSize: '0.88rem', color: t.text, marginBottom: '4px' }}>062 871 68 46</div>
            <a href="mailto:okan.kocabas@akb.ch" style={{ ...ilink(t), fontSize: '0.88rem', display: 'inline-block', marginBottom: '4px' }}>okan.kocabas@akb.ch</a>
            <div><a href="https://www.akb.ch" target="_blank" rel="noopener noreferrer" style={{ ...ilink(t), fontSize: '0.88rem' }}>www.akb.ch</a></div>
          </div>
        </FadeIn>
      </ContentSection>
    </>
  );
}

function KontaktPage() {
  const t = useTheme();
  const mobile = useMobile();
  const [form, setForm] = useStateP({ name: '', strasse: '', plz: '', tel: '', email: '', msg: '', post: false, pdf: false });
  const [sent, setSent] = useStateP(false);
  const inp = {
    fontFamily: t.body, fontSize: '0.9rem', padding: '12px 14px',
    background: t.isDark ? t.bgAlt : '#fff',
    border: `1px solid ${t.border}`, borderRadius: t.radius,
    color: t.text, width: '100%', outline: 'none', transition: 'border-color 0.3s',
  };
  const focus = (e) => e.target.style.borderColor = t.accent;
  const blur = (e) => e.target.style.borderColor = t.border;
  return (
    <>
      <PageHero
        eyebrow="Kontakt"
        title="Sprechen wir miteinander."
        subtitle="Verkauf, Bauherrschaft und Architektur — die Menschen hinter dem Projekt."
      />
      <ContentSection>
        <div style={{
          display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
          gap: 'clamp(40px, 6vw, 80px)',
        }}>
          {/* Left: contact cards */}
          <div>
            <FadeIn>
              <ContactCard
                role="Verkauf"
                name="RE/MAX Immobilien Frick"
                person="Donald Rebmann"
                addr="Hauptstrasse 43, CH-5070 Frick"
                phone="062 871 99 19"
                email="donald.rebmann@remax.ch"
                web="www.remax.ch/frick"
              />
            </FadeIn>
            <FadeIn delay={0.1}>
              <ContactCard
                role="Bauherrschaft / Generalunternehmer"
                name="JKB Immobilien AG"
                addr="Dammstrasse 3, CH–5070 Frick"
                phone="062 865 33 99"
                email="info@jkbag.ch"
                web="www.jkbag.ch"
                desc="Die JKB Immobilien AG wurde von Daniel John, Bruno Kuster und Roland Brack gegründet. Dabei stand eine gemeinsame Leidenschaft im Zentrum: «Modernes Wohnen». Die Architektur lebt von Ideen. In den Wohnungen leben Menschen, nicht Architekten. Deshalb zeigt die Erfahrung, dass der richtige Mix verschiedener Persönlichkeiten in der Planungsphase zu besonders attraktiven Konzepten führt."
              />
            </FadeIn>
            <FadeIn delay={0.2}>
              <ContactCard
                role="Architektur + Projektleitung"
                name="Bäumlin+John AG"
                person="Architekten ETH/SIA"
                addr="Dammstrasse 3, CH–5070 Frick"
                phone="062 865 33 33"
                email="mail@bjf.ch"
                web="www.bjf.ch"
                desc="Die Bäumlin+John AG wurde im Jahre 1961 durch Viktor Bäumlin in Kaisten gegründet. 1998 nach erfolgreichen 37 Jahren wurde das Büro Viktor Bäumlin in eine Aktiengesellschaft umgewandelt. Mit Daniel John aus Frick wurde der ideale Partner gefunden. Seit über 25 Jahren ist das Büro Bäumlin+John AG nun mit Sitz an der Dammstrasse in Frick. Im Verlaufe der letzten Jahre ist das Team auf 30 Mitarbeitende angewachsen. Ob Einfamilienhäuser, kleinere Umbauten, Überbauungen für Miet- und Eigentumswohnungen oder grosse Industriehallen, die Devise bleibt stets gleich: Bei allen Aufträgen verfolgen wir immer bis ins Detail das optimale Zusammenspiel von städtebaulicher Präzision, architektonischer Ästhetik, optimaler Funktionalität und nachhaltiger Wirtschaftlichkeit. Die Bäumlin+John AG garantiert eine fachmännische Beratung in allen Baufragen."
              />
            </FadeIn>
          </div>

          {/* Right: brochure form */}
          <FadeIn delay={0.15}>
            <div style={{
              background: t.bgAlt, padding: 'clamp(28px, 4vw, 44px)',
              borderRadius: t.radius, border: `1px solid ${t.border}`,
              position: mobile ? 'static' : 'sticky', top: '110px',
            }}>
              <div style={lbl(t)}>Broschüre bestellen</div>
              <h3 style={{ fontFamily: t.heading, fontWeight: 400, fontSize: '1.6rem', color: t.text, marginBottom: '24px' }}>Ihre Anfrage</h3>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '40px 20px' }}>
                  <div style={{ fontFamily: t.heading, fontSize: '1.8rem', color: t.accent, marginBottom: '10px' }}>Vielen Dank</div>
                  <p style={bdy(t)}>Wir melden uns in Kürze bei Ihnen.</p>
                </div>
              ) : (
                <form onSubmit={e => { e.preventDefault(); setSent(true); }}
                  style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '6px' }}>
                    <label style={chkLabel(t)}>
                      <input type="checkbox" checked={form.post} onChange={e => setForm({ ...form, post: e.target.checked })} style={chkInput(t)} />
                      Ich möchte die Broschüre per Post erhalten.
                    </label>
                    <label style={chkLabel(t)}>
                      <input type="checkbox" checked={form.pdf} onChange={e => setForm({ ...form, pdf: e.target.checked })} style={chkInput(t)} />
                      Ich möchte die Broschüre als PDF via E-Mail erhalten.
                    </label>
                  </div>
                  <Field label="Name" t={t}><input required value={form.name} onChange={e => setForm({...form, name: e.target.value})} style={inp} onFocus={focus} onBlur={blur} /></Field>
                  <Field label="Strasse" t={t}><input value={form.strasse} onChange={e => setForm({...form, strasse: e.target.value})} style={inp} onFocus={focus} onBlur={blur} /></Field>
                  <Field label="PLZ / Ort" t={t}><input value={form.plz} onChange={e => setForm({...form, plz: e.target.value})} style={inp} onFocus={focus} onBlur={blur} /></Field>
                  <Field label="Telefon" t={t}><input value={form.tel} onChange={e => setForm({...form, tel: e.target.value})} style={inp} onFocus={focus} onBlur={blur} /></Field>
                  <Field label="E-Mail" t={t}><input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} style={inp} onFocus={focus} onBlur={blur} /></Field>
                  <Field label="Mitteilung" t={t}><textarea rows="4" value={form.msg} onChange={e => setForm({...form, msg: e.target.value})} style={{...inp, resize: 'vertical', minHeight: '100px'}} onFocus={focus} onBlur={blur} /></Field>
                  <Btn variant="primary" style={{ alignSelf: 'flex-start', marginTop: '6px' }}>Anfrage senden</Btn>
                </form>
              )}
            </div>
          </FadeIn>
        </div>
      </ContentSection>
    </>
  );
}

function Field({ label, t, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
      <span style={{ fontFamily: t.body, fontWeight: 500, fontSize: '0.72rem', letterSpacing: '0.08em', color: t.textMuted }}>{label}</span>
      {children}
    </label>
  );
}

function ContactCard({ role, name, person, addr, phone, email, web, desc }) {
  const t = useTheme();
  return (
    <div style={{
      padding: '28px 30px', marginBottom: '20px',
      background: t.cardBg, borderRadius: t.radius, border: `1px solid ${t.border}`,
      boxShadow: t.shadow,
    }}>
      <div style={lbl(t)}>{role}</div>
      <h3 style={{ fontFamily: t.heading, fontWeight: 500, fontSize: '1.4rem', color: t.text, marginBottom: '4px' }}>{name}</h3>
      {person && <div style={{ fontFamily: t.body, fontSize: '0.92rem', color: t.text, marginBottom: '10px' }}>{person}</div>}
      <div style={{ fontFamily: t.body, fontSize: '0.88rem', color: t.textMuted, lineHeight: 1.75, marginBottom: '6px' }}>{addr}</div>
      {phone && <div style={{ fontFamily: t.body, fontSize: '0.88rem', color: t.text, marginBottom: '4px' }}>{phone}</div>}
      {email && <a href={`mailto:${email}`} style={{ ...ilink(t), fontSize: '0.88rem', display: 'inline-block', marginBottom: '4px' }}>{email}</a>}
      {web && <div><a href={`https://${web}`} target="_blank" rel="noopener noreferrer" style={{ ...ilink(t), fontSize: '0.88rem' }}>{web}</a></div>}
      {desc && <p style={{ fontFamily: t.body, fontWeight: 300, fontSize: '0.86rem', color: t.textMuted, lineHeight: 1.75, marginTop: '14px' }}>{desc}</p>}
    </div>
  );
}

function chkLabel(t) {
  return {
    display: 'flex', alignItems: 'center', gap: '10px',
    fontFamily: t.body, fontSize: '0.86rem', color: t.text, cursor: 'pointer',
  };
}
function chkInput(t) {
  return { width: '16px', height: '16px', accentColor: t.accent };
}

function ReferenzenPage() {
  const t = useTheme();
  const mobile = useMobile();
  const refs = [
    { img: window.__resources.ref1, title: 'AAAtrium Rombach', desc: '12 Eigentumswohnungen' },
    { img: window.__resources.ref2, title: 'Hammerstätte Gipf-Oberfrick', desc: 'fünf Einfamilienhäuser' },
    { img: window.__resources.ref3, title: 'Ziegelhütten Wittnau', desc: '21 Miet- und Eigentumswohnungen' },
    { img: window.__resources.ref4, title: 'Oase Frick', desc: '13 Eigentumswohnungen' },
    { img: window.__resources.ref5, title: 'Triangolo Kaisten', desc: '21 Eigentumswohnungen' },
    { img: window.__resources.ref6, title: 'Rotondo Gipf-Oberfrick', desc: '15 Eigentumswohnungen' },
    { img: window.__resources.ref7, title: 'Rössliacker Brugg', desc: '15 Eigentumswohnungen' },
    { img: window.__resources.ref8, title: 'Wohnpark Tilia Staufen', desc: '77 Miet- und Eigentumswohnungen, 10 Gewerberäume' },
  ];
  return (
    <>
      <PageHero
        eyebrow="Referenzen"
        title="Projekte der JKB Immobilien AG"
        subtitle="Ein Auszug aktueller und realisierter Bauprojekte."
      />
      <ContentSection>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)',
          gap: 'clamp(18px, 2vw, 28px)',
          marginBottom: 'clamp(48px, 6vw, 72px)',
        }}>
          {refs.map((r, i) => (
            <FadeIn key={i} delay={(i % 4) * 0.08}>
              <div style={{
                background: t.cardBg, borderRadius: t.radius,
                border: `1px solid ${t.border}`, overflow: 'hidden',
                boxShadow: t.shadow,
              }}>
                <div style={{
                  aspectRatio: '4/3',
                  backgroundImage: `url(${r.img})`,
                  backgroundSize: 'cover', backgroundPosition: 'center',
                }} />
                <div style={{ padding: '20px 22px' }}>
                  <h3 style={{ fontFamily: t.heading, fontWeight: 500, fontSize: '1.2rem', color: t.text, marginBottom: '4px' }}>{r.title}</h3>
                  <p style={{ fontFamily: t.body, fontSize: '0.86rem', color: t.textMuted, lineHeight: 1.55, margin: 0 }}>{r.desc}</p>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: '24px' }}>
          <FadeIn>
            <RefCard
              label="Aktuelle Projekte"
              text="Einen Überblick der aktuellen Projekte der JKB Immobilien AG finden Sie unter"
              link="https://www.jkbag.ch/#projekte"
              linkText="jkbag.ch/#projekte"
            />
          </FadeIn>
          <FadeIn delay={0.1}>
            <RefCard
              label="Abgeschlossene Projekte"
              text="Einen Überblick abgeschlossener Projekte finden Sie unter"
              link="https://www.jkbag.ch/archiv"
              linkText="jkbag.ch/archiv"
            />
          </FadeIn>
        </div>
      </ContentSection>
    </>
  );
}

function RefCard({ label, text, link, linkText }) {
  const t = useTheme();
  const [hov, setHov] = useStateP(false);
  return (
    <a href={link} target="_blank" rel="noopener noreferrer"
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        display: 'block', textDecoration: 'none',
        padding: 'clamp(32px, 4vw, 48px)', background: t.cardBg,
        borderRadius: t.radius, border: `1px solid ${hov ? t.accent : t.border}`,
        boxShadow: hov ? t.shadowLg : t.shadow,
        transform: hov ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      }}>
      <div style={lbl(t)}>{label}</div>
      <p style={{ ...para(t), marginBottom: '14px' }}>{text}</p>
      <div style={{ fontFamily: t.body, fontWeight: 600, fontSize: '0.86rem', color: t.accent }}>{linkText} →</div>
    </a>
  );
}

Object.assign(window, {
  GemeindePage, ProjektPage, UmgebungPage, UntergeschossPage, WohnungenPage, BaubeschriebPage,
  InnenausbauPage, ProjektablaufPage, KontaktPage, ReferenzenPage,
});