// PricingPage — four plan cards + clarification card + FAQ accordion.

const { useState: useStatePr } = React;

function PricingPage({ setPage }) {
  const { colors, SectionLabel, PrimaryButton, TealLink, CTABand, Icons, appUrls } = window;
  const { IconCheck, IconPlus, IconMinus } = Icons;

  const features = [
  "All Sfuma features",
  "Unlimited renders (you pay AI providers directly)",
  "Windows desktop app",
  "SketchUp & 3ds Max plugins",
  "Cancel anytime"];


  const faqs = [
  {
    q: "Why bring my own API key?",
    a: "Sfuma never marks up rendering costs. You pay OpenAI, Google, Black Forest Labs, or fal.ai exactly what they charge, and your prompts and images go straight from your machine to the provider. No middleman, no proxy, no opaque per-render fee bundled into a subscription."
  },
  {
    q: "How much will I actually pay for renders?",
    a: "Typical per-render cost is $0.02 to $0.10 depending on which model you choose. A working session of 50–100 renders usually lands between $2 and $8 in AI fees. Cheaper models (Nano Banana, Flux Klein) sit at the low end; OpenAI GPT Image and Flux Pro/Max at the higher end."
  },
  {
    q: "Does Sfuma work offline?",
    a: "The app itself runs locally — your project files, masks, and history all live on your disk. The actual render step needs an internet connection because it calls the AI provider's API. Once a render is generated, you can keep iterating on it offline."
  },
  {
    q: "What happens if I cancel?",
    a: "You keep every render and project file you've made — they're on your disk, not ours. The app stops generating new renders at the end of your billing period. Resubscribe any time and pick up where you left off."
  },
  {
    q: "Is there a free trial?",
    a: "Not currently. The monthly plan is the lowest-commitment way to try Sfuma — ₹399, cancel anytime, and you keep access until the end of your billing period."
  },
  {
    q: "Will there be a perpetual license?",
    a: "Not at launch. We're committed to keeping the subscription affordable and free of upsells so it stays accessible to solo practitioners. We're open to revisiting this once the product is stable."
  }];


  return (
    <div data-screen-label="Pricing">
      <section style={{ padding: "160px 0 60px" }}>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 text-center">
          <SectionLabel className="mb-5">Pricing</SectionLabel>
          <h1
            className="mx-auto"
            style={{
              fontSize: "clamp(40px,5.4vw,72px)",
              fontWeight: 500,
              letterSpacing: "-0.04em",
              lineHeight: 1.02,
              color: colors.body,
              maxWidth: 920
            }}>
            
            Simple pricing. You bring the AI keys.
          </h1>
          <p className="mt-8 mx-auto text-[18px]" style={{ color: colors.muted, lineHeight: 1.6, maxWidth: 680 }}>
            Sfuma is the app. AI rendering costs go to OpenAI, Google, or whichever model you choose. Pay them directly, pay what you actually use.
          </p>
        </div>
      </section>

      {/* Tier cards */}
      <section style={{ padding: "40px 0 80px" }}>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <PriceCard title="Professional Monthly" price="₹399" period="/ month" features={features} />
            <PriceCard title="Professional Annual" price="₹3,999" period="/ year" sub="₹333.25/month, billed annually" features={features} highlight badge="Best value · save ₹789/year" />
            <PriceCard title="Student Monthly" price="₹199" period="/ month" sub="Verification required" features={features} />
            <PriceCard title="Student Annual" price="₹1,999" period="/ year" sub="₹166.58/month, billed annually · Verification required" features={features} />
          </div>

          {/* Student verification note */}
          <p className="mt-10 mx-auto text-center text-[13.5px]" style={{ color: colors.muted, lineHeight: 1.6, maxWidth: 560 }}>
            Student plans require verification. Sign up, then email proof of enrolment to support@sfuma.in — we'll send you a redemption code.
          </p>

          {/* What's not included */}
          <div
            className="mt-12 p-8"
            style={{
              background: colors.surface2,
              border: `0.6px solid ${colors.hairline}`,
              borderRadius: 10
            }}>
            
            <div className="text-[16px] mb-3" style={{ color: colors.body, fontWeight: 500, letterSpacing: "-0.01em" }}>
              What's not included
            </div>
            <p className="text-[14.5px]" style={{ color: colors.muted, lineHeight: 1.6 }}>
              Sfuma doesn't bundle AI rendering costs. You bring your own API key from OpenAI, Google, Black Forest Labs, Volcengine, or Fal and pay them directly for each render. Typical cost per render: $0.02–$0.10 depending on which model you choose. We never proxy your images or prompts — they go straight from your machine to the model provider. Never used an API key before? Our free{" "}
              <TealLink href={appUrls.guide} target="_blank" rel="noopener">
                setup guide
              </TealLink>{" "}
              walks you through it.
            </p>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "60px 0 120px" }}>
        <div className="max-w-[820px] mx-auto px-6 md:px-10">
          <SectionLabel className="mb-5">Questions</SectionLabel>
          <h2
            className="mb-12"
            style={{
              fontSize: "clamp(32px,3.8vw,48px)",
              fontWeight: 500,
              letterSpacing: "-0.03em",
              lineHeight: 1.05,
              color: colors.body
            }}>
            
            Frequently asked.
          </h2>
          <div style={{ borderTop: `0.6px solid ${colors.hairline}` }}>
            {faqs.map((f, i) =>
            <FAQRow key={i} q={f.q} a={f.a} />
            )}
          </div>
        </div>
      </section>

      <CTABand setPage={setPage} />
    </div>);

}

function PriceCard({ title, price, period, sub, features, highlight, badge }) {
  const { colors, PrimaryButton, Icons, appUrls } = window;
  const { IconCheck } = Icons;
  return (
    <div className="relative h-full">
      {badge &&
      <div
        className="absolute -top-3 left-6 text-[11px] px-3 py-1 whitespace-nowrap"
        style={{
          background: colors.primary, color: "#fff",
          borderRadius: 999, fontWeight: 500, letterSpacing: "0.01em"
        }}>

          {badge}
        </div>
      }
      <div
        className="p-7 h-full flex flex-col"
        style={{
          background: "#fff",
          border: highlight ? `2px solid ${colors.primary}` : `0.6px solid ${colors.hairline}`,
          borderRadius: 10,
          boxShadow: highlight ? "0 12px 40px rgba(15,110,86,0.10)" : "none"
        }}>

        <div className="text-[14px] mb-4" style={{ color: colors.muted, fontWeight: 500 }}>{title}</div>
        <div className="flex items-baseline gap-2">
          <span style={{ fontSize: 44, fontWeight: 500, letterSpacing: "-0.04em", lineHeight: 1, color: colors.body }}>{price}</span>
          <span className="text-[15px]" style={{ color: colors.muted }}>{period}</span>
        </div>
        {sub &&
        <div className="mt-2 text-[13px]" style={{ color: colors.muted, lineHeight: 1.5 }}>{sub}</div>
        }
        <ul className="mt-7 flex flex-col gap-3">
          {features.map((x) =>
          <li key={x} className="flex items-center gap-3 text-[13.5px]" style={{ color: colors.body }}>
              <IconCheck size={15} style={{ color: colors.primary, flexShrink: 0 }} /> {x}
            </li>
          )}
        </ul>
        <div className="mt-auto pt-8">
          <PrimaryButton as="a" href={appUrls.signup} target="_blank" rel="noopener" className="w-full">Get started</PrimaryButton>
        </div>
      </div>
    </div>);

}

function FAQRow({ q, a }) {
  const [open, setOpen] = useStatePr(false);
  const { colors, Icons } = window;
  const { IconPlus, IconMinus } = Icons;
  return (
    <div style={{ borderBottom: `0.6px solid ${colors.hairline}` }}>
      <button
        onClick={() => setOpen(!open)}
        className="w-full py-6 flex items-center justify-between text-left"
        type="button">
        
        <span className="text-[17px]" style={{ color: colors.body, fontWeight: 500, letterSpacing: "-0.01em" }}>
          {q}
        </span>
        <span style={{ color: colors.muted, marginLeft: 24, flexShrink: 0 }}>
          {open ? <IconMinus size={18} /> : <IconPlus size={18} />}
        </span>
      </button>
      {open &&
      <p
        className="pb-7 text-[14.5px] max-w-[680px]"
        style={{ color: colors.muted, lineHeight: 1.65 }}>
        
          {a}
        </p>
      }
    </div>);

}

window.PricingPage = PricingPage;