/* global React, Common */
const { Eyebrow, SectionTitle, SectionLead } = Common;
const { useState: usePrS } = React;

function PricingSection() {
  const [billing, setBilling] = usePrS("annual"); // monthly | annual

  const free = {
    name: "Free",
    price: "€0",
    sub: "forever",
    desc: "Clone the repo, compile it yourself. Full app, no paywall.",
    color: "#4ADE80",
    cta: "Get the source",
    ctaHref: "https://github.com/KonradDallaOrg/dimmy",
    features: [
      "Same code as Pro. Zero feature gates.",
      "You compile, sign, and notarize yourself",
      "Local Whisper transcription, all 13 styles",
      "Bring your own API key (Groq, OpenAI, Deepgram, Gemini)",
      "macOS, Windows, Linux",
      "Community support on GitHub Issues",
    ],
  };

  const pro = {
    name: "Pro",
    color: "#38BDF8",
    cta: "Start 14-day trial",
    desc: "We compile it for you. You get updates, early access, and a human on email.",
    monthly: { price: "€5", sub: "/ month" },
    annual:  { price: "€29", sub: "/ year", note: "save 52%" },
    features: [
      "Pre-built binary, signed and notarized",
      "Auto-update inside the app, one click",
      "Early access to beta builds before public release",
      "Email support — a human replies in <24h",
      "Vote on the public roadmap",
      "Cancel anytime, 30-day refund",
    ],
  };

  const lifetime = {
    name: "Lifetime",
    price: "€99",
    sub: "once",
    desc: "Pay once. Every release for the next 5 years. No subscription, no upsell.",
    color: "#A78BFA",
    cta: "Buy lifetime",
    features: [
      "Everything in Pro, forever — no renewals",
      "Every major release through 2031",
      "All platforms (macOS · Windows · Linux)",
      "Priority email support · founder replies",
      "Your name in the credits if you want",
    ],
  };

  const proPrice = pro[billing];

  return (
    <section id="pricing" style={{ padding: "120px 32px", position: "relative" }}>
      <div className="container">
        <div style={{ textAlign: "center" }}>
          <Eyebrow num={10}>pricing</Eyebrow>
          <div style={{ height: 16 }}/>
          <SectionTitle align="center" maxWidth={780}>
            Honest pricing.<br/><span className="grad-text">No dark patterns.</span>
          </SectionTitle>
          <SectionLead align="center">
            The code is public. If you can compile, you don't owe us anything. Paying gets you the signed binary, one-click updates, early access, and a human on email. Same software, different distribution.
          </SectionLead>
        </div>

        <div className="reveal price-grid" style={{
          marginTop: 64,
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16,
          maxWidth: 1080, marginInline: "auto",
          alignItems: "stretch",
        }}>
          <Tier tier={free} ctaSecondary />
          <ProTier tier={pro} price={proPrice} billing={billing} setBilling={setBilling}/>
          <LifetimeTier tier={lifetime}/>
        </div>

        <div className="reveal" style={{
          marginTop: 24, textAlign: "center",
          fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-faint)",
        }}>
          all plans · 30-day refund · cancel anytime · students 40% off
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          .price-grid { grid-template-columns: 1fr !important; max-width: 480px !important; }
        }
      `}</style>
    </section>
  );
}

function Tier({ tier, ctaSecondary }) {
  return (
    <div style={{
      position: "relative",
      padding: 28, borderRadius: 18,
      background: "var(--bg-elev)",
      border: "1px solid var(--line)",
      display: "flex", flexDirection: "column",
    }}>
      <Header name={tier.name} color={tier.color}/>
      <PriceBlock price={tier.price} sub={tier.sub}/>
      <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5, marginTop: 12, marginBottom: 22, textWrap: "pretty" }}>
        {tier.desc}
      </p>
      <CTA href={tier.ctaHref || "#download"} color={tier.color} secondary={ctaSecondary} external={!!tier.ctaHref}>{tier.cta}</CTA>
      <FeatureList features={tier.features} color={tier.color}/>
    </div>
  );
}

function ProTier({ tier, price, billing, setBilling }) {
  return (
    <div style={{
      position: "relative",
      padding: 28, borderRadius: 18,
      background: `linear-gradient(180deg, ${tier.color}11, transparent)`,
      border: `1px solid ${tier.color}55`,
      boxShadow: `0 20px 60px ${tier.color}22`,
      display: "flex", flexDirection: "column",
    }}>
      <div style={{
        position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
        fontFamily: "var(--font-mono)", fontSize: 10,
        padding: "5px 12px", borderRadius: 99,
        background: tier.color, color: "var(--bg-deep)", fontWeight: 600,
        letterSpacing: "0.04em", whiteSpace: "nowrap",
        boxShadow: `0 6px 16px ${tier.color}66`,
      }}>most popular</div>

      <Header name={tier.name} color={tier.color}/>

      {/* Billing toggle */}
      <div style={{
        marginTop: 14, display: "inline-flex", padding: 3,
        background: "var(--bg-elev)", border: "1px solid var(--line)",
        borderRadius: 8, gap: 2, alignSelf: "flex-start",
      }}>
        {[["monthly", "Monthly"], ["annual", "Annual"]].map(([id, label]) => (
          <button key={id} onClick={() => setBilling(id)} style={{
            padding: "6px 12px", borderRadius: 6, border: 0,
            background: billing === id ? "var(--line)" : "transparent",
            color: billing === id ? "var(--fg)" : "var(--fg-muted)",
            fontSize: 11, fontFamily: "var(--font-mono)",
            fontWeight: billing === id ? 600 : 500,
            cursor: "pointer", transition: "all 160ms",
            letterSpacing: "0.02em",
          }}>{label}{id === "annual" && billing !== id && (
            <span style={{ marginLeft: 6, color: tier.color, fontSize: 9 }}>−30%</span>
          )}</button>
        ))}
      </div>

      <PriceBlock price={price.price} sub={price.sub} note={price.note} color={tier.color}/>

      <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5, marginTop: 12, marginBottom: 22, textWrap: "pretty" }}>
        {tier.desc}
      </p>
      <CTA href="#download" color={tier.color}>{tier.cta}</CTA>
      <FeatureList features={tier.features} color={tier.color}/>
    </div>
  );
}

function LifetimeTier({ tier }) {
  return (
    <div style={{
      position: "relative",
      padding: 28, borderRadius: 18,
      background: "var(--bg-elev)",
      border: "1px solid var(--line)",
      display: "flex", flexDirection: "column",
    }}>
      {/* Gradient sheen accent at top — kept inside the card via its own
          clipping wrapper, so it doesn't fight the overhanging pill below. */}
      <div style={{
        position: "absolute", inset: 0, borderRadius: 18,
        overflow: "hidden", pointerEvents: "none",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: `radial-gradient(800px 200px at 50% -30%, ${tier.color}28, transparent 60%)`,
        }}/>
      </div>
      <div style={{
        position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
        fontFamily: "var(--font-mono)", fontSize: 10,
        padding: "5px 12px", borderRadius: 99,
        background: `linear-gradient(135deg, ${tier.color}, #38BDF8)`,
        color: "var(--bg-deep)", fontWeight: 600,
        letterSpacing: "0.04em", whiteSpace: "nowrap",
        boxShadow: `0 6px 16px ${tier.color}55`,
      }}>buy once · own forever</div>

      <div style={{ position: "relative" }}>
        <Header name={tier.name} color={tier.color}/>
        <PriceBlock price={tier.price} sub={tier.sub}/>
        <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5, marginTop: 12, marginBottom: 22, textWrap: "pretty" }}>
          {tier.desc}
        </p>
        <CTA href="#download" color={tier.color}>{tier.cta}</CTA>
        <FeatureList features={tier.features} color={tier.color}/>

        <div style={{
          marginTop: 18, padding: "12px 14px",
          background: `${tier.color}10`,
          border: `1px solid ${tier.color}33`,
          borderRadius: 10,
          fontSize: 12, lineHeight: 1.5, color: "var(--fg-muted)",
          fontStyle: "italic", textWrap: "pretty",
        }}>
          In software, five years is a generation. Maybe two. By 2031, half the SaaS apps you pay for today won't exist. <strong style={{ color: "var(--fg)", fontStyle: "normal" }}>Dimmy will.</strong>
        </div>
      </div>
    </div>
  );
}

function Header({ name, color }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <span style={{
        fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700,
        letterSpacing: "-0.01em", color: "var(--fg)",
      }}>{name}</span>
      <span style={{ width: 8, height: 8, borderRadius: 99, background: color, boxShadow: `0 0 10px ${color}` }}/>
    </div>
  );
}

function PriceBlock({ price, sub, note, color }) {
  return (
    <div style={{ marginTop: 12, display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
      <span style={{
        fontFamily: "var(--font-display)", fontSize: 56, fontWeight: 700,
        letterSpacing: "-0.03em", color: "var(--fg)", lineHeight: 1,
      }}>{price}</span>
      <span style={{ fontSize: 14, color: "var(--fg-faint)", fontFamily: "var(--font-mono)" }}>{sub}</span>
      {note && (
        <span style={{
          fontSize: 11, fontFamily: "var(--font-mono)",
          color: color || "var(--fg-faint)",
          padding: "2px 8px", borderRadius: 99,
          background: `${color || "#4ADE80"}1F`,
          fontWeight: 600,
        }}>{note}</span>
      )}
    </div>
  );
}

function CTA({ href, color, children, secondary, external }) {
  return (
    <a href={href}
      target={external ? "_blank" : undefined}
      rel={external ? "noopener" : undefined}
      style={{
        display: "block", textAlign: "center",
        padding: "11px 16px", borderRadius: 10,
        background: secondary ? "var(--line)" : color,
        color: secondary ? "var(--fg)" : "var(--bg-deep)",
        fontWeight: 600, fontSize: 14, fontFamily: "var(--font-sans)",
        textDecoration: "none",
        border: secondary ? "1px solid var(--line-strong)" : "0",
      }}>{children}</a>
  );
}

function FeatureList({ features, color }) {
  return (
    <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 9 }}>
      {features.map((f, i) => (
        <div key={i} style={{
          display: "flex", alignItems: "center", gap: 10,
          fontSize: 13, color: "var(--fg)",
        }}>
          <span style={{
            width: 16, height: 16, borderRadius: 99, flexShrink: 0,
            background: `${color}22`,
            border: `1px solid ${color}88`,
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            color, fontSize: 9, fontWeight: 700,
          }}>✓</span>
          {f}
        </div>
      ))}
    </div>
  );
}

window.PricingSection = PricingSection;