// site-sections.jsx — Services, Process, About, Contact, Footer. Exports each.

function SectionHead({ badge, accent, children, intro, light = false, center = false, headingTop = 20 }) {
  return (
    <div style={{ maxWidth: center ? 760 : 720, margin: center ? '0 auto' : 0, textAlign: center ? 'center' : 'left' }}>
      <Reveal style={{ display: 'inline-block' }}><Eyebrow accent={accent} light={light}>{badge}</Eyebrow></Reveal>
      {children && <Reveal delay={60}><h2 style={{ fontFamily: T.serif, fontSize: 'clamp(32px,3.6vw,46px)', lineHeight: 1.1, fontWeight: 500, letterSpacing: -0.8, color: light ? '#fff' : T.navy, margin: `${headingTop}px 0 0` }}>{children}</h2></Reveal>}
      {intro && <Reveal delay={120}><p style={{ fontFamily: T.sans, fontSize: 18, lineHeight: 1.6, color: light ? 'rgba(255,255,255,.7)' : T.muted, margin: '18px 0 0', maxWidth: 620, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>{intro}</p></Reveal>}
    </div>
  );
}

// ── Services ──────────────────────────────────────────────────
function Services({ c, accent }) {
  const s = c.services;
  const narrow = useNarrow();
  return (
    <section id="services" style={{ background: T.white, padding: '108px 0' }}>
      <Container>
        <SectionHead badge={s.badge} accent={accent} intro={s.intro}>{s.heading}</SectionHead>
        <div style={{ display: 'grid', gridTemplateColumns: narrow ? '1fr' : 'repeat(3, 1fr)', gap: 26, marginTop: 56 }}>
          {s.pillars.map((p, i) => (
            <Reveal key={i} delay={i * 90} style={{ height: '100%' }}>
              <div style={{ height: '100%', background: T.white, border: `1px solid ${T.line}`, borderRadius: 16, padding: '34px 30px', boxSizing: 'border-box', boxShadow: '0 1px 2px rgba(10,42,107,.04)', display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
                  <div style={{ width: 54, height: 54, borderRadius: 13, display: 'grid', placeItems: 'center', background: '#eef3fb', color: T.navy }}>
                    <PillarIcon name={p.icon} />
                  </div>
                  <span style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 30, color: '#d4dcea', lineHeight: 1 }}>0{i + 1}</span>
                </div>
                <h3 style={{ fontFamily: T.serif, fontSize: 24, fontWeight: 600, color: T.navy, margin: '0 0 18px', letterSpacing: -0.3 }}>{p.title}</h3>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 15 }}>
                  {p.items.map((it, j) => (
                    <li key={j} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 3 }}><path d="M3 8.5l3 3 7-8" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                      <span style={{ fontFamily: T.sans, fontSize: 14.5, lineHeight: 1.5, color: T.muted }}>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── Process ───────────────────────────────────────────────────
function Process({ c, accent }) {
  const pr = c.process;
  const narrow = useNarrow();
  return (
    <section id="process" style={{ background: T.panel, padding: '108px 0', borderTop: `1px solid ${T.line}`, borderBottom: `1px solid ${T.line}` }}>
      <Container>
        <SectionHead badge={pr.badge} accent={accent} intro={pr.intro} center headingTop={40}>
          {/* arrow flow restates the step cards below — hide on mobile, where it wraps badly */}
          {narrow ? null : pr.headingParts.map((w, i) => (
            <React.Fragment key={i}>
              {w}{i < pr.headingParts.length - 1 && <span style={{ color: accent, fontStyle: 'italic', margin: '0 .25em', fontWeight: 400 }}>→</span>}
            </React.Fragment>
          ))}
        </SectionHead>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: narrow ? 'repeat(2,1fr)' : 'repeat(4, 1fr)', gap: narrow ? 36 : 24, marginTop: 60 }}>
          {!narrow && <div style={{ position: 'absolute', top: 27, left: '12%', right: '12%', height: 2, background: `repeating-linear-gradient(90deg, ${T.navy}33 0 8px, transparent 8px 16px)` }} />}
          {pr.steps.map((st, i) => (
            <Reveal key={i} delay={i * 100} style={{ position: 'relative', textAlign: 'center' }}>
              <div style={{ width: 54, height: 54, margin: '0 auto 20px', borderRadius: '50%', background: i === 3 ? accent : T.navy, color: i === 3 ? T.navy : '#fff', display: 'grid', placeItems: 'center', fontFamily: T.sans, fontWeight: 700, fontSize: 17, position: 'relative', zIndex: 1, boxShadow: '0 6px 18px -6px rgba(10,42,107,.5)' }}>{st.n}</div>
              <h3 style={{ fontFamily: T.serif, fontSize: 23, fontWeight: 600, color: T.navy, margin: '0 0 10px', letterSpacing: -0.3 }}>{st.title}</h3>
              <p style={{ fontFamily: T.sans, fontSize: 14.5, lineHeight: 1.55, color: T.muted, margin: '0 auto', maxWidth: 230 }}>{st.desc}</p>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── About ─────────────────────────────────────────────────────
function About({ c, accent }) {
  const a = c.about;
  const narrow = useNarrow();
  return (
    <section id="about" style={{ background: T.white, padding: '108px 0' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: narrow ? '1fr' : '1.15fr 0.85fr', gap: narrow ? 40 : 64, alignItems: 'start' }}>
          <div>
            <SectionHead badge={a.badge} accent={accent}>{a.heading}</SectionHead>
            <div style={{ marginTop: 26 }}>
              {a.body.map((para, i) => (
                <Reveal key={i} delay={i * 70}>
                  <p style={{ fontFamily: T.sans, fontSize: 16.5, lineHeight: 1.7, color: i === 0 ? T.ink : T.muted, margin: '0 0 18px' }}>
                    {i === 0 ? <><b style={{ color: T.navy, fontWeight: 700 }}>MLOPS d.o.o.</b>{para.replace('MLOPS d.o.o.', '')}</> : para}
                  </p>
                </Reveal>
              ))}
            </div>
          </div>
          <Reveal delay={120}>
            <div style={{ background: T.navy, borderRadius: 18, padding: 30, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,.1) 1px, transparent 0)', backgroundSize: '24px 24px', opacity: .5 }} />
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: T.sans, fontSize: 12, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: accent, marginBottom: 18 }}>{a.deptLabel}</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'rgba(255,255,255,.12)', borderRadius: 12, overflow: 'hidden' }}>
                  {a.departments.map((d, i) => (
                    <div key={i} style={{ background: T.navy, padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 12 }}>
                      <DeptIcon name={d.icon} c="#ffffff" a={accent} size={30} />
                      <div>
                        <div style={{ fontFamily: T.sans, fontSize: 15.5, fontWeight: 600, color: '#fff', lineHeight: 1.2 }}>{d.name}</div>
                        <div style={{ fontFamily: T.sans, fontSize: 12.5, color: 'rgba(255,255,255,.6)', marginTop: 5, lineHeight: 1.35 }}>{d.role}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

// ── Contact ───────────────────────────────────────────────────
function Field({ label, ph, type = 'text', textarea, value, onChange }) {
  const common = { width: '100%', boxSizing: 'border-box', fontFamily: T.sans, fontSize: 15, color: T.ink, background: '#fff', border: `1.5px solid ${T.line}`, borderRadius: 10, padding: '13px 15px', outline: 'none', transition: 'border-color .15s, box-shadow .15s' };
  const focus = (e) => { e.target.style.borderColor = T.navy; e.target.style.boxShadow = '0 0 0 3px rgba(10,42,107,.1)'; };
  const blur = (e) => { e.target.style.borderColor = T.line; e.target.style.boxShadow = 'none'; };
  return (
    <label style={{ display: 'block' }}>
      <span style={{ display: 'block', fontFamily: T.sans, fontSize: 13, fontWeight: 600, color: T.ink, marginBottom: 7 }}>{label}</span>
      {textarea
        ? <textarea rows={4} placeholder={ph} value={value} onChange={onChange} onFocus={focus} onBlur={blur} style={{ ...common, resize: 'vertical', minHeight: 110 }} />
        : <input type={type} placeholder={ph} value={value} onChange={onChange} onFocus={focus} onBlur={blur} style={common} />}
    </label>
  );
}

function Contact({ c, accent }) {
  const ct = c.contact;
  const narrow = useNarrow();
  const [form, setForm] = React.useState({ name: '', email: '', company: '', message: '', website: '' });
  const [agreed, setAgreed] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setErr('');
    if (!agreed) { setErr(ct.consentError); return; }
    setBusy(true);
    try {
      const res = await fetch('/submit.php', { method: 'POST', body: new URLSearchParams({ ...form, consent: '1' }) });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) setSent(true);
      else setErr(data.error || ct.error);
    } catch {
      setErr(ct.error);
    } finally {
      setBusy(false);
    }
  };
  return (
    <section id="contact" style={{ background: T.navy, padding: '108px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0)', backgroundSize: '30px 30px' }} />
      <Container style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: narrow ? '1fr' : '1fr 1fr', gap: narrow ? 36 : 60, alignItems: 'center' }}>
          <div>
            <SectionHead badge={ct.badge} accent={accent} intro={ct.intro} light>{ct.heading}</SectionHead>
          </div>
          <Reveal delay={100}>
            <form onSubmit={submit} style={{ background: '#fff', borderRadius: 18, padding: 32, boxShadow: '0 30px 70px -30px rgba(0,0,0,.5)' }}>
              {sent ? (
                <div style={{ padding: '40px 10px', textAlign: 'center' }}>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: '#eef3fb', display: 'grid', placeItems: 'center', margin: '0 auto 18px' }}>
                    <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M4 12.5l5 5 11-12" stroke={accent} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </div>
                  <p style={{ fontFamily: T.serif, fontSize: 22, color: T.navy, margin: 0 }}>{ct.sent}</p>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  {/* honeypot — hidden from real users, bots fill it and get silently dropped */}
                  <input type="text" name="website" tabIndex={-1} autoComplete="off" value={form.website} onChange={set('website')}
                    aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    <Field label={ct.fields.name.label} ph={ct.fields.name.ph} value={form.name} onChange={set('name')} />
                    <Field label={ct.fields.email.label} ph={ct.fields.email.ph} type="email" value={form.email} onChange={set('email')} />
                  </div>
                  <Field label={ct.fields.company.label} ph={ct.fields.company.ph} value={form.company} onChange={set('company')} />
                  <Field label={ct.fields.message.label} ph={ct.fields.message.ph} textarea value={form.message} onChange={set('message')} />
                  <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', cursor: 'pointer' }}>
                    <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)}
                      style={{ marginTop: 2, width: 16, height: 16, accentColor: T.navy, flexShrink: 0, cursor: 'pointer' }} />
                    <span style={{ fontFamily: T.sans, fontSize: 13, lineHeight: 1.5, color: T.muted }}>
                      {ct.consent.pre}
                      <a href="/privacy" target="_blank" rel="noopener noreferrer" style={{ color: T.navy, fontWeight: 600, textDecoration: 'underline' }}>{ct.consent.link}</a>
                      {ct.consent.post}
                    </span>
                  </label>
                  {err && <p style={{ margin: 0, fontFamily: T.sans, fontSize: 14, color: '#c0392b' }}>{err}</p>}
                  <button type="submit" disabled={busy} style={{ marginTop: 4, background: T.navy, color: '#fff', border: 'none', borderRadius: 10, padding: '15px', fontFamily: T.sans, fontSize: 15.5, fontWeight: 600, cursor: busy ? 'default' : 'pointer', opacity: busy ? 0.7 : 1 }}>{busy ? ct.sending : ct.submit}</button>
                </div>
              )}
            </form>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

// ── Footer ────────────────────────────────────────────────────
function FootLink({ children, href, onClick, accent }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a href={href} onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ fontFamily: T.sans, fontSize: 14, color: hov ? '#fff' : 'rgba(255,255,255,.62)',
        textDecoration: 'none', transition: 'color .2s', cursor: 'pointer' }}>{children}</a>
  );
}

function Footer({ c, lang, setLang, logoText, accent, logoMark, offsite = false }) {
  const f = c.footer;
  const narrow = useNarrow();
  // section links: scroll in place on home, navigate to /#id from legal pages
  const secHref = (id) => offsite ? `/#${id}` : `#${id}`;
  const onSec = (id) => offsite ? undefined : (e) => { e.preventDefault(); scrollToId(id); };
  const sections = [['services', c.nav.services], ['process', c.nav.process], ['about', c.nav.about], ['contact', c.nav.contact]];

  const Col = ({ heading, children }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ fontFamily: T.sans, fontSize: 12, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: 'rgba(255,255,255,.4)', marginBottom: 2 }}>{heading}</div>
      {children}
    </div>
  );

  return (
    <footer style={{ background: T.navyDeep, padding: narrow ? '52px 0 30px' : '64px 0 34px' }}>
      <Container>
        {/* top: brand + link columns */}
        <div style={{ display: 'grid', gridTemplateColumns: narrow ? '1fr' : '1.4fr 1fr 1fr', gap: narrow ? 40 : 48, alignItems: 'start' }}>
          <div style={{ maxWidth: 320 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <SiteMark kind={logoMark} s={28} c="#fff" a={accent} />
              <Wordmark logoText={logoText} accent={accent} color="#fff" size={20} />
            </div>
            <p style={{ fontFamily: T.sans, fontSize: 14.5, lineHeight: 1.6, color: 'rgba(255,255,255,.6)', margin: '0 0 18px' }}>{f.tagline}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <FootLink href={`mailto:${f.email}`} accent={accent}>{f.email}</FootLink>
            </div>
          </div>

          <Col heading={f.explore}>
            {sections.map(([id, label]) => (
              <FootLink key={id} href={secHref(id)} onClick={onSec(id)} accent={accent}>{label}</FootLink>
            ))}
          </Col>

          <Col heading={f.legalHeading}>
            <FootLink href="/privacy" accent={accent}>{f.privacy}</FootLink>
            <FootLink href="/impressum" accent={accent}>{f.impressum}</FootLink>
          </Col>
        </div>

        {/* divider */}
        <div style={{ height: 1, background: 'rgba(255,255,255,.1)', margin: narrow ? '34px 0 22px' : '44px 0 26px' }} />

        {/* bottom bar */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontFamily: T.sans, fontSize: 13, color: 'rgba(255,255,255,.5)' }}>
            {f.rights} · {f.place}
          </div>
          <LangToggle lang={lang} setLang={setLang} light />
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Services, Process, About, Contact, Footer, SectionHead });