/* HomeSections.jsx — Services, WhyUs, Facts (count-up), References gallery, CtaBanner */

const KG_SERVICES = [
  { key: 'gipser', icon: 'layers', title: 'Gipserarbeiten', img: 'assets/work-drywall-ceiling.jpeg',
    text: 'Präzision und Qualität vereint – für makellose Oberflächen in jedem Raum.' },
  { key: 'spezial', icon: 'shapes', title: 'Spezial Gipsarbeiten', img: 'assets/work-ceiling-lights.jpeg',
    text: 'Von kunstvollen Designs bis zu innovativen Lösungen – Einzigartigkeit in jedem Projekt.' },
  { key: 'fassaden', icon: 'building-2', title: 'Fassaden', img: 'assets/building-modern.jpeg',
    text: 'Gestalten Sie mit unserer Expertise beeindruckende Fassaden, die Blicke auf sich ziehen.' }
];

function ServiceCard({ s, onNav, delay }) {
  const [h, setH] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} onClick={() => onNav('Dienstleistungen', s.key)}
        style={{
          background: '#fff', borderRadius: 'var(--kg-radius-lg)', overflow: 'hidden', cursor: 'pointer',
          border: '1px solid var(--kg-line)', boxShadow: h ? 'var(--kg-shadow-lg)' : 'var(--kg-shadow-sm)',
          transform: h ? 'translateY(-6px)' : 'none', transition: 'all .4s var(--kg-ease)', height: '100%'
        }}>
        <div style={{ height: 188, overflow: 'hidden', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${s.img})`, backgroundSize: 'cover', backgroundPosition: 'center', transform: h ? 'scale(1.07)' : 'scale(1)', transition: 'transform .8s var(--kg-ease)' }} />
          <div style={{ position: 'absolute', top: 16, left: 16, width: 48, height: 48, borderRadius: 'var(--kg-radius)', background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--kg-shadow-sm)' }}>
            <Icon name={s.icon} size={24} color="var(--kg-blue)" strokeWidth={2} />
          </div>
        </div>
        <div style={{ padding: '26px 26px 28px' }}>
          <h3 className="kg-h3" style={{ margin: 0 }}>{s.title}</h3>
          <p className="kg-p" style={{ margin: '12px 0 20px', fontSize: 16 }}>{s.text}</p>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--kg-blue)', fontWeight: 700, fontSize: 14.5, letterSpacing: '.02em', transform: h ? 'translateX(5px)' : 'none', transition: 'transform .35s var(--kg-ease)' }}>
            zur Dienstleistung <Icon name="arrow-right" size={17} />
          </span>
        </div>
      </div>
    </Reveal>
  );
}

function Services({ onNav }) {
  return (
    <Section bg="var(--kg-white)" id="services">
      <div style={{ textAlign: 'center' }}>
        <SectionTitle center eyebrow="unsere Services für Ihre Ansprüche"
          title="Unsere Dienstleistungen" lead="Ihr Garant für Qualität und Perfektion – vom ersten Grundputz bis zur fertigen Fassade." />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 56 }} className="kg-grid-3">
        {KG_SERVICES.map((s, i) => <ServiceCard key={s.key} s={s} onNav={onNav} delay={i * 110} />)}
      </div>
    </Section>
  );
}

const KG_WHY = [
  { t: 'Fachkompetenz', d: 'Jahrelange Erfahrung und fundiertes Fachwissen garantieren erstklassige Ergebnisse.' },
  { t: 'Vielseitigkeit', d: 'Von traditionellen Techniken bis zu innovativen Lösungen – ein breites Spektrum an Arbeiten.' },
  { t: 'Engagement für Exzellenz', d: 'Unser Team strebt stets nach Perfektion und setzt Ihre Vision mit Präzision um.' },
  { t: 'Kundenzufriedenheit', d: 'Ihre Zufriedenheit steht im Mittelpunkt – ein Projekt und eine Erfahrung, die begeistert.' }
];

function WhyUs({ onNav }) {
  return (
    <Section bg="var(--kg-paper)">
      <div style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', 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.4' }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/team-van.jpeg)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(14,58,102,0) 55%, rgba(14,58,102,0.55))' }} />
            <div style={{ position: 'absolute', left: 24, bottom: 22, color: '#fff' }}>
              <div style={{ fontFamily: 'var(--kg-font-display)', fontWeight: 800, fontSize: 30, lineHeight: 1 }}>seit 2004</div>
              <div style={{ fontSize: 14, opacity: 0.85, marginTop: 4 }}>Ihr Partner in der Ostschweiz</div>
            </div>
          </div>
        </Reveal>
        <div>
          <Reveal><SectionTitle eyebrow="Wir machen die Abwicklung spielend einfach"
            title="Überlassen Sie Ihre Fassaden den Experten" /></Reveal>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 28 }}>
            {KG_WHY.map((w, i) => (
              <Reveal key={w.t} delay={i * 90}>
                <div style={{ display: 'flex', gap: 16, padding: '14px 0', borderBottom: i < KG_WHY.length - 1 ? '1px solid var(--kg-line)' : 'none' }}>
                  <span style={{ flexShrink: 0, width: 30, height: 30, borderRadius: '50%', background: 'var(--kg-blue-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 2 }}>
                    <Icon name="check" size={17} color="var(--kg-blue)" strokeWidth={2.6} />
                  </span>
                  <div>
                    <div style={{ fontFamily: 'var(--kg-font-display)', fontWeight: 700, fontSize: 18, color: 'var(--kg-fg1)' }}>{w.t}</div>
                    <div className="kg-p" style={{ margin: '3px 0 0', fontSize: 15.5 }}>{w.d}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

/* count-up number */
function CountUp({ to, suffix = '', duration = 1400 }) {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  const done = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !done.current) {
        done.current = true;
        const start = performance.now();
        const tick = (now) => {
          const p = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setVal(Math.round(eased * to));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    io.observe(el); return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{val}{suffix}</span>;
}

const KG_FACTS = [
  { n: 2004, label: 'Gegründet', plain: true },
  { n: 20, suffix: '+', label: 'Jahre Erfahrung' },
  { n: 10, label: 'Spezialisten im Team' },
  { n: 3, label: 'Regionen: Ostschweiz, Zürich, Thurgau' }
];

function Facts() {
  return (
    <section style={{ background: 'linear-gradient(135deg, var(--kg-blue-800), var(--kg-blue-700))', padding: '88px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/building-modern.jpeg)', backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.1 }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px', position: 'relative' }}>
        <Reveal><span className="kg-eyebrow" style={{ color: 'rgba(255,255,255,0.8)' }}>Zahlen, Daten, Fakten</span>
          <h2 className="kg-h2" style={{ color: '#fff', margin: '14px 0 0' }}>Unser Erfolg in Zahlen</h2></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, marginTop: 50 }} className="kg-grid-4">
          {KG_FACTS.map((f, i) => (
            <Reveal key={f.label} delay={i * 110}>
              <div style={{ borderLeft: '3px solid var(--kg-blue)', paddingLeft: 22 }}>
                <div style={{ fontFamily: 'var(--kg-font-display)', fontWeight: 900, fontSize: 'clamp(40px, 5vw, 60px)', color: '#fff', lineHeight: 1, letterSpacing: '-0.02em' }}>
                  {f.plain ? f.n : <CountUp to={f.n} suffix={f.suffix || ''} />}
                </div>
                <div style={{ fontSize: 15.5, color: 'rgba(255,255,255,0.8)', marginTop: 12, maxWidth: 200 }}>{f.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const KG_GALLERY = [
  'assets/work-drywall-ceiling.jpeg', 'assets/work-ceiling-lights.jpeg', 'assets/work-attic.jpeg',
  'assets/building-modern.jpeg', 'assets/work-wall-damage.jpeg', 'assets/building-house.jpeg',
  'assets/work-interior-dust.jpeg', 'assets/building-pink.jpeg'
];

function GalleryTile({ src, span, delay }) {
  const [h, setH] = React.useState(false);
  return (
    <Reveal delay={delay} style={{ gridColumn: span ? 'span 2' : 'span 1' }}>
      <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ position: 'relative', borderRadius: 'var(--kg-radius-lg)', overflow: 'hidden', height: 260, cursor: 'pointer', boxShadow: h ? 'var(--kg-shadow-lg)' : 'var(--kg-shadow-sm)', transition: 'box-shadow .4s var(--kg-ease)' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${src})`, backgroundSize: 'cover', backgroundPosition: 'center', transform: h ? 'scale(1.08)' : 'scale(1)', transition: 'transform .9s var(--kg-ease)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(14,58,102,0) 50%, rgba(14,58,102,0.5))', opacity: h ? 1 : 0.5, transition: 'opacity .4s var(--kg-ease)' }} />
        <div style={{ position: 'absolute', right: 16, bottom: 14, width: 38, height: 38, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: h ? 1 : 0, transform: h ? 'none' : 'scale(0.8)', transition: 'all .4s var(--kg-ease)' }}>
          <Icon name="maximize-2" size={17} color="var(--kg-blue)" />
        </div>
      </div>
    </Reveal>
  );
}

function References() {
  return (
    <Section bg="var(--kg-white)">
      <div style={{ textAlign: 'center' }}>
        <SectionTitle center eyebrow="Referenzen" title="Kleiner Einblick in unsere Arbeit"
          lead="Ein Auszug aus realisierten Projekten in der Ostschweiz, Zürich und im Thurgau." />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 52 }} className="kg-gallery">
        {KG_GALLERY.map((src, i) => <GalleryTile key={src} src={src} span={i === 0 || i === 5} delay={(i % 4) * 90} />)}
      </div>
    </Section>
  );
}

function CtaBanner({ onNav }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <Reveal y={0}>
        <div style={{ position: 'relative', minHeight: 380, display: 'flex', alignItems: 'center' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/work-ceiling-lights.jpeg)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(105deg, rgba(14,58,102,0.94), rgba(18,75,130,0.7))' }} />
          <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '64px 28px', width: '100%', textAlign: 'center' }}>
            <h2 className="kg-h1" style={{ color: '#fff', margin: '0 auto', maxWidth: 760, fontSize: 'clamp(30px, 4.6vw, 50px)' }}>Für makellose Wände und eine Fassade, die beeindruckt!</h2>
            <p style={{ color: 'rgba(255,255,255,0.88)', fontSize: 19, margin: '20px auto 34px', maxWidth: 560 }}>Erzählen Sie uns von Ihrem Projekt – wir erstellen Ihnen ein unverbindliches Angebot.</p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
              <Button variant="white" size="lg" icon="arrow-right" onClick={() => onNav('Offerte')}>Offerte anfragen</Button>
              <Button variant="outline" size="lg" iconLeft="phone" onClick={() => onNav('Kontakt')}>071 525 08 08</Button>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

Object.assign(window, { Services, WhyUs, Facts, References, CtaBanner, CountUp });