// ── Leistungen · Warum Walter · Stimmen · Über uns ────────────────────────

// Visual-only constants — not translatable
const SERVICE_ICONS  = ['ph-wrench', 'ph-drop', 'ph-flame', 'ph-funnel'];
const SERVICE_RADIUS = ['rounded-md', 'rounded-sm', 'rounded-md', 'rounded-sm'];

function Leistungen() {
  const t = useT();

  return (
    <section id="leistungen" className="bg-white" style={{ paddingTop: '92px', paddingBottom: '96px' }}>
      <div className="mx-auto max-w-[1240px] px-6 md:px-10">
        <Reveal><Eyebrow>{t.leistungen.eyebrow}</Eyebrow></Reveal>
        <Reveal delay={70}>
          <h2
            className="font-display font-bold text-ink mt-[14px]"
            style={{ fontSize: 'clamp(34px, 4.6vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.025em' }}
          >
            {t.leistungen.heading}
          </h2>
        </Reveal>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[18px]" style={{ marginTop: '52px' }}>
          {t.leistungen.items.map((s, i) => (
            <Reveal key={s.title} delay={i * 80}>
              <article
                className={`group h-full bg-surface ${SERVICE_RADIUS[i]} transition-all duration-200`}
                style={{ padding: '30px 26px 32px', border: '1px solid #E7EDF3' }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform  = 'translateY(-4px)';
                  e.currentTarget.style.boxShadow  = '0 18px 40px rgba(15,41,82,0.12)';
                  e.currentTarget.style.background = '#ffffff';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform  = 'translateY(0)';
                  e.currentTarget.style.boxShadow  = 'none';
                  e.currentTarget.style.background = '#F1F5F9';
                }}
              >
                <span
                  className="inline-flex items-center justify-center rounded-md"
                  style={{ width: '54px', height: '54px', background: '#E3ECF7' }}
                >
                  <i className={'ph ' + SERVICE_ICONS[i]} style={{ fontSize: '32px', color: '#0D9488' }} />
                </span>
                <h3
                  className="font-display font-bold text-ink"
                  style={{ fontSize: '23px', marginTop: '22px', letterSpacing: '-0.01em' }}
                >
                  {s.title}
                </h3>
                <p className="font-sans text-muted" style={{ fontSize: '15px', lineHeight: 1.6, marginTop: '10px' }}>
                  {s.body}
                </p>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function WarumWalter() {
  const t = useT();

  return (
    <section style={{ background: '#EFF6FF', paddingTop: '88px', paddingBottom: '90px' }}>
      <div className="mx-auto max-w-[1240px] px-6 md:px-10">
        <Reveal>
          <h2
            className="font-display font-bold text-ink"
            style={{ fontSize: 'clamp(34px, 4.6vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.025em' }}
          >
            {t.warum.heading}
          </h2>
        </Reveal>

        <div
          className="grid grid-cols-1 lg:grid-cols-4"
          style={{ marginTop: '54px', gap: '40px', alignItems: 'flex-start' }}
        >
          {t.warum.items.map((r, i) =>
            r.dots ? (
              <Reveal key="dots" delay={i * 90} className="hidden lg:block">
                <div style={{ borderTop: '2px solid #1E4D8C', paddingTop: '22px' }}>
                  <div
                    className="font-display font-bold text-brand"
                    style={{ fontSize: '64px', lineHeight: 1, letterSpacing: '0.05em', height: '64px', display: 'flex', alignItems: 'start', opacity: 0.3 }}
                  >
                    ···
                  </div>
                </div>
              </Reveal>
            ) : (
              <Reveal key={r.label} delay={i * 90}>
                <div style={{ borderTop: '2px solid #1E4D8C', paddingTop: '22px' }}>
                  <div
                    className="font-display font-bold text-brand"
                    style={{ fontSize: r.num.length > 2 ? '40px' : '64px', lineHeight: 1, letterSpacing: '-0.03em', height: '64px', display: 'flex', alignItems: 'flex-start' }}
                  >
                    {r.num}
                  </div>
                  <h3 className="font-sans font-bold text-ink" style={{ fontSize: '20px', marginTop: '18px' }}>{r.label}</h3>
                  <p className="font-sans text-muted" style={{ fontSize: '15.5px', lineHeight: 1.65, marginTop: '8px' }}>{r.body}</p>
                </div>
              </Reveal>
            )
          )}
        </div>
      </div>
    </section>
  );
}

function Stimmen() {
  const t = useT();

  return (
    <section id="stimmen" className="bg-white" style={{ paddingTop: '92px', paddingBottom: '96px' }}>
      <div className="mx-auto max-w-[1240px] px-6 md:px-10">
        <Reveal><Eyebrow>{t.stimmen.eyebrow}</Eyebrow></Reveal>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-[18px]" style={{ marginTop: '38px' }}>
          {t.stimmen.items.map((item, i) => (
            <Reveal key={item.name} delay={i * 90}>
              <figure
                className={`h-full flex flex-col ${i === 1 ? 'rounded-md' : 'rounded-sm'}`}
                style={{ border: '1px solid #E2E8F0', padding: '26px 28px 28px' }}
              >
                <i className="ph ph-quotes" aria-hidden="true" style={{ fontSize: '28px', color: '#0D9488', opacity: 0.5 }} />
                <blockquote className="font-sans text-ink flex-1" style={{ fontSize: '16.5px', lineHeight: 1.6, marginTop: '14px' }}>
                  {item.quote}
                </blockquote>
                <figcaption className="font-sans" style={{ marginTop: '12px', paddingTop: '10px', borderTop: '1px solid #E2E8F0' }}>
                  <span className="font-bold text-ink" style={{ fontSize: '15px' }}>{item.name}</span>
                  <span className="block font-mono uppercase text-muted" style={{ fontSize: '11px', letterSpacing: '0.14em', marginTop: '4px' }}>
                    {item.place}
                  </span>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function UeberUns() {
  const t = useT();

  return (
    <section id="ueber-uns" className="bg-white" style={{ paddingBottom: '96px' }}>
      <div className="mx-auto max-w-[1240px] px-6 md:px-10">
        <div className="grid grid-cols-1 lg:grid-cols-[55%_45%]" style={{ gap: '52px', alignItems: 'center' }}>
          <Reveal className="order-2 lg:order-1">
            <Eyebrow>{t.ueber.eyebrow}</Eyebrow>
            <h2
              className="font-display font-bold text-ink mt-[14px]"
              style={{ fontSize: 'clamp(34px, 4.6vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.025em' }}
            >
              {t.ueber.heading}
            </h2>
            <p className="font-sans text-muted" style={{ fontSize: '17.5px', lineHeight: 1.65, marginTop: '22px', maxWidth: '560px' }}>
              {t.ueber.body}
            </p>
            <div className="flex flex-wrap gap-[12px]" style={{ marginTop: '30px' }}>
              {t.ueber.badges.map((b) => (
                <span
                  key={b}
                  className="inline-flex items-center gap-[7px] rounded-sm font-sans font-semibold text-brand"
                  style={{ background: '#EFF6FF', border: '1px solid #D9E5F4', padding: '9px 15px', fontSize: '14px' }}
                >
                  <span className="text-accent"><CheckGlyph size={15} /></span>
                  {b}
                </span>
              ))}
            </div>
          </Reveal>

          <Reveal delay={120} className="order-1 lg:order-2">
            <img
              src="walter.png"
              alt="Walter Hoffmann, Inhaber Klempnerei Walter"
              style={{ width: '100%', aspectRatio: '1 / 1', objectFit: 'cover', objectPosition: 'center top', borderRadius: '10px', display: 'block' }}
            />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Leistungen, WarumWalter, Stimmen, UeberUns });