/* Pages.jsx — PageHero + sub-pages: Dienstleistungen, Unternehmen, Umbauten, Kontakt, Offerte */

function PageHero({ eyebrow, title, lead, img, scrollY = 0 }) {
  return (
    <section style={{ position: 'relative', minHeight: 460, display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: '-6% 0', transform: `translateY(${scrollY * 0.25}px)` }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${img})`, backgroundSize: 'cover', backgroundPosition: 'center', animation: 'kgKenBurns 9s ease-out forwards' }} />
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(120deg, rgba(14,58,102,0.92) 0%, rgba(18,75,130,0.62) 60%, rgba(28,107,181,0.2) 100%)' }} />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '0 28px 72px', width: '100%' }}>
        <div style={{ maxWidth: 720 }}>
          <Reveal y={18}><span className="kg-eyebrow" style={{ color: 'rgba(255,255,255,0.9)' }}>{eyebrow}</span></Reveal>
          <Reveal y={24} delay={80}><h1 className="kg-display" style={{ color: '#fff', margin: '16px 0 0', fontSize: 'clamp(36px, 5.6vw, 68px)' }}>{title}</h1></Reveal>
          {lead && <Reveal y={20} delay={180}><p style={{ color: 'rgba(255,255,255,0.9)', fontSize: 20, lineHeight: 1.6, margin: '18px 0 0', maxWidth: 580 }}>{lead}</p></Reveal>}
        </div>
      </div>
    </section>
  );
}

function BulletGrid({ items, cols = 2 }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: '10px 28px' }} className="kg-bullets">
      {items.map((it, i) => (
        <Reveal key={it} delay={(i % cols) * 70}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '9px 0' }}>
            <Icon name="check" size={18} color="var(--kg-blue)" strokeWidth={2.6} style={{ marginTop: 4, flexShrink: 0 }} />
            <span className="kg-p" style={{ margin: 0, fontSize: 16 }}>{it}</span>
          </div>
        </Reveal>
      ))}
    </div>
  );
}

function ServiceDetail({ id, eyebrow, title, lead, paras, bullets, img, flip }) {
  return (
    <Section bg={flip ? 'var(--kg-paper)' : 'var(--kg-white)'} id={id}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', direction: flip ? 'rtl' : 'ltr' }} className="kg-split">
        <div style={{ direction: 'ltr' }}>
          <Reveal style={{ position: 'relative', borderRadius: 'var(--kg-radius-lg)', overflow: 'hidden', boxShadow: 'var(--kg-shadow-lg)', aspectRatio: '4/3.3' }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${img})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
          </Reveal>
        </div>
        <div style={{ direction: 'ltr' }}>
          <Reveal><SectionTitle eyebrow={eyebrow} title={title} /></Reveal>
          {lead && <Reveal delay={60}><p className="kg-lead" style={{ margin: '18px 0 0' }}>{lead}</p></Reveal>}
          {paras && paras.map((p, i) => <Reveal key={i} delay={100 + i * 50}><p className="kg-p" style={{ margin: '14px 0 0' }}>{p}</p></Reveal>)}
          {bullets && <div style={{ marginTop: 22 }}><BulletGrid items={bullets} cols={2} /></div>}
        </div>
      </div>
    </Section>
  );
}

function Dienstleistungen({ onNav, scrollY }) {
  return (
    <div>
      <PageHero eyebrow="unsere Services für Ihre Ansprüche" title="Unsere Dienstleistungen"
        lead="Ihr Garant für Qualität und Perfektion – Gipserarbeiten, Spezialarbeiten und Fassaden aus einer Hand." img="assets/work-drywall-ceiling.jpeg" scrollY={scrollY} />
      <ServiceDetail id="gipser" eyebrow="Gipserarbeiten" title="Gips – Das Multitalent unter den Baustoffen"
        img="assets/work-drywall-ceiling.jpeg"
        lead="Seit Jahrtausenden macht sich der Mensch die vielseitigen Eigenschaften von Gips zunutze – als Baustoff für Raumklima, Dämmung und Brandschutz."
        paras={['Kigips ist spezialisiert auf Innen- und Aussenputze, Trennwände und Decken, Grund- und Ausgleichsputze, Sanierungen, Schallschutz und Wärmedämmungen.']}
        bullets={['raumklimaregulierend', 'frei von Schadstoffen', 'wärme- und schalldämmend', 'langlebig & nachhaltig', 'optisch ansprechend', 'effektiver Brandschutz']} />
      <ServiceDetail id="spezial" flip eyebrow="Spezial Gipsarbeiten" title="Ihr Spezialist für Wand und Decke"
        img="assets/work-ceiling-lights.jpeg"
        lead="Schall- und Leichtbauwände, Decken und Deckensysteme – schnell, kostengünstig und qualitativ hochwertig dank innovativer Trockenbautechnik."
        bullets={['nichttragende Zwischenwände', 'Brand- & Schallschutzverkleidungen', 'Vorsatzschalen', 'Vollgipsplattenwände', 'Gewölbebau', 'Akustik- & Deckensysteme']} />
      <ServiceDetail id="fassaden" eyebrow="Fassaden" title="Fassadenkunst: Unser Handwerk, Ihre Meisterleistung"
        img="assets/building-modern.jpeg"
        lead="Wir sind Experten in Fassadenkonstruktion und -sanierung – für soliden, fachgerechten Schutz vor Kälte, Hitze, Witterung, Staub und Schmutz."
        paras={['Kigips GmbH garantiert langlebige Lösungen für Isolation und Dämmung – fachgerecht gebaut und qualitativ hochwertig.']} />
      <CtaBanner onNav={onNav} />
    </div>
  );
}

const KG_UMBAU = [
  { icon: 'layout-panel-left', title: 'Trockenbau', text: 'Schall- und Leichtbauwände sowie Decken und Deckensysteme.', img: 'assets/work-attic.jpeg' },
  { icon: 'layers', title: 'Grundputz', text: 'Die ebenmässige Basis für alle Folgebeschichtungen.', img: 'assets/work-wall-damage.jpeg' },
  { icon: 'building-2', title: 'Fassade', text: 'Natürlich spielt auch das Äussere eine grosse Rolle.', img: 'assets/building-house.jpeg' },
  { icon: 'sparkles', title: 'Stucco Veneziano', text: 'Eine besondere Spachteltechnik mit Wurzeln in Italien.', img: 'assets/work-ceiling-lights.jpeg' }
];

const KG_SPEZ = [
  { title: 'Service Gipser', text: 'Auch kleine Aufträge kommen nicht zu kurz: schnell und zuverlässig für Ausbesserungen oder Notfälle – mit unserem Servicemobil sofort bei Ihnen.' },
  { title: 'Stuckaturen', text: 'Vom Geschäftsführer höchstpersönlich nach Ihren Vorstellungen erschaffen: florale Ornamente, klassische Formen oder moderne Stuckelemente.' },
  { title: 'Stucco Veneziano', text: 'Mehrere Schichten einer Kalkverbindung führen zum beliebten optischen Effekt – edel und ideal für Räume mit hoher Luftfeuchtigkeit.' }
];

function Umbauten({ onNav, scrollY }) {
  return (
    <div>
      <PageHero eyebrow="Für ein perfektes Wohnambiente" title="Umbauten" img="assets/work-attic.jpeg" scrollY={scrollY}
        lead="Öfter mal was Neues – Kigips, Ihre Spezialisten für Umbauten mit Gips, Spezialarbeiten und Fassadenbau." />
      <Section bg="var(--kg-white)">
        <div style={{ maxWidth: 760 }}>
          <Reveal><SectionTitle eyebrow="Kigips – Spezialisten für Umbauten" title="Mit wenig Aufwand grosse Wirkung" /></Reveal>
          <Reveal delay={80}><p className="kg-p" style={{ margin: '18px 0 0' }}>Häufig reicht es, an das bestehende Mauerwerk Gipskartonplatten zu befestigen, um wertvolle Raumfläche zu gewinnen – schnell, zeit- und kostensparend.</p></Reveal>
        </div>
        <div style={{ marginTop: 32, maxWidth: 760 }}>
          <BulletGrid items={['Gesamt- und Teilsanierungen', 'Raumteilungen und Deckeneinzug', 'Sanierungen', 'Beratung von Bauherr & Architekt']} cols={2} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22, marginTop: 56 }} className="kg-grid-4">
          {KG_UMBAU.map((u, i) => (
            <Reveal key={u.title} delay={i * 90}>
              <div style={{ background: '#fff', border: '1px solid var(--kg-line)', borderRadius: 'var(--kg-radius-lg)', overflow: 'hidden', height: '100%', boxShadow: 'var(--kg-shadow-sm)' }}>
                <div style={{ height: 130, backgroundImage: `url(${u.img})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
                <div style={{ padding: '20px 20px 24px' }}>
                  <Icon name={u.icon} size={24} color="var(--kg-blue)" strokeWidth={2} style={{ marginBottom: 10 }} />
                  <h3 className="kg-h3" style={{ margin: 0, fontSize: 19 }}>{u.title}</h3>
                  <p className="kg-p" style={{ margin: '8px 0 0', fontSize: 15 }}>{u.text}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Section>
      <Section bg="var(--kg-paper)" pad={88}>
        <div style={{ textAlign: 'center' }}><SectionTitle center eyebrow="Für ein perfektes Wohnambiente" title="Unsere Spezialitäten" /></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 48 }} className="kg-grid-3">
          {KG_SPEZ.map((s, i) => (
            <Reveal key={s.title} delay={i * 100}>
              <div style={{ background: '#fff', borderRadius: 'var(--kg-radius-lg)', padding: '32px 28px', border: '1px solid var(--kg-line)', height: '100%', boxShadow: 'var(--kg-shadow-sm)' }}>
                <h3 className="kg-h3" style={{ margin: 0 }}>{s.title}</h3>
                <p className="kg-p" style={{ margin: '12px 0 0', fontSize: 15.5 }}>{s.text}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Section>
      <CtaBanner onNav={onNav} />
    </div>
  );
}

function Unternehmen({ onNav, scrollY }) {
  return (
    <div>
      <PageHero eyebrow="unsere Services für Ihre Ansprüche" title="Unternehmen" img="assets/team-van.jpeg" scrollY={scrollY}
        lead="Teamwork ist unser Erfolgsrezept – seit 2004 Ihr verlässlicher Partner in der Ostschweiz." />
      <Section bg="var(--kg-white)">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="kg-split">
          <div>
            <Reveal><SectionTitle eyebrow="Geschichte" title="Teamwork ist unser Erfolgsrezept" /></Reveal>
            <Reveal delay={70}><p className="kg-p" style={{ margin: '18px 0 0' }}>Kigips wurde 2004 von Obrad Kitic gegründet. Seit 1985 als Gipser und Leichtbaumonteur tätig, seit 1990 als Vorarbeiter und Baustellenleiter, begleitet ihn stets die Liebe zum Handwerk.</p></Reveal>
            <Reveal delay={130}><p className="kg-p" style={{ margin: '14px 0 0' }}>Als Geschäftsführer berät er Bauleiter und Architekten und packt täglich mit seinem Team auf den Baustellen selbst an. So arbeiten wir als starkes, effektives Team – auch schwierige und umfangreiche Aufträge bewältigen wir zur grössten Zufriedenheit unserer Auftraggeber.</p></Reveal>
          </div>
          <Reveal>
            <div style={{ position: 'relative', borderRadius: 'var(--kg-radius-lg)', overflow: 'hidden', boxShadow: 'var(--kg-shadow-lg)', aspectRatio: '4/3.4' }}>
              <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/team-van.jpeg)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
            </div>
          </Reveal>
        </div>
      </Section>
      <Facts />
      <Section bg="var(--kg-paper)">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="kg-split">
          <Reveal>
            <div style={{ position: 'relative', borderRadius: 'var(--kg-radius-lg)', overflow: 'hidden', boxShadow: 'var(--kg-shadow-lg)', aspectRatio: '4/3' }}>
              <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/team-van.jpeg)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
            </div>
          </Reveal>
          <div>
            <Reveal><SectionTitle eyebrow="Unser Team" title="Ihr Fundament für erstklassige Ergebnisse" /></Reveal>
            <Reveal delay={70}><p className="kg-p" style={{ margin: '18px 0 0' }}>Unser kompetentes Team besteht aus sechs hochspezialisierten Mitarbeitern mit umfassendem Know-how in Gipserarbeiten, Spezialarbeiten und Fassaden.</p></Reveal>
            <Reveal delay={130}><p className="kg-p" style={{ margin: '14px 0 0' }}>Mit langjähriger Erfahrung begleiten sie Ihr Projekt von der Planung bis zur vollendeten Umsetzung – Ihre zuverlässigen Ansprechpartner für exzellente Ergebnisse.</p></Reveal>
            <div style={{ marginTop: 26 }}><Reveal delay={180}><Button variant="primary" icon="arrow-right" onClick={() => onNav('Offerte')}>Projekt anfragen</Button></Reveal></div>
          </div>
        </div>
      </Section>
      <CtaBanner onNav={onNav} />
    </div>
  );
}

function Offerte({ scrollY }) {
  return (
    <div>
      <PageHero eyebrow="Offerte anfragen" title="Überlassen Sie Ihre Fassaden den Experten" img="assets/building-modern.jpeg" scrollY={scrollY}
        lead="Füllen Sie das Formular aus – Ihre Angaben helfen uns, eine präzise Kosteneinschätzung zu erstellen." />
      <Section bg="var(--kg-white)" narrow>
        <Reveal><div style={{ background: '#fff', borderRadius: 'var(--kg-radius-lg)', boxShadow: 'var(--kg-shadow-lg)', padding: '40px', border: '1px solid var(--kg-line)' }}>
          <QuoteForm />
        </div></Reveal>
      </Section>
    </div>
  );
}

function Kontakt({ scrollY }) {
  const rows = [
    { icon: 'map-pin', label: 'Adresse', value: 'Lindenwiesstrasse 10, 9200 Gossau' },
    { icon: 'phone', label: 'Telefon', value: '+41 71 525 08 08' },
    { icon: 'printer', label: 'Fax', value: '071 525 08 12' },
    { icon: 'mail', label: 'E-Mail', value: 'info@kigips.ch' }
  ];
  return (
    <div>
      <PageHero eyebrow="Kigips GmbH" title="Kontakt" img="assets/building-modern.jpeg" scrollY={scrollY}
        lead="Kigips – wo Expertise auf Perfektion trifft. Wir freuen uns auf Ihre Nachricht." />
      <Section bg="var(--kg-white)">
        <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56 }} className="kg-split">
          <div>
            <Reveal><SectionTitle eyebrow="Direkt erreichen" title="So finden Sie uns" /></Reveal>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 28 }}>
              {rows.map((r, i) => (
                <Reveal key={r.label} delay={i * 80}>
                  <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', padding: '14px 0', borderBottom: '1px solid var(--kg-line)' }}>
                    <span style={{ flexShrink: 0, width: 44, height: 44, borderRadius: 'var(--kg-radius)', background: 'var(--kg-blue-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name={r.icon} size={20} color="var(--kg-blue)" />
                    </span>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--kg-slate-500)' }}>{r.label}</div>
                      <div style={{ fontFamily: 'var(--kg-font-display)', fontWeight: 700, fontSize: 18, color: 'var(--kg-fg1)', marginTop: 3 }}>{r.value}</div>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
          <Reveal delay={120}>
            <div style={{ background: 'var(--kg-paper)', borderRadius: 'var(--kg-radius-lg)', padding: '36px', border: '1px solid var(--kg-line)' }}>
              <h3 className="kg-h3" style={{ margin: '0 0 22px' }}>Schreiben Sie uns</h3>
              <ContactForm />
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}

Object.assign(window, { PageHero, Dienstleistungen, Umbauten, Unternehmen, Offerte, Kontakt, ServiceDetail, BulletGrid });