const LIGHT = { fontWeight: 300, letterSpacing: "0.01em" };

const STEPS = [
  ["Wein finden", "Die Liste ist nach den acht Tischen am Event geordnet. Über die Kategorien springst du direkt zum Tisch, über die Suche findest du einen Wein nach Name, Nummer oder Land."],
  ["Wein öffnen", "Tippe auf eine Zeile. Sie klappt auf und zeigt Herkunft, Jahrgang, Art.-Nr. und Preis."],
  ["Merken", "Merken legt den Wein auf deine Merkliste. Die erreichst du jederzeit über das Lesezeichen oben im Header."],
  ["Bewerten und notieren", "Sterne für dein Urteil, das Notizfeld für alles, was dir aufgefallen ist. Beides bleibt auf diesem Gerät gespeichert."],
  ["In den Warenkorb", "Menge wählen und in den Warenkorb legen. Auf jede Flasche gilt der Festival-Rabatt von 20 %."],
  ["Bestellen", "Im Warenkorb wählst du Lieferung oder Abholung und gibst deine Adresse ein. Bezahlt wird nicht in der App, die Rechnung folgt per Post."],
];

function HelpView({ onBack }) {
  const wrap = window.TDOF_WRAP;
  const { TdofH1: H1, TdofH2: H2, TdofPrimaryButton: PrimaryButton } = window;
  return (
    <div style={{ ...wrap, paddingTop: 22, paddingBottom: 48 }}>
      <H1>So funktioniert die App</H1>
      <p style={{ margin: "0 0 30px", fontSize: 16, lineHeight: 1.5, color: "var(--edvin-gray-900)" }}>
        Ganz einfach in sechs Schritten.
      </p>

      <ol style={{ listStyle: "none", margin: "0 0 40px", padding: 0 }}>
        {STEPS.map(([title, body], i) => (
          <li key={title} style={{ display: "flex", gap: 16, padding: "18px 0", borderTop: "0.5px solid rgba(0,0,0,0.14)" }}>
            <span style={{ flex: "0 0 26px", fontSize: 24, lineHeight: 1, color: "var(--edvin-green)", fontVariantNumeric: "tabular-nums", ...LIGHT }}>{i + 1}</span>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={{ display: "block", fontSize: 16, lineHeight: 1.2, textTransform: "uppercase", letterSpacing: ".04em", marginBottom: 7 }}>{title}</span>
              <span style={{ display: "block", fontSize: 15, lineHeight: 1.55, color: "var(--edvin-gray-900)" }}>{body}</span>
            </span>
          </li>
        ))}
      </ol>

      <section style={{ marginBottom: 36 }}>
        <H2>Konditionen</H2>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "var(--edvin-gray-900)" }}>
          20 % Festival-Rabatt auf jede Flasche, nur am Event. Versandkosten CHF 9.90 pauschal,
          ab CHF 180.– gratis. Abholung ab Mi, 10. Dezember. Nicht mit Monatsaktionen kumulierbar.
        </p>
      </section>

      <PrimaryButton tone="green" onClick={onBack}>Zur Weinliste</PrimaryButton>
    </div>
  );
}

Object.assign(window, { TdofHelpView: HelpView });