/* tenant/ops_ -- Home page.
   Sections: Hero (split with AgentThreadMock) -> HowItWorks (3-step)
   -> WhoItsFor -> FinalCTA.
   All text is bilingual DE/EN; language is passed as prop from SiteShell. */

const LINKEDIN = "https://www.linkedin.com/in/simon-lenz-prosec/";

/* ── Hero ─────────────────────────────────────────────────────── */
function Hero({ pal, lang }) {
  const content = {
    de: {
      eyebrow: "M365-VERWALTUNG NEU GEDACHT",
      h1: "Dein M365-Tenant. Ein Portal. Ein KI-Admin, der dich unterstützt.",
      sub: "tenant/ops_ vereint Exchange, SharePoint, Intune, Entra ID und Teams in einer Oberfläche. Dein KI-Admin unterstützt bei den täglichen Aufgaben -- du behältst die Kontrolle.",
      cta: "Kontakt aufnehmen",
    },
    en: {
      eyebrow: "M365 ADMINISTRATION REIMAGINED",
      h1: "Your M365 tenant. One portal. An AI admin that supports you.",
      sub: "tenant/ops_ brings Exchange, SharePoint, Intune, Entra ID, and Teams into one surface. Your AI admin assists with daily tasks -- you stay in control.",
      cta: "Get in touch",
    },
  };
  const t = content[lang] || content.de;
  return (
    <section className="section section--flush">
      <div className="container">
        <div className="split" style={{ padding: "76px 0 88px", alignItems: "center" }}>
          <div className="rise" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <span className="eyebrow" style={{ color: pal.accentDeep }}>{t.eyebrow}</span>
            <h1 style={{ margin: 0, fontWeight: 600, fontSize: 52, letterSpacing: "-0.028em", lineHeight: 1.04, color: pal.fg, textWrap: "balance" }}>
              {t.h1}
            </h1>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.6, color: pal.fgMuted, maxWidth: 520 }}>
              {t.sub}
            </p>
            <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 4 }}>
              <a
                className="btn btn--primary btn--lg"
                href={LINKEDIN}
                target="_blank"
                rel="noopener noreferrer"
              >
                {t.cta}
              </a>
            </div>
          </div>
          <div className="split__media rise" style={{ animationDelay: ".08s" }}>
            <AgentThreadMock pal={pal} />
            <div style={{ marginTop: 12 }}>
              <span className="eyebrow" style={{ color: pal.fgFaint, fontSize: 10.5 }}>
                fig.01 · ops agent · ask, preview, approve
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── HowItWorks ───────────────────────────────────────────────── */
function HowItWorks({ pal, lang }) {
  const content = {
    de: {
      eyebrow: "Wie es funktioniert",
      title: "Fragen, Vorschau, Freigabe.",
      sub: "Drei Schritte, ein klarer Ablauf. Der Standardzustand ist der sichere Zustand -- Änderungen erfordern immer eine explizite Freigabe.",
      steps: [
        {
          n: "01",
          t: "Fragen",
          d: "Beschreib deine Aufgabe in natürlicher Sprache. Der Agent aktiviert nur die Tools, die dafür nötig sind -- jede Berechtigung wird transparent angezeigt.",
        },
        {
          n: "02",
          t: "Vorschau",
          d: "Nichts passiert auf Verdacht. Vor jeder Änderung siehst du exakt, was sich ändert -- Feld für Feld. Kein Schreibzugriff ohne deine Freigabe.",
        },
        {
          n: "03",
          t: "Freigabe",
          d: "Du entscheidest. Bestätigen oder ablehnen, mit einem signierten Protokoll, das die Änderung dokumentiert.",
        },
      ],
    },
    en: {
      eyebrow: "How it works",
      title: "Ask, preview, approve.",
      sub: "Three steps, one clear flow. The default state is the safe state -- changes always require explicit approval.",
      steps: [
        {
          n: "01",
          t: "Ask",
          d: "Describe what you need in plain language. The agent activates only the tools it needs -- every permission is shown transparently.",
        },
        {
          n: "02",
          t: "Preview",
          d: "Nothing happens on a guess. Before every change, you see exactly what will change -- field by field. No write access without your approval.",
        },
        {
          n: "03",
          t: "Approve",
          d: "You decide. Approve or decline, with a signed audit trail that documents the change.",
        },
      ],
    },
  };
  const c = content[lang] || content.de;
  return (
    <Section id="how" panel>
      <SectionHead eyebrow={c.eyebrow} title={c.title} sub={c.sub} />
      <div className="grid grid--3" style={{ marginTop: 44 }}>
        {c.steps.map((s) => (
          <div key={s.n} style={{ display: "flex", flexDirection: "column", gap: 12, paddingTop: 22, borderTop: "1px solid " + pal.border }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
              <span style={{ fontFamily: MK_TYPE.mono, fontSize: 13, fontWeight: 500, color: pal.accent, letterSpacing: "0.04em" }}>{s.n}</span>
              <h3 style={{ margin: 0, fontSize: 20, fontWeight: 600, letterSpacing: "-0.015em", color: pal.fg }}>{s.t}</h3>
            </div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.65, color: pal.fgMuted }}>{s.d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

/* ── WhoItsFor ────────────────────────────────────────────────── */
function WhoItsFor({ pal, lang }) {
  const content = {
    de: {
      eyebrow: "FÜR WEN",
      text: "Für IT-Teams, die M365 verwalten und keine Zeit für 7 Admin-Portale und PowerShell-Skripte haben. tenant/ops_ macht dein Team handlungsfähiger -- ohne zusätzliche Komplexität.",
    },
    en: {
      eyebrow: "WHO IT'S FOR",
      text: "For IT teams managing M365 who don't have time for 7 admin portals and PowerShell scripts. tenant/ops_ makes your team more capable -- without added complexity.",
    },
  };
  const t = content[lang] || content.de;
  return (
    <Section id="who">
      <div style={{ maxWidth: 720 }}>
        <span className="eyebrow">{t.eyebrow}</span>
        <p style={{ margin: "20px 0 0", fontSize: 22, lineHeight: 1.55, color: pal.fg, fontWeight: 400, letterSpacing: "-0.012em" }}>
          {t.text}
        </p>
      </div>
    </Section>
  );
}

/* ── FinalCTA ─────────────────────────────────────────────────── */
function FinalCTA({ pal, lang }) {
  const content = {
    de: {
      eyebrow: "NÄCHSTER SCHRITT",
      h2: "Aktuell suchen wir Design-Partner.",
      text: "Du verwaltest einen M365-Tenant und willst sehen, was tenant/ops_ kann? Wir suchen IT-Teams, die das Tool im Alltag testen und uns Feedback geben.",
      cta: "Auf LinkedIn kontaktieren",
    },
    en: {
      eyebrow: "NEXT STEP",
      h2: "Currently looking for design partners.",
      text: "You manage an M365 tenant and want to see what tenant/ops_ can do? We're looking for IT teams to test the product in their day-to-day and give us feedback.",
      cta: "Connect on LinkedIn",
    },
  };
  const t = content[lang] || content.de;
  return (
    <Section id="contact" panel>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, flexWrap: "wrap" }}>
        <div style={{ maxWidth: 560 }}>
          <span className="eyebrow">{t.eyebrow}</span>
          <h2 className="sec-title" style={{ margin: "14px 0 16px" }}>{t.h2}</h2>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: pal.fgMuted }}>{t.text}</p>
        </div>
        <a
          className="btn btn--primary btn--lg"
          href={LINKEDIN}
          target="_blank"
          rel="noopener noreferrer"
        >
          {t.cta}
        </a>
      </div>
    </Section>
  );
}

/* ── HomePage root ────────────────────────────────────────────── */
function HomePage() {
  return (
    <SiteShell>
      {(pal, lang) => (
        <React.Fragment>
          <Hero pal={pal} lang={lang} />
          <HowItWorks pal={pal} lang={lang} />
          <WhoItsFor pal={pal} lang={lang} />
          <FinalCTA pal={pal} lang={lang} />
        </React.Fragment>
      )}
    </SiteShell>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomePage />);