// Pricing page

const Faq = ({ q, children }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{
      borderBottom: "1px solid var(--border)",
      padding: "20px 0",
      cursor: "pointer"
    }} onClick={() => setOpen(!open)}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 16, color: "var(--text)", fontWeight: 500 }}>{q}</div>
        <div style={{ color: "var(--text-3)", transform: open ? "rotate(45deg)" : "none", transition: "transform 0.2s" }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </div>
      </div>
      {open &&
      <div style={{ marginTop: 12, color: "var(--text-2)", fontSize: 14, lineHeight: 1.6, maxWidth: 720 }}>
          {children}
        </div>
      }
    </div>);

};

const Plan = ({ name, tagline, price, suffix, meters, meterLabel, features, cta, ctaStyle, ctaHref, highlighted, badge, billing, subnote }) =>
<div style={{
  background: highlighted ?
  "linear-gradient(180deg, rgba(167,139,250,0.10), rgba(167,139,250,0.02))" :
  "var(--surface)",
  border: highlighted ? "1px solid var(--accent-ring)" : "1px solid var(--border)",
  borderRadius: "var(--radius-lg)",
  padding: "36px 32px",
  position: "relative",
  display: "flex", flexDirection: "column",
  boxShadow: highlighted ? "0 30px 80px -30px rgba(167,139,250,0.25)" : "none"
}}>
    {badge &&
  <div style={{
    position: "absolute", top: 18, right: 18,
    background: "var(--accent)", color: "#1a1033",
    padding: "4px 10px", borderRadius: 999,
    fontSize: 11, fontWeight: 600, letterSpacing: "0.04em"
  }}>{badge}</div>
  }
    <div style={{ marginBottom: 24 }}>
      <div style={{
      fontSize: 13, color: highlighted ? "var(--accent)" : "var(--text-3)",
      textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600,
      marginBottom: 12
    }}>{name}</div>
      <div style={{ fontSize: 14, color: "var(--text-2)", lineHeight: 1.5, minHeight: 44 }}>
        {tagline}
      </div>
    </div>

    <div style={{ marginBottom: 8 }}>
      <span style={{ fontSize: 56, fontWeight: 600, letterSpacing: "-0.04em", color: "var(--text)" }}>
        {price}
      </span>
      {suffix && <span style={{ color: "var(--text-3)", fontSize: 16, marginLeft: 4 }}>{suffix}</span>}
    </div>
    <div style={{ color: "var(--text-3)", fontSize: 13, marginBottom: 28 }}>
      {price === "0" ? "Kostenlos" : (subnote ? subnote + " · " : "") + (billing === "yearly" ? "jährlich abgerechnet" : "monatlich abgerechnet")}
    </div>

    <a href={ctaHref || "#"} {...(ctaHref && /^https?:/.test(ctaHref) ? { target: "_blank", rel: "noopener noreferrer" } : {})} className={`btn ${ctaStyle} btn-lg`} style={{ width: "100%", marginBottom: 28 }}>
      {cta}
    </a>

    <div style={{
    padding: "12px 14px",
    background: "rgba(255,255,255,0.03)",
    border: "1px solid var(--border)",
    borderRadius: 10,
    marginBottom: 24,
    display: "flex", alignItems: "center", gap: 10
  }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2">
        <path d="M3 12h4l3-8 4 16 3-8h4" />
      </svg>
      <span style={{ fontSize: 13, color: "var(--text-2)" }}>
        <span style={{ color: "var(--text)", fontWeight: 600 }}>{meters}</span> {meterLabel || "Inspektion / Monat"}
      </span>
    </div>

    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
      {features.map((f, i) =>
    <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, color: "var(--text-2)", lineHeight: 1.5 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={highlighted ? "var(--accent)" : "var(--text)"} strokeWidth="2.5" style={{ flexShrink: 0, marginTop: 4 }}>
            <polyline points="20 6 9 17 4 12" />
          </svg>
          <span>{f}</span>
        </li>
    )}
    </ul>
  </div>;


const PricingPage = ({ highlighted }) => {
  const [billing, setBilling] = React.useState("yearly");
  const yearlyDiscount = 0.2;

  const formatPrice = (p) => {
    if (!p || p.monthly === 0) return "0";
    const v = billing === "yearly" ? p.yearly : p.monthly;
    return v.toLocaleString("de-DE");
  };

  const plans = [
  {
    key: "free",
    name: "FREE",
    tagline: "Sieh dir an, wozu KI in der Lage ist. Ideal für den Einstieg und zum Testen.",
    monthly: 0,
    meters: "5",
    meterLabel: "Inspektionen / Monat",
    features: [
    "Fortgeschrittene Modelle",
    "Web-Dashboard, Dark Mode",
    "SSO (Microsoft, Google)"],

    cta: "Ausprobieren",
    ctaStyle: "btn-primary",
    ctaHref: "https://app.expandai.de/register"
  },
  {
    key: "pro",
    name: "PRO",
    tagline: "Für einzelne Inspekteure und kleine Teams. Voller Funktionsumfang.",
    subnote: { monthly: "0,50 € / Meter", yearly: "0,40 € / Meter" },
    monthly: 750,
    yearly: 600,
    meters: "1.500 m",
    features: [
    "Alles aus FREE",
    "Mehr Uploads",
    "Inspektionsbericht mit eigenem Logo",
    "Zugriff auf Admin Funktionen"],

    cta: "PRO holen",
    ctaStyle: "btn-accent",
    ctaHref: "https://app.expandai.de/register",
    badge: "Beliebt"
  },
  {
    key: "max",
    name: "MAX",
    tagline: "Für Inspektionsfirmen und Stadtwerke mit hohem Volumen.",
    subnote: { monthly: "0,35 € / Meter", yearly: "0,28 € / Meter" },
    monthly: 1750,
    yearly: 1400,
    meters: "5.000 m",
    features: [
    "Alles aus PRO",
    "Deutlich mehr Volumen"],

    cta: "MAX holen",
    ctaStyle: "btn-primary",
    ctaHref: "https://app.expandai.de/register"
  }];


  return (
    <>
      <Nav current="pricing" />
      <section style={{ padding: "120px 0 48px", position: "relative", overflow: "hidden" }}>
        <div aria-hidden style={{
          position: "absolute", left: "50%", top: -160,
          width: 800, height: 500, transform: "translateX(-50%)",
          background: "radial-gradient(ellipse at center, rgba(167,139,250,0.16), rgba(167,139,250,0) 60%)",
          pointerEvents: "none"
        }} />
        <div className="container" style={{ textAlign: "center", position: "relative" }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>
            <span className="dot" /> Transparente Preise
          </div>
          <h1 className="h1 gradient-text" style={{ marginBottom: 20, fontSize: "clamp(40px, 5.5vw, 76px)" }}>
            Bezahle, was du<br />wirklich inspizierst.
          </h1>
          <p className="lead" style={{ maxWidth: 580, margin: "0 auto 40px" }}>
            Kein Anschaffungspreis,
            keine Mindestlaufzeit, jederzeit kündbar.
          </p>

          {/* Billing toggle */}
          <div style={{
            display: "inline-flex", padding: 4,
            background: "var(--surface)",
            border: "1px solid var(--border)",
            borderRadius: 999,
            marginBottom: 56
          }}>
            {[
            { k: "monthly", l: "Monatlich" },
            { k: "yearly", l: "Jährlich −20 %" }].
            map((o) =>
            <button key={o.k} onClick={() => setBilling(o.k)} style={{
              background: billing === o.k ? "var(--text)" : "transparent",
              color: billing === o.k ? "#0a0a0a" : "var(--text-2)",
              border: "none", padding: "8px 18px", borderRadius: 999,
              fontSize: 13, fontWeight: 500, fontFamily: "inherit",
              transition: "all 0.15s"
            }}>{o.l}</button>
            )}
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, alignItems: "stretch" }}>
            {plans.map((p) =>
            <Plan
              key={p.key}
              name={p.name}
              tagline={p.tagline}
              price={formatPrice(p)}
              suffix={"€ / Monat"}
              meters={p.meters}
              meterLabel={p.meterLabel}
              features={p.features}
              cta={p.cta}
              ctaStyle={p.ctaStyle}
              ctaHref={p.ctaHref}
              subnote={p.subnote ? (typeof p.subnote === "object" ? p.subnote[billing] : p.subnote) : undefined}
              badge={p.badge}
              highlighted={highlighted === p.key}
              billing={billing} />

            )}
          </div>

          <div style={{
            marginTop: 24, textAlign: "center",
            color: "var(--text-3)", fontSize: 13
          }}>
            Alle Preise zzgl. MwSt. · Bezahlung per Kreditkarte oder SEPA-Lastschrift
          </div>
        </div>
      </section>

      {/* Comparison table */}
      <section className="section section-divider">
        <div className="container">
          <h2 className="h2 gradient-text" style={{ textAlign: "center", marginBottom: 48 }}>
            Detaillierter Vergleich
          </h2>
          <div className="cmp-table-wrap" style={{
            border: "1px solid var(--border)", borderRadius: "var(--radius-lg)",
            overflow: "hidden"
          }}>
            <ComparisonTable highlighted={highlighted} />
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section-divider">
        <div className="container" style={{ maxWidth: 840 }}>
          <h2 className="h2 gradient-text" style={{ textAlign: "center", marginBottom: 16 }}>
            Häufige Fragen
          </h2>
          <p className="lead" style={{ textAlign: "center", marginBottom: 48 }}>
            Noch unklar? Schreib uns — wir antworten innerhalb von 24 Stunden.
          </p>
          <div>
            <Faq q="Was passiert, wenn ich mein wöchentliches Limit überschreite?">
              Wir informieren dich rechtzeitig, bevor dein Kontingent aufgebraucht ist. Du kannst jederzeit in einen größeren Tarif (z. B. MAX) wechseln.
            </Faq>
            <Faq q="Wie wird die Inspektionsstrecke gemessen?">
              expandAI liest die zurückgelegte Strecke direkt aus deinen Inspektionsdaten (Zähler oder XML). Es zählt jeder real inspizierte Meter. Pausen und Rückwärtsfahrten werden nicht doppelt berechnet.
            </Faq>
            <Faq q="Kann ich jederzeit kündigen?">
              Ja. Monatliche Pläne sind monatlich kündbar, jährliche Pläne zum Ende der Laufzeit. Kein Kleingedrucktes,
              keine Stornogebühren.
            </Faq>
            <Faq q="Wo werden meine Daten gespeichert?">
              Alle Inspektionsdaten liegen verschlüsselt in deutschen Rechenzentren (nach DSGVO).
            </Faq>
          </div>
        </div>
      </section>

      <Footer />
    </>);

};

const Cell = ({ children, head, mono }) =>
<td style={{
  padding: "16px 20px",
  borderTop: "1px solid var(--border)",
  fontSize: 14,
  color: head ? "var(--text)" : "var(--text-2)",
  fontWeight: head ? 500 : 400,
  fontFamily: mono ? "JetBrains Mono, monospace" : "inherit",
  textAlign: head ? "left" : "center"
}}>{children}</td>;


const Check = ({ on, accent }) => on ?
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={accent ? "var(--accent)" : "var(--text)"} strokeWidth="2.5" style={{ display: "inline-block" }}>
    <polyline points="20 6 9 17 4 12" />
  </svg> :
<span style={{ color: "var(--text-4)" }}>—</span>;

const ComparisonTable = ({ highlighted }) => {
  const headerStyle = (key) => ({
    padding: "20px",
    fontSize: 14, fontWeight: 600, color: "var(--text)",
    textAlign: "center",
    background: highlighted === key ? "rgba(167,139,250,0.06)" : "transparent",
    borderLeft: "1px solid var(--border)",
    position: "relative"
  });
  return (
    <table style={{ width: "100%", borderCollapse: "collapse" }}>
      <thead>
        <tr>
          <th style={{ padding: "20px", fontSize: 12, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.12em", textAlign: "left", fontWeight: 500 }}>Funktion</th>
          <th style={headerStyle("free")}>FREE</th>
          <th style={{ ...headerStyle("pro"), color: highlighted === "pro" ? "var(--accent)" : "var(--text)" }}>PRO</th>
          <th style={{ ...headerStyle("max"), color: highlighted === "max" ? "var(--accent)" : "var(--text)" }}>MAX</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <Cell head>Inspektion / Monat</Cell>
          <Cell mono>5</Cell>
          <Cell mono>1.500 m</Cell>
          <Cell mono>5.000 m</Cell>
        </tr>
        <tr>
          <Cell head>Fortgeschrittene Modelle</Cell>
          <Cell><Check on /></Cell>
          <Cell><Check on accent={highlighted === "pro"} /></Cell>
          <Cell><Check on accent={highlighted === "max"} /></Cell>
        </tr>
        <tr>
          <Cell head>DWA-M 149-2 Import & Export</Cell>
          <Cell><Check on /></Cell>
          <Cell><Check on accent={highlighted === "pro"} /></Cell>
          <Cell><Check on accent={highlighted === "max"} /></Cell>
        </tr>
        <tr>
          <Cell head>Isybau2013 and 2017 Import & Export</Cell>
          <Cell><Check on /></Cell>
          <Cell><Check on accent={highlighted === "pro"} /></Cell>
          <Cell><Check on accent={highlighted === "max"} /></Cell>
        </tr>
        <tr>
          <Cell head>SSO (Microsoft, Google)</Cell>
          <Cell><Check on /></Cell>
          <Cell><Check on accent={highlighted === "pro"} /></Cell>
          <Cell><Check on accent={highlighted === "max"} /></Cell>
        </tr>
        <tr>
          <Cell head>PDF-Bericht mit eigenem Logo</Cell>
          <Cell><Check on={false} /></Cell>
          <Cell><Check on accent={highlighted === "pro"} /></Cell>
          <Cell><Check on accent={highlighted === "max"} /></Cell>
        </tr>
        <tr>
          <Cell head>Account-Manager</Cell>
          <Cell><Check on={false} /></Cell>
          <Cell><Check on accent={highlighted === "pro"} /></Cell>
          <Cell><Check on accent={highlighted === "max"} /></Cell>
        </tr>
        <tr>
          <Cell head>Speicherort</Cell>
          <Cell>DE</Cell>
          <Cell>DE</Cell>
          <Cell>DE</Cell>
        </tr>
      </tbody>
    </table>);

};

Object.assign(window, { PricingPage });