/* global React, ReactDOM, Nav, Footer, useReveal, SectionHeader, useState, fireConfetti */

const TIERS = [
  {
    id: "video",
    name: "Video-Hilfe",
    price: "7,90",
    sub: "pauschal pro gelöstes Problem",
    desc: "Sie teilen Ihren Bildschirm — ich führe Sie zur Lösung. Funktioniert für 90% aller Software-Probleme.",
    badge: "Empfohlen",
    highlight: true,
    icon: "video",
    features: [
      { t: "Termin via WhatsApp, E-Mail oder Formular", on: true },
      { t: "FaceTime, Jitsi oder Google Meet — keine App nötig", on: true },
      { t: "Bildschirm teilen (iPhone, Android, PC, Mac)", on: true },
      { t: "Erklärung & Notizen zum Mitlesen", on: true },
      { t: "Überall verfügbar — nur Internet nötig", on: true },
      { t: "Hardware-Probleme", on: false },
    ],
  },
  {
    id: "onsite",
    name: "Vor Ort",
    price: "14,90",
    sub: "pauschal pro gelöstes Problem",
    desc: "Wenn Video nicht reicht — z.B. neuer Router, Drucker einrichten, Smart-TV einrichten oder Sie sind technisch unsicher.",
    badge: "Bodensee",
    icon: "house",
    features: [
      { t: "Persönlich bei Ihnen zu Hause", on: true },
      { t: "Radolfzell · Böhringen · Markelfingen · Allensbach", on: true },
      { t: "Keine Anfahrtskosten im Gebiet", on: true },
      { t: "Einweisung in das was wir gemacht haben", on: true },
      { t: "Hardware-Diagnose vor Ort möglich", on: true },
      { t: "Größere Reparaturen (siehe Hardware)", on: false },
    ],
  },
  {
    id: "hardware",
    name: "Hardware",
    price: "Angebot",
    sub: "Diagnose 9,90 € — wird verrechnet",
    desc: "Für Akku-Tausch, Display-Reparatur, Datenrettung und größere Aufgaben. Ich vermittle den passenden Service.",
    badge: "Auf Anfrage",
    icon: "wrench",
    features: [
      { t: "Diagnose: 9,90 € (bei Auftrag verrechnet)", on: true },
      { t: "Fester Kostenvoranschlag vorher", on: true },
      { t: "Empfehlung für vertrauenswürdige Reparaturshops", on: true },
      { t: "Datenrettung nach Aufwand", on: true },
      { t: "Begleitung durch den Reparatur-Prozess", on: true },
      { t: "Keine versteckten Kosten", on: true },
    ],
  },
];

function PreisePage() {
  return (
    <>
      <Nav />
      <main>
        <PriceHero />
        <PriceTiers />
        <Comparison />
        <PaymentMethods />
        <PriceFAQ />
        <BottomCTA />
      </main>
      <Footer />
    </>
  );
}

function PriceHero() {
  return (
    <section style={{ position: "relative", paddingTop: 160, paddingBottom: 60, overflow: "hidden" }}>
      <div className="blob" style={{ width: 500, height: 500, background: "#a78bfa", top: -100, left: -150, opacity: 0.3 }} />
      <div className="blob" style={{ width: 500, height: 500, background: "#f9a8d4", top: 60, right: -200, opacity: 0.3 }} />

      <div className="wrap" style={{ position: "relative", textAlign: "center" }}>
        <span className="pill pill-grad" style={{ marginBottom: 24 }}>Preise & Zahlung</span>
        <h1 className="hero-fade" style={{
          fontSize: "clamp(48px, 8vw, 110px)",
          fontWeight: 600,
          letterSpacing: "-0.05em",
          lineHeight: 0.95,
          marginBottom: 24,
          textWrap: "balance",
        }}>
          Drei Preise.<br />
          <span className="ital grad-text">Keine Überraschungen.</span>
        </h1>
        <p style={{
          fontSize: "clamp(18px, 1.9vw, 22px)",
          color: "var(--muted)",
          maxWidth: 620,
          margin: "0 auto",
          lineHeight: 1.45,
        }}>
          Sie wissen vorher genau was es kostet — und zahlen nur wenn ich das Problem wirklich löse.
        </p>
        <style>{`
          .hero-fade {
            opacity: 0;
            transform: translateY(20px);
            animation: hero-in 1s cubic-bezier(.22,.61,.36,1) forwards;
          }
          @keyframes hero-in {
            to { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </div>
    </section>
  );
}

function PriceTiers() {
  return (
    <section className="section" style={{ paddingTop: 40 }}>
      <div className="wrap">
        <div className="tiers-grid">
          {TIERS.map((t, i) => <Tier key={t.id} {...t} index={i} />)}
        </div>
      </div>
      <style>{`
        .tiers-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 18px;
          align-items: stretch;
        }
        @media (max-width: 980px) { .tiers-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; } }
      `}</style>
    </section>
  );
}

function Tier({ id, name, price, sub, desc, badge, highlight, icon, features, index }) {
  const ref = useReveal();
  return (
    <div ref={ref} className={"reveal reveal-delay-" + (index + 1)} style={{
      position: "relative",
      background: highlight ? "linear-gradient(180deg, #0a0a0a 0%, #1e1b4b 100%)" : "#fff",
      color: highlight ? "#fff" : "var(--ink)",
      border: highlight ? "1px solid transparent" : "1px solid var(--line)",
      borderRadius: 28,
      padding: 36,
      display: "flex",
      flexDirection: "column",
      overflow: "hidden",
      boxShadow: highlight ? "0 30px 80px rgba(124,58,237,0.20)" : "none",
      transition: "transform .35s cubic-bezier(.22,.61,.36,1)",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-6px)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}
    >
      {highlight && (
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(circle at 100% 0%, rgba(236,72,153,0.35), transparent 50%)",
          pointerEvents: "none",
        }} />
      )}

      <div style={{ position: "relative", zIndex: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28 }}>
        <TierIcon name={icon} highlight={highlight} />
        <span style={{
          fontSize: 11, fontWeight: 600, padding: "5px 10px", borderRadius: 999,
          background: highlight ? "rgba(255,255,255,0.15)" : "var(--bg-soft)",
          color: highlight ? "#fff" : "var(--muted)",
          letterSpacing: "0.04em", textTransform: "uppercase",
        }}>{badge}</span>
      </div>

      <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 8, position: "relative", zIndex: 1 }}>{name}</h3>

      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 16, marginBottom: 6, position: "relative", zIndex: 1 }}>
        <span style={{ fontSize: 56, fontWeight: 600, letterSpacing: "-0.04em", lineHeight: 0.95 }}>
          {price}
        </span>
        {price !== "Angebot" && <span style={{ fontSize: 24, fontWeight: 500, opacity: 0.7 }}>€</span>}
      </div>
      <div style={{ fontSize: 13, color: highlight ? "rgba(255,255,255,0.6)" : "var(--muted)", marginBottom: 24, position: "relative", zIndex: 1 }}>
        {sub}
      </div>
      <p style={{ fontSize: 14, lineHeight: 1.5, color: highlight ? "rgba(255,255,255,0.8)" : "var(--muted)", marginBottom: 28, position: "relative", zIndex: 1 }}>{desc}</p>

      <div style={{ height: 1, background: highlight ? "rgba(255,255,255,0.1)" : "var(--line)", marginBottom: 24, position: "relative", zIndex: 1 }} />

      <ul style={{ listStyle: "none", padding: 0, display: "flex", flexDirection: "column", gap: 12, flex: 1, position: "relative", zIndex: 1 }}>
        {features.map((f, i) => (
          <li key={i} style={{
            display: "flex", alignItems: "flex-start", gap: 10,
            fontSize: 14,
            color: highlight ? (f.on ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,0.35)") : (f.on ? "var(--ink-2)" : "var(--muted-2)"),
            lineHeight: 1.4,
            opacity: f.on ? 1 : 0.6,
          }}>
            {f.on ? <CheckMini highlight={highlight} /> : <DashMini highlight={highlight} />}
            <span style={{ textDecoration: f.on ? "none" : "line-through", textDecorationColor: "rgba(0,0,0,0.2)" }}>{f.t}</span>
          </li>
        ))}
      </ul>

      <a href="kontakt.html" className={highlight ? "btn btn-grad" : "btn btn-primary"} style={{
        marginTop: 32, justifyContent: "center", width: "100%", position: "relative", zIndex: 1,
      }}>
        {id === "hardware" ? "Anfrage senden" : id === "video" ? "Video-Termin anfragen" : "Vor-Ort anfragen"}
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M3 8h10m0 0L8.5 3.5M13 8l-4.5 4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </div>
  );
}

function CheckMini({ highlight }) {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
      <circle cx="9" cy="9" r="8" fill={highlight ? "url(#cgw)" : "url(#cg)"} />
      <path d="M5.5 9.5 7.8 11.7 12.5 7" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
      <defs>
        <linearGradient id="cg" x1="0" y1="0" x2="18" y2="18">
          <stop stopColor="#7c3aed" /><stop offset="1" stopColor="#ec4899" />
        </linearGradient>
        <linearGradient id="cgw" x1="0" y1="0" x2="18" y2="18">
          <stop stopColor="#a78bfa" /><stop offset="1" stopColor="#f9a8d4" />
        </linearGradient>
      </defs>
    </svg>
  );
}

function DashMini({ highlight }) {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
      <circle cx="9" cy="9" r="7.5" stroke={highlight ? "rgba(255,255,255,0.2)" : "var(--line-strong)"} strokeWidth="1.2" fill="none" />
      <path d="M6 9h6" stroke={highlight ? "rgba(255,255,255,0.4)" : "var(--muted-2)"} strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

function TierIcon({ name, highlight }) {
  const color = highlight ? "#fff" : "url(#tg)";
  const wrap = (children) => (
    <div style={{
      width: 56, height: 56, borderRadius: 18,
      background: highlight ? "rgba(255,255,255,0.1)" : "var(--grad-soft)",
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
        <defs>
          <linearGradient id="tg" x1="0" y1="0" x2="32" y2="32">
            <stop stopColor="#7c3aed" /><stop offset="1" stopColor="#ec4899" />
          </linearGradient>
        </defs>
        {children}
      </svg>
    </div>
  );
  switch (name) {
    case "video":
      return wrap(<>
        <rect x="3" y="9" width="20" height="14" rx="2.5" stroke={color} strokeWidth="2" />
        <path d="M23 13 L29 9 V23 L23 19 Z" stroke={color} strokeWidth="2" strokeLinejoin="round" />
      </>);
    case "house":
      return wrap(<>
        <path d="M5 14 L16 5 L27 14 V26 H5 Z" stroke={color} strokeWidth="2" strokeLinejoin="round" />
        <path d="M13 26 V18 H19 V26" stroke={color} strokeWidth="2" strokeLinejoin="round" />
      </>);
    case "wrench":
      return wrap(<path d="M22 6a5 5 0 0 0-6.4 6.4L6 22l4 4 9.6-9.6A5 5 0 0 0 26 10l-3 3-3-3 3-3-1-1Z" stroke={color} strokeWidth="2" strokeLinejoin="round" />);
    default: return wrap(null);
  }
}

function Comparison() {
  const rows = [
    ["Was gehört dazu", "Video-Hilfe (7,90 €)", "Vor Ort (14,90 €)", "Hardware (auf Anfrage)"],
    ["iPhone/Android Einstellungen", "✓", "✓", "—"],
    ["WLAN & Internet einrichten", "Meist", "✓", "—"],
    ["E-Mail / WhatsApp / Apps", "✓", "✓", "—"],
    ["Apple ID / Konten zurücksetzen", "✓", "✓", "—"],
    ["Fotos & Speicher aufräumen", "✓", "✓", "—"],
    ["Smart-TV / Streaming einrichten", "Geht", "✓", "—"],
    ["Drucker installieren", "Geht", "✓", "—"],
    ["Neues Gerät einrichten", "Geht", "✓", "—"],
    ["Datenrettung", "—", "—", "✓"],
    ["Akku / Display Reparatur (Vermittlung)", "—", "—", "✓"],
    ["Persönliche Einweisung & Erklärung", "✓", "✓", "—"],
  ];
  const ref = useReveal();
  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="wrap">
        <SectionHeader
          eyebrow="Im Vergleich"
          title={<>Welcher Tarif <span className="ital grad-text">passt zu mir?</span></>}
          sub="Die meisten Probleme löse ich per Video-Chat. Hier sehen Sie auf einen Blick, was dazu gehört."
        />
        <div ref={ref} className="reveal" style={{
          background: "#fff",
          border: "1px solid var(--line)",
          borderRadius: 24,
          overflow: "hidden",
        }}>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 700 }}>
              <thead>
                <tr style={{ background: "var(--bg-soft)" }}>
                  {rows[0].map((c, i) => (
                    <th key={i} style={{
                      padding: "20px 24px",
                      textAlign: "left",
                      fontWeight: 600,
                      fontSize: 14,
                      color: i === 0 ? "var(--muted)" : "var(--ink)",
                      borderBottom: "1px solid var(--line)",
                    }}>
                      {i === 1 ? <span className="grad-text">{c}</span> : c}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.slice(1).map((row, i) => (
                  <tr key={i} style={{ borderBottom: i < rows.length - 2 ? "1px solid var(--line)" : "none" }}>
                    {row.map((c, j) => (
                      <td key={j} style={{
                        padding: "16px 24px",
                        fontSize: 14,
                        color: j === 0 ? "var(--ink)" : (c === "—" ? "var(--muted-2)" : "var(--ink-2)"),
                        fontWeight: j === 0 ? 500 : 400,
                      }}>
                        {c === "✓" ? <span style={{ color: "var(--violet-deep)", fontWeight: 700 }}>✓</span> : c}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
}

function PaymentMethods() {
  const methods = [
    { name: "PayPal", desc: "Schnell & weltweit. paul@paulfaller.me", icon: "paypal" },
    { name: "Überweisung", desc: "SEPA — Daten kommen per E-Mail", icon: "bank" },
    { name: "Wero", desc: "Direkt von Konto zu Konto, in Sekunden", icon: "wero" },
    { name: "Bar (vor Ort)", desc: "Klassisch, ohne App", icon: "cash" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <SectionHeader
          eyebrow="Zahlung"
          title={<>So können Sie <span className="ital grad-text">bezahlen.</span></>}
          sub="Sie zahlen erst nachdem das Problem gelöst ist. Wenn etwas nicht klappt, zahlen Sie nichts."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }} className="payment-grid">
          {methods.map((m) => <PaymentCard key={m.name} {...m} />)}
        </div>
        <div style={{ marginTop: 36, padding: 28, background: "var(--bg-tint)", borderRadius: 20, border: "1px solid rgba(124,58,237,0.15)" }}>
          <div style={{ display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap" }}>
            <div style={{ fontSize: 32 }}>💡</div>
            <div style={{ flex: 1, minWidth: 200 }}>
              <h4 style={{ fontSize: 17, fontWeight: 600, marginBottom: 6, letterSpacing: "-0.01em" }}>Erst lösen — dann zahlen</h4>
              <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>
                Sie bekommen nach dem gelösten Problem eine kurze Nachricht mit allen Zahl-Infos.
                Quittung auf Wunsch — kein Mehrwertsteuerausweis, da Kleinunternehmer.
              </p>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .payment-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 480px) { .payment-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function PaymentCard({ name, desc, icon }) {
  return (
    <div style={{ padding: 24, background: "#fff", border: "1px solid var(--line)", borderRadius: 20, transition: "all .3s ease" }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.borderColor = "var(--line-strong)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.borderColor = "var(--line)"; }}
    >
      <div style={{ marginBottom: 14 }}><PayIcon name={icon} /></div>
      <h4 style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{name}</h4>
      <p style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.4 }}>{desc}</p>
    </div>
  );
}

function PayIcon({ name }) {
  const wrap = (bg, c) => (
    <div style={{ width: 44, height: 44, borderRadius: 12, background: bg, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, color: "#fff", fontSize: 14 }}>{c}</div>
  );
  if (name === "paypal") return wrap("#003087", "P");
  if (name === "bank") return wrap("linear-gradient(135deg, #6366f1, #8b5cf6)", "€");
  if (name === "wero") return wrap("linear-gradient(135deg, #f97316, #f59e0b)", "W");
  if (name === "cash") return wrap("#16a34a", "€");
  return wrap("#666", "?");
}

const PRICE_FAQS = [
  { q: "Warum drei verschiedene Tarife?", a: "Weil die Probleme verschieden sind. 90% lassen sich schnell per Video lösen — da wäre eine teure Vor-Ort-Pauschale unfair. Vor-Ort macht nur Sinn wenn ich wirklich vor Ort sein muss. Hardware ist immer individuell." },
  { q: "Was wenn ich mit Video starte und es vor Ort gemacht werden muss?", a: "Dann rechne ich nur den Vor-Ort-Preis — die Video-Zeit fällt weg. Sie zahlen also nicht doppelt." },
  { q: "Sind 7,90 € wirklich der Endpreis?", a: "Ja. Keine versteckten Gebühren, keine Mehrwertsteuer (Kleinunternehmer). Bei Hardware-Problemen wäre etwas wie ein neuer Akku natürlich Material — das besprechen wir aber vorher und Sie haben die Wahl." },
  { q: "Was wenn ich mehrere Probleme habe?", a: "Mehrere kleine Sachen in einer Sitzung sind oft inklusive. Bei wirklich verschiedenen Themen rechne ich fair pro Problem — sage Ihnen aber immer vorher Bescheid." },
];

function PriceFAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="wrap">
        <SectionHeader
          eyebrow="Häufige Fragen"
          title={<>Fragen zum <span className="ital grad-text">Preis?</span></>}
          sub="Falls etwas unklar ist — schreiben Sie mir einfach. Ich erkläre alles transparent."
        />
        <div style={{ maxWidth: 820, margin: "0 auto" }}>
          {PRICE_FAQS.map((f, i) => (
            <PFItem key={i} {...f} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function PFItem({ q, a, open, onClick }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="reveal" style={{ borderBottom: "1px solid var(--line)", padding: "4px 0" }}>
      <button onClick={onClick} style={{
        width: "100%", display: "flex", alignItems: "center", gap: 16,
        padding: "22px 0", textAlign: "left", fontSize: 17, fontWeight: 500,
        letterSpacing: "-0.01em", color: "var(--ink)",
      }}>
        <span style={{ flex: 1 }}>{q}</span>
        <span style={{
          width: 30, height: 30, borderRadius: 999,
          background: open ? "var(--ink)" : "#fff",
          color: open ? "#fff" : "var(--ink)",
          border: open ? "none" : "1px solid var(--line)",
          display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0, transition: "all .3s ease",
        }}>
          <svg width="12" height="12" viewBox="0 0 14 14" fill="none" style={{ transition: "transform .3s", transform: open ? "rotate(45deg)" : "rotate(0)" }}>
            <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
          </svg>
        </span>
      </button>
      <div style={{ display: "grid", gridTemplateRows: open ? "1fr" : "0fr", transition: "grid-template-rows .4s cubic-bezier(.22,.61,.36,1)" }}>
        <div style={{ overflow: "hidden" }}>
          <p style={{ fontSize: 15, color: "var(--muted)", lineHeight: 1.55, paddingBottom: 22, paddingRight: 40, maxWidth: 680 }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

function BottomCTA() {
  return (
    <section style={{ padding: "120px 0", background: "var(--ink)", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div className="blob" style={{ width: 500, height: 500, background: "#7c3aed", top: -100, left: -150, opacity: 0.4 }} />
      <div className="blob" style={{ width: 500, height: 500, background: "#ec4899", bottom: -150, right: -100, opacity: 0.35 }} />

      <div className="wrap" style={{ position: "relative", textAlign: "center" }}>
        <h2 className="section-title" style={{ color: "#fff", textAlign: "center", maxWidth: 800, margin: "0 auto 24px" }}>
          Klingt fair? <span className="ital" style={{ background: "linear-gradient(120deg, #c4b5fd, #f9a8d4)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>Dann los.</span>
        </h2>
        <p style={{ fontSize: 18, color: "rgba(255,255,255,0.7)", maxWidth: 540, margin: "0 auto 40px", lineHeight: 1.5 }}>
          Eine kurze Nachricht reicht — ich melde mich meist innerhalb weniger Stunden zurück.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="kontakt.html" className="btn btn-grad btn-lg">
            Termin anfragen
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M3 8h10m0 0L8.5 3.5M13 8l-4.5 4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <a href="https://wa.me/4915122202137?text=Hallo%20Paul," target="_blank" rel="noopener" className="btn btn-lg" style={{ background: "#25D366", color: "#fff" }}>
            WhatsApp jetzt
          </a>
        </div>
      </div>
    </section>
  );
}

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