/* global React, Btn, Eyebrow, Display, Wordmark */
const { useState: useStatePr } = React;

function PricingScreen({ theme, onLogin, onSignup, onJoin, onHowItWorks, onLanding }) {
  return (
    <div style={{ minHeight: "100vh", background: theme.bg, color: theme.fg }}>
      <PricingHeader theme={theme} onLogin={onLogin} onSignup={onSignup}
        onJoin={onJoin} onHowItWorks={onHowItWorks} onLanding={onLanding} />

      {/* HERO */}
      <section style={{
        padding: "70px 48px 60px",
        textAlign: "center",
        borderBottom: `2.5px solid ${theme.fg}`,
      }}>
        <Eyebrow theme={theme} style={{ color: theme.accent, marginBottom: 18 }}>
          ── PRIJZEN & FEATURES
        </Eyebrow>
        <h1 style={{
          fontFamily: theme.fonts.display, fontWeight: 800,
          fontSize: 96, lineHeight: 0.95, letterSpacing: "-0.04em",
          textTransform: "lowercase", margin: 0, marginBottom: 18,
        }}>
          drie smaken,<br/>
          <span style={{ color: theme.accent, fontStyle: "italic" }}>geen verrassingen</span>.
        </h1>
        <p style={{
          fontSize: 18, lineHeight: 1.55, maxWidth: 620,
          margin: "0 auto", color: theme.fg, opacity: 0.8,
        }}>
          Spelers betalen nooit. Hosts kiezen wat past. Alles opzegbaar per maand,
          alle data altijd exporteerbaar.
        </p>
      </section>

      {/* LAUNCH BANNER */}
      <section style={{
        padding: "32px 48px",
        background: theme.accent,
        borderBottom: `2.5px solid ${theme.fg}`,
        textAlign: "center",
        position: "relative",
        overflow: "hidden",
      }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.04) 40px, rgba(255,255,255,0.04) 80px)`,
          pointerEvents: "none",
        }} />
        <div style={{ position: "relative" }}>
          <div style={{
            fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
            fontSize: 42, lineHeight: 1.05, letterSpacing: "-0.03em",
            textTransform: "lowercase", color: "#fff",
            marginBottom: 6,
          }}>
            gratis gedurende opstartperiode.
          </div>
          <div style={{
            fontFamily: theme.fonts.mono, fontSize: 13, letterSpacing: "0.18em",
            color: "rgba(255,255,255,0.85)",
          }}>
            INVITE ONLY — VRAAG TOEGANG VIA HALLO@KWISTHET.BE
          </div>
        </div>
      </section>

      {/* PRICING CARDS */}
      <section style={{
        padding: "60px 48px 80px",
        borderBottom: `2.5px solid ${theme.fg}`,
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 24,
          maxWidth: 1280, margin: "0 auto",
          alignItems: "stretch",
        }}>
          <PricingCard theme={theme} onSelect={onSignup}
            tier="GRATIS"
            price="€0"
            period="voor altijd"
            blurb="Voor de eenmalige pubquiz of een eerste indruk."
            features={[
              { ok: true, t: "2 quizzes maximaal" },
              { ok: true, t: "AI-wizard tot 5 vragen per quiz" },
              { ok: true, t: "Custom quiz tot 20 vragen" },
              { ok: true, t: "5 deelnemers per sessie" },
              { ok: true, t: "10 templates uit de bibliotheek" },
              { ok: true, t: "Joinen via code (handmatig invoeren)" },
              { ok: false, t: "QR-code voor spelers" },
              { ok: false, t: "CSV import & export" },
              { ok: false, t: "Quick-party mode" },
              { ok: false, t: "Publiceren in bibliotheek" },
            ]}
            cta="Begin gratis"
          />

          <PricingCard theme={theme} onSelect={onSignup} popular
            tier="PARTY"
            price="€2,99"
            period="per maand · per host"
            blurb="Voor de host die elke maand een paar sessies draait."
            features={[
              { ok: true, t: "5 quizzes opgeslagen tegelijk" },
              { ok: true, t: "AI-wizard tot 50 vragen per quiz" },
              { ok: true, t: "Custom quizzes onbeperkt lang" },
              { ok: true, t: "Tot 25 deelnemers per sessie" },
              { ok: true, t: "50 community-quizzes" },
              { ok: true, t: "QR-code voor spelers" },
              { ok: true, t: "Quick-Party mode (random AI-quiz)" },
              { ok: false, t: "CSV import & export" },
              { ok: false, t: "Publiceren in bibliotheek" },
            ]}
            cta="Kies Party"
          />

          <PricingCard theme={theme} onSelect={onSignup}
            tier="QUIZKRAK"
            price="€6,99"
            period="per maand · per host"
            blurb="Voor trainers, leerkrachten, animatoren en event-pro's."
            features={[
              { ok: true, t: "Onbeperkt quizzes" },
              { ok: true, t: "AI-wizard tot 150 vragen per quiz" },
              { ok: true, t: "Volledige bibliotheek-toegang" },
              { ok: true, t: "Publicatierecht in bibliotheek" },
              { ok: true, t: "QR-code voor spelers" },
              { ok: true, t: "CSV import & export" },
              { ok: true, t: "Quick-Party mode inbegrepen" },
              { ok: true, t: "Onbeperkt deelnemers" },
              { ok: true, t: "Prioritaire support" },
            ]}
            cta="Word Quizkrak"
            dark
          />
        </div>

        <div style={{
          marginTop: 36, textAlign: "center",
          fontFamily: theme.fonts.mono, fontSize: 11,
          letterSpacing: "0.1em", color: theme.fgDim,
        }}>
          ALLE PRIJZEN EXCL. BTW · OPZEGBAAR PER MAAND · GEEN CREDITCARD VOOR GRATIS
        </div>

        {/* ENTERPRISE BAND */}
        <div style={{
          marginTop: 56,
          maxWidth: 1280, marginLeft: "auto", marginRight: "auto",
          background: theme.fg, color: theme.cream,
          border: `2.5px solid ${theme.fg}`,
          boxShadow: `8px 8px 0 0 ${theme.accent}`,
          padding: "36px 44px",
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr",
          gap: 40,
          alignItems: "center",
        }}>
          <div>
            <div style={{
              fontFamily: theme.fonts.mono, fontSize: 12, letterSpacing: "0.18em",
              color: theme.accent, marginBottom: 14,
            }}>── ENTERPRISE</div>
            <div style={{
              fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
              fontSize: 56, lineHeight: 0.95, letterSpacing: "-0.04em",
              textTransform: "lowercase", marginBottom: 14,
              color: theme.cream,
            }}>
              op maat <span style={{ color: theme.accent }}>voor jouw organisatie</span>.
            </div>
            <p style={{
              fontSize: 16, lineHeight: 1.55, margin: "0 0 20px 0",
              color: "rgba(255,248,236,0.85)", maxWidth: 540,
            }}>
              Ideaal voor interne opleidingen, onboarding-trajecten en
              kennismeting in grote teams. Eigen branding, SSO, audit-logs,
              en onbeperkte hosts onder één licentie. We bouwen het samen
              met jullie L&D-team.
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px 0",
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 24px" }}>
              {[
                "Onbeperkte hosts onder één licentie",
                "SSO (SAML / Google Workspace / Azure AD)",
                "Eigen branding in speler-UI",
                "Audit-logs van alle acties",
                "Eigen domein / white-label",
                "SLA met dedicated support",
                "Custom AI-modellen op aanvraag",
                "Centrale facturatie",
              ].map((f) => (
                <li key={f} style={{
                  display: "flex", gap: 10, alignItems: "flex-start",
                  fontSize: 13, lineHeight: 1.5,
                  color: "rgba(255,248,236,0.92)",
                }}>
                  <span style={{
                    fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
                    fontSize: 16, color: theme.accent, flexShrink: 0, width: 14,
                  }}>✓</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ textAlign: "center" }}>
            <div style={{
              fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
              fontSize: 84, lineHeight: 0.9, letterSpacing: "-0.04em",
              color: theme.accent, marginBottom: 8,
            }}>op aanvraag</div>
            <div style={{
              fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.15em",
              color: "rgba(255,248,236,0.7)", marginBottom: 28,
            }}>VANAF — 250 GEBRUIKERS</div>
            <a href="mailto:hallo@kwisthet.be?subject=Enterprise%20—%20vraag%20naar%20info"
               style={{
              display: "inline-block",
              background: theme.accent, color: "#fff",
              border: `2px solid ${theme.cream}`,
              boxShadow: `5px 5px 0 0 ${theme.cream}`,
              padding: "16px 32px",
              fontFamily: theme.fonts.display, fontWeight: 800, fontSize: 17,
              fontStyle: "italic", textTransform: "lowercase",
              cursor: "pointer", textDecoration: "none",
            }}>neem contact op →</a>
            <div style={{
              marginTop: 16,
              fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.12em",
              color: "rgba(255,248,236,0.65)",
            }}>HALLO@KWISTHET.BE</div>
          </div>
        </div>
      </section>

      {/* FEATURES OVERVIEW */}
      <section style={{
        padding: "80px 48px",
        borderBottom: `2.5px solid ${theme.fg}`,
      }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <Eyebrow theme={theme} style={{ marginBottom: 14, color: theme.accent }}>── WAT JE KRIJGT</Eyebrow>
          <Display theme={theme} size={64} style={{ marginBottom: 50, maxWidth: 800 }}>
            geen feature-lijst, een <span style={{ color: theme.accent, fontStyle: "italic" }}>werkwijze</span>.
          </Display>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: `2px solid ${theme.fg}` }}>
            <FeatureBlock theme={theme}
              eyebrow="01 · MAKEN"
              title="ai-wizard die niet in de weg zit"
              body="Geef een onderwerp en een toon. De AI levert vragen, opties en het juiste antwoord. Jij houdt het stuur: keuren, herschrijven, weggooien." />
            <FeatureBlock theme={theme} border
              eyebrow="02 · DELEN"
              title="korte sessiecode + qr"
              body="Spelers joinen via kwisthet.be/join op hun telefoon — geen app, geen account. Tot honderden tegelijk op betaalde plans." />
            <FeatureBlock theme={theme} borderTop
              eyebrow="03 · SPELEN"
              title="live op het grote scherm"
              body="Vragen synchroniseren over alle telefoons. De host bepaalt het tempo. Pauzeer, herhaal, ga sneller — de regie is van jou." />
            <FeatureBlock theme={theme} border borderTop
              eyebrow="04 · BEZITTEN"
              title="alles is van jou"
              body="Backup-export als JSON, individuele quizzes als CSV. Geen vendor lock-in. We beloven al je data EU-server-only." />
          </div>
        </div>
      </section>

      {/* USPS BAND */}
      <section style={{
        padding: "70px 48px",
        background: theme.fg,
        color: theme.cream,
        borderBottom: `2.5px solid ${theme.fg}`,
      }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <Eyebrow theme={theme} style={{ marginBottom: 18, color: theme.accent }}>── KORTE LIJN</Eyebrow>
          <Display theme={theme} size={56} style={{ marginBottom: 40, maxWidth: 900, color: theme.cream }}>
            wat je niet bij andere quiz-tools krijgt.
          </Display>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
            gap: 0,
            border: `2px solid ${theme.cream}`,
          }}>
            {[
              ["Spelers betalen nooit", "Ook niet op betaalde plans. Hosts dragen de kosten — altijd."],
              ["Belgisch, EU-servers", "Antwerps product. AVG-conform. Geen Amerikaanse cloud."],
              ["Geen vendor lock-in", "JSON-backup en CSV-export, ook op gratis. Stop wanneer je wil."],
              ["Eerste sessie in 30s", "Account → AI-quiz → live sessiecode. Klok loopt mee."],
              ["AI met de hand op het stuur", "Niets gaat live zonder jouw akkoord. Wijzigen, herschrijven, schrappen."],
              ["Brutalist over neon", "Een rustig design dat ook in een directievergadering kan."],
            ].map(([title, body], i, arr) => (
              <div key={title} style={{
                padding: "24px 26px",
                borderRight: (i + 1) % 3 !== 0 && i < arr.length - 1 ? `2px solid ${theme.cream}` : "none",
                borderBottom: i < arr.length - 3 ? `2px solid ${theme.cream}` : "none",
                minHeight: 140,
              }}>
                <div style={{
                  fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
                  fontSize: 22, lineHeight: 1.1, textTransform: "lowercase",
                  color: theme.cream, marginBottom: 8,
                }}>{title}</div>
                <p style={{ fontSize: 14, lineHeight: 1.55, margin: 0, color: "rgba(255,248,236,0.78)" }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "80px 48px" }}>
        <div style={{ maxWidth: 800, margin: "0 auto" }}>
          <Eyebrow theme={theme} style={{ marginBottom: 14, color: theme.accent }}>── VEEL GESTELD</Eyebrow>
          <Display theme={theme} size={56} style={{ marginBottom: 36 }}>
            een paar dingen vooraf.
          </Display>
          <div style={{ border: `2px solid ${theme.fg}` }}>
            <FAQ theme={theme} q="Kan ik tussen plans wisselen?"
              a="Ja, op elk moment. Upgrade is direct actief, downgrade gaat in op de volgende facturatieperiode. Geen verlengingscontracten." />
            <FAQ theme={theme} q="Wat gebeurt er met mijn quizzes als ik downgrade?"
              a="Niets — ze blijven in je account. Wel kun je sessies starten met quizzes die binnen je nieuwe limieten passen. Onbeperkte AI-vragen blijven bestaan, maar nieuwe AI-generaties hebben dan de limiet van je nieuwe tier." />
            <FAQ theme={theme} q="Moeten spelers ook betalen?"
              a="Nee, nooit. Spelers joinen via kwisthet.be/join op telefoon zonder account, zonder app, zonder kosten. Hosts betalen, spelers spelen." />
            <FAQ theme={theme} q="Werkt het op tablets en kleine schermen?"
              a="Ja. De host-UI werkt het beste op desktop of grote tablet, de speler-UI is mobile-first." />
            <FAQ theme={theme} q="Hoe zit het met privacy?"
              a="Alle data op EU-servers, AVG-conform. Spelersnamen worden geanonimiseerd na 90 dagen. Je kunt op elk moment alle data exporteren of wissen." />
            <FAQ theme={theme} q="Is er een team-plan?"
              a="Niet in de huidige release. We werken aan een team-plan voor meerdere hosts onder één licentie. Stuur ons een mail (hallo@kwisthet.be) als je interesse hebt." last />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{
        background: theme.fg,
        color: theme.cream,
        padding: "100px 48px",
        textAlign: "center",
        position: "relative",
        overflow: "hidden",
      }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage: `radial-gradient(circle at 20% 30%, ${theme.accent}40 0%, transparent 40%), radial-gradient(circle at 80% 70%, ${theme.signal}30 0%, transparent 40%)`,
          pointerEvents: "none",
        }} />
        <div style={{ position: "relative" }}>
          <h2 style={{
            fontFamily: theme.fonts.display, fontWeight: 800,
            fontSize: 88, lineHeight: 0.95, letterSpacing: "-0.04em",
            textTransform: "lowercase", margin: 0, marginBottom: 24,
            color: theme.cream,
          }}>
            klaar om te <span style={{ color: theme.accent, fontStyle: "italic" }}>vragen</span>?
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55, maxWidth: 560,
            margin: "0 auto 32px",
            color: "rgba(255,248,236,0.85)",
          }}>
            Begin gratis, upgrade als je het echt leuk vindt.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <button onClick={onSignup} style={{
              background: theme.accent, color: "#fff",
              border: `2px solid ${theme.cream}`,
              boxShadow: `6px 6px 0 0 ${theme.cream}`,
              padding: "16px 32px",
              fontFamily: theme.fonts.display, fontWeight: 800, fontSize: 18,
              fontStyle: "italic", textTransform: "lowercase", cursor: "pointer",
            }}>begin gratis →</button>
          </div>
        </div>
      </section>

      <PricingFooter theme={theme} />
    </div>
  );
}

function PricingHeader({ theme, onLogin, onSignup, onJoin, onHowItWorks, onLanding }) {
  return (
    <header style={{
      borderBottom: `2.5px solid ${theme.fg}`,
      padding: "20px 48px",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      position: "sticky", top: 0, background: theme.bg, zIndex: 50,
      overflow: "visible",
    }}>
      <div onClick={onLanding} style={{ cursor: "pointer" }}>
        <Wordmark size={280} style={{ marginBottom: -90, position: "relative", zIndex: 51 }} />
      </div>
      <nav style={{ display: "flex", gap: 22, alignItems: "center" }}>
        <button onClick={onHowItWorks} style={navLinkStyle(theme)}>hoe het werkt</button>
        <button style={{ ...navLinkStyle(theme), color: theme.accent, fontStyle: "italic" }}>prijzen</button>
        <button onClick={onJoin} style={navLinkStyle(theme)}>doe mee →</button>
        <button onClick={onLogin} style={navLinkStyle(theme)}>inloggen</button>
        <Btn theme={theme} onClick={onSignup}>account maken</Btn>
      </nav>
    </header>
  );
}

function PricingFooter({ theme }) {
  return (
    <footer style={{
      padding: "32px 48px",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontFamily: theme.fonts.mono, fontSize: 11,
      letterSpacing: "0.1em", color: theme.fgDim,
      flexWrap: "wrap", gap: 16,
      borderTop: `2.5px solid ${theme.fg}`,
    }}>
      <span>KWIST HET! · GEMAAKT IN ANTWERPEN</span>
      <span>HALLO@KWISTHET.BE</span>
      <span>v0.4 · BETA</span>
    </footer>
  );
}

function PricingCard({ theme, tier, price, period, blurb, features, cta, popular, dark, onSelect }) {
  const [hover, setHover] = useStatePr(false);
  const bg = dark ? theme.fg : (popular ? theme.accent : theme.card);
  const fg = (dark || popular) ? theme.cream : theme.fg;
  const eyebrowColor = (dark || popular) ? theme.cream : theme.accent;

  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: bg, color: fg,
        border: `2.5px solid ${theme.fg}`,
        boxShadow: `${hover ? 10 : 6}px ${hover ? 10 : 6}px 0 0 ${theme.fg}`,
        transform: hover ? "translate(-3px,-3px)" : "none",
        transition: "all .15s",
        padding: "28px 28px 32px",
        position: "relative",
        display: "flex", flexDirection: "column",
        minHeight: 600,
      }}>
      {popular && (
        <div style={{
          position: "absolute", top: -14, right: 24,
          background: theme.signal, color: "#fff",
          fontFamily: theme.fonts.mono, fontSize: 10, letterSpacing: "0.15em",
          padding: "4px 12px",
          border: `2px solid ${theme.fg}`,
        }}>● MEEST GEKOZEN</div>
      )}

      <div style={{
        fontFamily: theme.fonts.mono, fontSize: 12, letterSpacing: "0.18em",
        color: eyebrowColor,
        marginBottom: 18,
      }}>── {tier}</div>

      <div style={{
        fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
        fontSize: 64, lineHeight: 1, letterSpacing: "-0.04em",
        marginBottom: 4,
      }}>{price}</div>
      <div style={{
        fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.12em",
        opacity: 0.75, marginBottom: 16,
      }}>{period.toUpperCase()}</div>

      <p style={{ fontSize: 14, lineHeight: 1.55, margin: "0 0 22px 0", opacity: 0.85 }}>{blurb}</p>

      <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px 0", flex: 1 }}>
        {features.map((f) => (
          <li key={f.t} style={{
            display: "flex", gap: 10, alignItems: "flex-start",
            padding: "8px 0",
            fontSize: 14, lineHeight: 1.45,
            opacity: f.ok ? 1 : 0.4,
            textDecoration: f.ok ? "none" : "line-through",
          }}>
            <span style={{
              fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
              fontSize: 18, lineHeight: 1, color: f.ok ? (popular || dark ? theme.cream : theme.accent) : "currentColor",
              flexShrink: 0, width: 18,
            }}>{f.ok ? "✓" : "—"}</span>
            <span>{f.t}</span>
          </li>
        ))}
      </ul>

      <button onClick={onSelect} style={{
        width: "100%",
        background: dark || popular ? theme.cream : theme.fg,
        color: dark || popular ? theme.fg : theme.cream,
        border: `2px solid ${dark || popular ? theme.cream : theme.fg}`,
        padding: "14px 20px",
        fontFamily: theme.fonts.display, fontWeight: 800, fontSize: 16,
        fontStyle: "italic", textTransform: "lowercase", letterSpacing: "-0.01em",
        cursor: "pointer",
      }}>{cta} →</button>
    </div>
  );
}

function FeatureBlock({ theme, eyebrow, title, body, border, borderTop }) {
  return (
    <div style={{
      padding: "32px 32px 36px",
      borderLeft: border ? `2px solid ${theme.fg}` : "none",
      borderTop: borderTop ? `2px solid ${theme.fg}` : "none",
    }}>
      <div style={{
        fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.18em",
        color: theme.accent, marginBottom: 14,
      }}>── {eyebrow}</div>
      <div style={{
        fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
        fontSize: 28, lineHeight: 1.1, textTransform: "lowercase",
        marginBottom: 12,
      }}>{title}</div>
      <p style={{ fontSize: 15, lineHeight: 1.6, margin: 0, opacity: 0.78 }}>{body}</p>
    </div>
  );
}

function FAQ({ theme, q, a, last }) {
  const [open, setOpen] = useStatePr(false);
  return (
    <div style={{ borderBottom: last ? "none" : `1.5px solid ${theme.fg}` }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", background: "transparent", border: "none",
        padding: "18px 22px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        cursor: "pointer", color: theme.fg,
        fontFamily: theme.fonts.display, fontStyle: "italic", fontWeight: 800,
        fontSize: 19, textAlign: "left", textTransform: "lowercase",
        letterSpacing: "-0.01em",
      }}>
        {q}
        <span style={{
          fontFamily: theme.fonts.mono, fontSize: 18, color: theme.accent,
          transform: open ? "rotate(45deg)" : "none", transition: "transform .15s",
        }}>+</span>
      </button>
      {open && (
        <div style={{
          padding: "0 22px 20px",
          fontSize: 14, lineHeight: 1.6, color: theme.fgDim,
        }}>{a}</div>
      )}
    </div>
  );
}

function navLinkStyle(theme) {
  return {
    background: "transparent", border: "none", cursor: "pointer",
    fontFamily: theme.fonts.display, fontSize: 15, color: theme.fg,
    padding: "6px 4px",
  };
}

window.PricingScreen = PricingScreen;