// Production blocks: Hero, What We Do, Who We Are, Contact, Footer.
// One option per block, dark mode only.

// ─── HERO ────────────────────────────────────────────────────────────────────

function NewHero({ t, locale, onContact }) {
  const isDe = locale === 'de';
  const headline = isDe
    ? 'Identitätsinfrastruktur, der Ihre Kunden vertrauen. Architektur, die Sie ruhig schlafen lässt.'
    : 'Identity infrastructure that earns your customers’ trust. Architecture that earns you sleep.';
  const sub = isDe
    ? 'Oparco baut und betreibt Customer-Identity-Plattformen für europäische Unternehmen. Keine Generalisten. Keine Bank. Die Person, mit der Sie sprechen, ist die Person, die es baut.'
    : 'Oparco designs, builds and operates customer identity platforms for European enterprises. No generalists. No bench. The person you speak to is the person who builds it.';
  const metrics = [
    ['40M+', isDe ? 'Nutzer' : 'users'],
    ['20k+', isDe ? 'Client-Anwendungen' : 'client applications'],
    ['99.99%', isDe ? 'Auth-Uptime SLA' : 'auth uptime SLA'],
    ['0', isDe ? 'Sicherheitsvorfälle' : 'security issues'],
    ['20', isDe ? 'Enterprise-Kunden' : 'enterprise customers'],
  ];
  return (
    <section className="new-hero">
      <div aria-hidden className="new-hero__glow" />
      <div className="new-hero__inner">
        <div className="new-hero__columns">
          <div className="new-hero__copy">
            <div className="new-hero__badge">
              <Dot color="oklch(0.60 0.14 158)" pulse />
              Okta Partner of the Year EMEA · 2023 {'&'} 2024
            </div>
            <h1 className="new-hero__headline">{headline}</h1>
            <p className="new-hero__sub">{sub}</p>
            <div className="new-hero__cta">
              <button onClick={onContact} className="new-hero__cta-btn">
                {isDe ? 'Gespräch beginnen' : 'Start a conversation'} <I.arrow />
              </button>
            </div>
          </div>
          <div className="new-hero__animation-surface">
            <HeroAnimation />
          </div>
        </div>

        <div className="new-hero__metrics">
          {metrics.map(([n, l], i) => (
            <div key={n} className="new-hero__metric">
              <div className="new-hero__metric-n">{n}</div>
              <div className="new-hero__metric-l">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── WHAT WE DO ──────────────────────────────────────────────────────────────

function NewWhatWeDo({ t, locale }) {
  const isDe = locale === 'de';
  const col1 = [
    { k: 'C1', t: isDe ? 'CIAM-Strategie' : 'CIAM strategy', d: isDe ? 'Zielarchitektur, Build-vs-Buy, Okta · Auth0 · Self-hosted. Keine Vendor-Lobby.' : 'Target architecture, build-vs-buy, Okta · Auth0 · self-hosted. No vendor lobby.' },
    { k: 'C2', t: isDe ? 'Beratung & Discovery' : 'Consulting & discovery', d: isDe ? 'Anforderungs-Workshops, Bedrohungsmodellierung, Roadmap und Business Case.' : 'Requirements workshops, threat modelling, roadmap and business case.' },
    { k: 'C3', t: isDe ? 'Audit & Assurance' : 'Audit & assurance', d: isDe ? 'FAPI/OIDC-Konformität, BSI C5, SOC 2, DORA, eIDAS 2.0.' : 'FAPI/OIDC conformance, BSI C5, SOC 2, DORA, eIDAS 2.0.' },
  ];
  const col2 = [
    { k: 'C4', t: isDe ? 'Greenfield-Implementierung' : 'Greenfield implementation', d: isDe ? 'OIDC, SAML, SCIM, Passkeys, MFA — bis zur Produktion.' : 'OIDC, SAML, SCIM, passkeys, MFA — through to production.' },
    { k: 'C5', t: isDe ? 'Legacy-Migration' : 'Legacy migration', d: isDe ? 'Unterbrechungsfreie Umstellungen von IAM, LDAP oder EOL-Plattformen.' : 'Zero-downtime cutovers from legacy IAM, LDAP or end-of-life platforms.' },
    { k: 'C6', t: isDe ? 'B2B-Mandantenfähigkeit' : 'B2B tenancy', d: isDe ? 'Organisationsmodellierung, delegierte Administration, JIT, Enterprise SSO.' : 'Organisation modelling, delegated admin, JIT provisioning, enterprise SSO.' },
  ];
  const col3 = [
    { k: 'C7', t: isDe ? 'Managed Service' : 'Managed service', d: isDe ? 'Monitoring, Incident Response, Quartalsreviews. 99,99 % Auth-Uptime SLA.' : 'Monitoring, incident response, quarterly reviews. 99.99% auth uptime SLA.' },
    { k: 'C8', t: isDe ? 'Post Go-Live-Betreuung' : 'Post go-live support', d: isDe ? 'Hypercare, Tuning, Releases und kontinuierliche Verbesserung nach dem Cutover.' : 'Hypercare, tuning, releases and continuous improvement after the cutover.' },
    { k: 'C9', t: isDe ? 'Testing & Verifizierung' : 'Testing & verification', d: isDe ? 'Last-, Penetrations- und End-to-End-Tests der gesamten Identity-Strecke.' : 'Load, penetration and end-to-end testing across the entire identity path.' },
  ];
  return (
    <section className="wwdo-section">
      <div className="wwdo-section__inner">
        <div className="wwdo-intro">
          <h2 className="wwdo-intro__heading">
            {isDe ? 'Identity ist alles, was wir tun.' : 'Identity is all we do.'}
          </h2>
          <p className="wwdo-intro__sub">
            {isDe ? 'Wir sind keine Unterabteilung einer IT-Beratung. Wir sind die gesamte Beratung.' : 'We’re not a sub-practice inside a broader IT consultancy. We are the entire consultancy.'}
          </p>
        </div>
        <div className="wwdo-grid">
          {[
            { heading: isDe ? '01 — Beratung & CIAM-Strategie' : '01 — Consulting & CIAM strategy', items: col1, cls: 'wwdo-col wwdo-col--primary' },
            { heading: isDe ? '02 — Implementierung' : '02 — Implementation', items: col2, cls: 'wwdo-col wwdo-col--secondary' },
            { heading: isDe ? '03 — Managed Service & Post Go-Live' : '03 — Managed service & post go-live', items: col3, cls: 'wwdo-col wwdo-col--tertiary' },
          ].map(({ heading, items, cls }) => (
            <div key={heading} className={cls}>
              <div className="wwdo-col__heading">{heading}</div>
              <div className="wwdo-items">
                {items.map((item) => (
                  <div key={item.k}>
                    <div className="wwdo-item__header">
                      <span className="wwdo-item__key">{item.k}</span>
                      <span className="wwdo-item__title">{item.t}</span>
                    </div>
                    <p className="wwdo-item__desc">{item.d}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── WHO WE ARE ──────────────────────────────────────────────────────────────

function NewWhoWeAre({ t, locale }) {
  const isDe = locale === 'de';
  const pills = [
    'Okta Partner EMEA 2023',
    'Okta Partner EMEA 2024',
    'BSI C5 · DORA · eIDAS 2.0',
  ];
  const pillars = [
    {
      label: isDe ? 'Warum wir existieren' : 'Why we exist',
      heading: isDe ? 'Identity ist zu kritisch für Generalisten.' : 'Identity is too critical for generalists.',
      body: isDe
        ? 'Customer Identity ist längst keine IT-Unterkategorie mehr. Sie ist die Sicherheitsschicht jeder digitalen Beziehung zwischen Ihnen und Ihren Kunden — und damit zu kritisch, um sie nebenher zu betreiben. Wir haben uns von Anfang an entschieden, nichts anderes zu tun.'
        : 'Customer identity stopped being an IT subcategory a long time ago. It’s the security layer of every digital relationship you have with your customers — and far too critical to run on the side. We chose, from the start, to do nothing else.',
    },
    {
      label: isDe ? 'Wer wir sind' : 'Who we are',
      heading: isDe ? 'Internationales Team. Viele Sprachen. Ein Fokus.' : 'International team. Many languages. One focus.',
      body: isDe
        ? 'Aus Magdeburg heraus arbeiten wir als internationales Team in mehreren gesprochenen wie auch Programmiersprachen — wir lernen und entwickeln uns mit der Welt weiter. Identity-Spezialisten in Gommern, Magdeburg und Cluj-Napoca. Keine Bench, keine Juniors auf kritischen Pfaden, keine Rotation nach dem ersten Call. Okta Partner of the Year EMEA 2023 und 2024.'
        : 'Based in Magdeburg, we are an international team fluent in multiple spoken and programming languages — learning and adapting with the world. Identity specialists in Gommern, Magdeburg and Cluj-Napoca. No bench, no juniors on critical paths, no rotation after the first call. Okta Partner of the Year EMEA 2023 and 2024.',
    },
    {
      label: isDe ? 'Wie wir arbeiten' : 'How we work',
      heading: isDe ? 'Wir liefern Architektur, keine Folien.' : 'We deliver architecture, not decks.',
      body: isDe
        ? 'Senior Engineers nehmen Ihren ersten Anruf entgegen — und bleiben bis zum Go-Live und darüber hinaus an Ihrem Projekt. Wir entwerfen, bauen und betreiben in einem Team, ohne Hand-offs zwischen Strategie und Delivery. Eine Verantwortung. Ein Ergebnis.'
        : 'Senior engineers take your first call — and stay on the project through go-live and beyond. We design, build and operate as one team, with no hand-offs between strategy and delivery. One accountability. One outcome.',
    },
  ];
  return (
    <section className="who-section">
      <div className="who-section__inner">
        <div className="who-pills">
          {pills.map((p) => <span key={p} className="who-pill">{p}</span>)}
        </div>
        <div className="who-header">
          <h2 className="who-heading">
            {isDe ? 'Die Praxis hinter der Plattform.' : 'The practice behind the platform.'}
          </h2>
        </div>
        <div className="who-pillars">
          {pillars.map((p, i) => (
            <div key={i} className="pillar-card">
              <div className="pillar-card__label">{p.label}</div>
              <div className="pillar-card__heading">{p.heading}</div>
              <div className="pillar-card__body">{p.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CONTACT ─────────────────────────────────────────────────────────────────

function NewContact({ t, locale, onContact }) {
  const isDe = locale === 'de';
  const cards = [
    {
      icon: <I.globe />,
      title: isDe ? 'Schreiben Sie uns' : 'Write to us',
      sub: 'contact@oparco.de',
      desc: isDe
        ? 'Für Anfragen, Projektbriefings oder erste Fragen. Wir antworten innerhalb von 24 Stunden — mit einer Einschätzung, nicht mit einem Sales-Template.'
        : 'For inquiries, project briefings or initial questions. We reply within 24 hours — with a perspective, not a sales template.',
      cta: isDe ? 'E-Mail senden' : 'Send an email',
      href: 'mailto:contact@oparco.de',
    },
    {
      icon: <I.phone />,
      title: isDe ? 'Rufen Sie an' : 'Call us directly',
      sub: '+49 392 200183269',
      desc: isDe
        ? 'Direktleitung nach Gommern. Kein Call-Center, keine Warteschleife. Mo–Fr · 09:00–18:00 MEZ.'
        : 'Direct line to Gommern. No call centre, no hold music. Mon–Fri · 09:00–18:00 CET.',
      cta: isDe ? 'Jetzt anrufen' : 'Call now',
      href: 'tel:+493920171170',
    },
  ];
  return (
    <section className="contact-section">
      <div className="contact-section__inner">
        <div className="contact-section__header">
          <h2 className="contact-section__heading">
            {isDe ? 'Zwei Wege. Kein Umweg.' : 'Two ways in. No runaround.'}
          </h2>
          <p className="contact-section__sub">
            {isDe ? 'Jeder Weg führt direkt zu einem Senior-Spezialisten.' : 'Every path leads directly to a senior specialist.'}
          </p>
        </div>
        <div className="contact-cards">
          {cards.map((card, i) => (
            <div key={i} className="contact-card">
              <div className="contact-card__icon">{card.icon}</div>
              <div className="contact-card__title">{card.title}</div>
              <div className="contact-card__sub">{card.sub}</div>
              <div className="contact-card__desc">{card.desc}</div>
              {card.href
                ? <a href={card.href} className="contact-card__cta-link">{card.cta} <I.arrow /></a>
                : <button onClick={card.onClick} className="contact-card__cta-btn">{card.cta} <I.arrow /></button>
              }
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────

function NewFooter({ t, locale }) {
  const c = copy[locale].footer;
  const isDe = locale === 'de';
  const links = [c.imprint, c.privacy];
  return (
    <footer className="new-footer">
      <div className="new-footer__inner">
        <Logo t={t} size={22} />
        <div className="new-footer__links">
          {links.map((l, i) => {
            const href = l === c.privacy ? 'privacy.html' : l === c.imprint ? 'imprint.html' : '#';
            return (
              <React.Fragment key={l}>
                <a href={href} className="new-footer__link">{l}</a>
                {i < links.length - 1 && <span className="new-footer__sep">·</span>}
              </React.Fragment>
            );
          })}
        </div>
        <div className="new-footer__right">
          <span className="new-footer__badge">Okta Partner EMEA 2024</span>
          <span className="new-footer__status">
            <Dot color={t.signal || 'oklch(0.60 0.14 158)'} pulse /> {c.status}
          </span>
          <span className="new-footer__copy">© {new Date().getFullYear()} oparco GmbH</span>
        </div>
      </div>
    </footer>
  );
}

// ─── Embeddable body (used by boot.jsx inside the main App) ──────────────────

function NewBlocksBody({ t, locale, onContact }) {
  return (
    <div>
      <NewHero t={t} locale={locale} onContact={onContact} />
      <div id="what-we-do"><NewWhatWeDo t={t} locale={locale} /></div>
      <div id="who-we-are"><NewWhoWeAre t={t} locale={locale} /></div>
      <div id="contact-section"><NewContact t={t} locale={locale} onContact={onContact} /></div>
      <NewFooter t={t} locale={locale} />
    </div>
  );
}

// ─── Standalone page (used by review.html) ───────────────────────────────────

function NewBlocksPage() {
  const [locale, setLocale] = useLocale();
  const t = resolveTheme('B', true);
  const [contactOpen, setContactOpen] = React.useState(false);
  const onContact = () => setContactOpen(true);

  React.useEffect(() => {
    try {
      if (new URLSearchParams(window.location.search).get('subject')) setContactOpen(true);
    } catch (e) {}
  }, []);

  return (
    <div className="page-body">
      <NewBlocksBody t={t} locale={locale} onContact={onContact} />
      {contactOpen && <ContactModal t={t} locale={locale} open onClose={() => setContactOpen(false)} prefillMessage="" />}
    </div>
  );
}

Object.assign(window, { NewBlocksPage, NewBlocksBody, NewFooter });