// Shift10 Landingpage — Preise (3-card layout)
function PreiseSection() {
  const lp = useSanityLP();

  const fallbackProducts = [
    {
      name: "Keynote",
      eyebrow: "Impuls-Vortrag",
      duration: "20–30 Min.",
      participants: "Unbegrenzt",
      price: "CHF 1'500",
      priceNote: "zzgl. MwSt",
      featured: false,
      features: [
        "Live-Demo mit realen KI-Tools",
        "Vor Ort",
        "Massgeschneiderter Inhalt",
      ],
      cta: "Keynote anfragen",
    },
    {
      name: "Workshop",
      eyebrow: "2× Halbtag",
      duration: "2 Freitagnachmittage",
      participants: "Bis 12 Personen",
      price: "ab CHF 2'400",
      priceNote: "zzgl. MwSt",
      featured: true,
      features: [
        "Live-Demos + Hands-on Übungen",
        "1 Woche Testmaschine inklusive",
        "Coaching während dem Workshop",
        "Individuelle Use-Cases Ihres Teams"
      ],
      cta: "Workshop buchen",
    },
    {
      name: "Konzepte & Enabling",
      eyebrow: "Optional · Add-on",
      duration: "Ab 1 Woche",
      participants: "Team intern",
      price: "ab CHF 300 / Tag",
      priceNote: "zzgl. MwSt",
      featured: false,
      features: [
        "KI-Readiness Assessment",
        "Individuelle KI-Roadmap",
        "Enabling-Massnahmen definieren",
        "Stakeholder-Kommunikation",
        "Massgeschneidert auf Ihr Team",
      ],
      cta: "Mehr erfahren",
    },
  ];

  const products = lp?.preiseProducts?.length >= 3 ? lp.preiseProducts.map((p, i) => ({
    ...fallbackProducts[i],
    ...p,
    features: p.features?.length ? p.features : fallbackProducts[i]?.features,
    featured: i === 1,
  })) : fallbackProducts;

  return (
    <section id="preise" className="section">
      <div className="container">
        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <span className="eyebrow">Preise · Transparent</span>
          <h2 className="display display--md" style={{ marginTop: 24, fontWeight: 500, maxWidth: 640, marginInline: "auto" }}>
            Klare Preise.<br />
            <em style={{ fontStyle: "normal", color: "var(--color-accent)" }}>Keine Überraschungen.</em>
          </h2>
          <p className="lead" style={{ marginTop: 20, maxWidth: 560, marginInline: "auto" }}>
            Alle Angebote in Schweizer Franken, ohne Kleingedrucktes. Ihr bekommt genau das, was ihr bucht — massgeschneidert, transparent und mit vollem Fokus auf euren Nutzen.
          </p>
        </div>

        {/* Cards */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 0,
          alignItems: "stretch",
          border: "1px solid var(--color-neutral-200)",
        }}>
          {products.map((p, i) => {
            const featured = p.featured;
            return (
              <div key={i} style={{
                padding: "40px 32px 36px",
                background: featured ? "var(--color-black)" : "var(--color-white)",
                borderLeft: i === 0 ? "none" : "1px solid var(--color-neutral-200)",
                display: "flex",
                flexDirection: "column",
                position: "relative",
              }}>
                {/* Featured badge */}
                {featured && (
                  <div style={{
                    position: "absolute",
                    top: -1,
                    left: "50%",
                    transform: "translateX(-50%)",
                    background: "var(--color-accent)",
                    color: "var(--color-white)",
                    fontFamily: "var(--font-mono)",
                    fontSize: 10,
                    letterSpacing: "0.18em",
                    textTransform: "uppercase",
                    padding: "5px 14px",
                  }}>
                    Empfohlen
                  </div>
                )}

                {/* Eyebrow */}
                <div style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 10,
                  letterSpacing: "0.18em",
                  textTransform: "uppercase",
                  color: featured ? "var(--color-accent)" : "var(--color-neutral-500)",
                  marginBottom: 12,
                }}>
                  {p.eyebrow}
                </div>

                {/* Name */}
                <div style={{
                  fontFamily: "var(--font-display)",
                  fontSize: 24,
                  fontWeight: 600,
                  letterSpacing: "-0.02em",
                  color: featured ? "var(--color-white)" : "var(--color-black)",
                  marginBottom: 4,
                }}>
                  {p.name}
                </div>

                {/* Meta */}
                <div style={{
                  fontFamily: "var(--font-body)",
                  fontSize: 13,
                  color: featured ? "rgba(255,255,255,0.5)" : "var(--color-neutral-500)",
                  marginBottom: 32,
                }}>
                  {p.duration} · {p.participants}
                </div>

                {/* Price */}
                <div style={{ marginBottom: 32 }}>
                  {i === 2 ? (
                    <div style={{
                      fontFamily: "var(--font-mono)",
                      fontSize: 11,
                      letterSpacing: "0.16em",
                      textTransform: "uppercase",
                      color: "var(--color-neutral-500)",
                    }}>
                      Preis auf Anfrage
                    </div>
                  ) : (
                    <>
                      <div style={{
                        fontFamily: "var(--font-display)",
                        fontSize: 34,
                        fontWeight: 700,
                        letterSpacing: "-0.035em",
                        color: featured ? "var(--color-white)" : "var(--color-black)",
                        lineHeight: 1,
                      }}>
                        {p.price}
                      </div>
                      <div style={{
                        fontFamily: "var(--font-mono)",
                        fontSize: 11,
                        letterSpacing: "0.1em",
                        color: featured ? "rgba(255,255,255,0.4)" : "var(--color-neutral-400)",
                        marginTop: 6,
                      }}>
                        {p.priceNote}
                      </div>
                    </>
                  )}
                </div>

                {/* Divider */}
                <div style={{
                  height: 1,
                  background: featured ? "rgba(255,255,255,0.1)" : "var(--color-neutral-200)",
                  marginBottom: 28,
                }} />

                {/* Features */}
                <ul style={{
                  listStyle: "none",
                  padding: 0,
                  margin: "0 0 36px",
                  display: "flex",
                  flexDirection: "column",
                  gap: 12,
                  flex: 1,
                }}>
                  {(p.features || []).map((f, fi) => (
                    <li key={fi} style={{
                      display: "flex",
                      alignItems: "flex-start",
                      gap: 10,
                      fontFamily: "var(--font-body)",
                      fontSize: 14,
                      color: featured ? "rgba(255,255,255,0.75)" : "var(--color-neutral-700)",
                      lineHeight: 1.4,
                    }}>
                      <span style={{
                        color: "var(--color-accent)",
                        fontWeight: 700,
                        fontSize: 15,
                        lineHeight: 1.4,
                        flexShrink: 0,
                      }}>✓</span>
                      {f}
                    </li>
                  ))}
                </ul>

                {/* CTA */}
                <a href="#kontakt" style={{
                  display: "block",
                  textAlign: "center",
                  padding: "13px 24px",
                  fontFamily: "var(--font-body)",
                  fontSize: 14,
                  fontWeight: 500,
                  letterSpacing: "0.01em",
                  textDecoration: "none",
                  background: featured ? "var(--color-accent)" : "transparent",
                  color: featured ? "var(--color-white)" : "var(--color-black)",
                  border: featured ? "none" : "1px solid var(--color-neutral-300)",
                  transition: "background 200ms, color 200ms, border-color 200ms",
                }}
                  onMouseEnter={(e) => {
                    if (!featured) {
                      e.currentTarget.style.borderColor = "var(--color-black)";
                      e.currentTarget.style.background = "var(--color-neutral-50)";
                    } else {
                      e.currentTarget.style.background = "#e04400";
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (!featured) {
                      e.currentTarget.style.borderColor = "var(--color-neutral-300)";
                      e.currentTarget.style.background = "transparent";
                    } else {
                      e.currentTarget.style.background = "var(--color-accent)";
                    }
                  }}
                >
                  {p.cta} →
                </a>
              </div>
            );
          })}
        </div>

        {/* Footer note */}
        <div className="mono" style={{ marginTop: 24, fontSize: 12, color: "var(--color-neutral-400)", letterSpacing: "0.06em" }}>
          // Stand: Mai 2026 · Alle Preise zzgl. MwSt
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PreiseSection });