/* Pricing sections — Plans, Credits explainer, FAQ. Mounted in main App. */

function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
  );
}

function BoltIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M13 2 4 14h6l-1 8 9-12h-6l1-8z" />
    </svg>
  );
}

const PORTAL_URL = "https://portal.usestring.ai/unblocker";

const PLANS = [
  {
    name: "Starter Plan",
    price: 20,
    credits: "50,000",
    blurb: "For early projects and pilots — enough headroom to ship a real workflow.",
    features: [
      "50,000 credits per month",
      "Bypass Cloudflare, DataDome, Akamai, Kasada",
      "JSON, HTML & markdown output",
      "Standard support (24h response)"
    ]
  },
  {
    name: "Growth Plan",
    price: 100,
    credits: "500,000",
    blurb: "For production scrapers and agents. 10× credits, 5× the price.",
    features: [
      "500,000 credits per month",
      "Everything in Starter",
      "Higher concurrency (200 req/s)",
      "Priority support (4h response)",
      "Webhook + signed URL delivery"
    ],
    popular: true
  }
];

function PlanCard({ plan }) {
  return (
    <div className={"plan" + (plan.popular ? " plan-popular" : "")}>
      {plan.popular && <span className="plan-badge">Most Popular</span>}
      <div className="plan-head">
        <h3 className="plan-name">{plan.name}</h3>
        <div className="plan-price">
          <span className="plan-price-amt">${plan.price}</span>
          <span className="plan-price-per">/month</span>
        </div>
        <div className="plan-credits">{plan.credits} credits</div>
        <p className="plan-blurb">{plan.blurb}</p>
      </div>
      <ul className="plan-features">
        {plan.features.map((f) => (
          <li key={f}><span className="check"><CheckIcon /></span>{f}</li>
        ))}
      </ul>
      <a
        className={"btn lg plan-cta" + (plan.popular ? " primary" : "")}
        href={PORTAL_URL}
      >
        <span className="bolt"><BoltIcon /></span>
        Subscribe
      </a>
    </div>
  );
}

function PricingSection() {
  return (
    <section className="section" id="pricing" data-screen-label="Pricing — Plans">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", marginBottom: 32 }}>
          <div className="eyebrow" style={{ margin: "0 auto" }}><span className="dot"></span>Pricing · pay only for success</div>
          <h2 style={{ marginTop: 18 }}>
            Credit-based. <span className="grad-text">No surprises.</span>
          </h2>
          <p className="lead" style={{ margin: "16px auto 0", maxWidth: 680 }}>
            One credit per successful request. Failed requests don't count. Unused credits roll over for 30 days.
          </p>
        </div>
        <div className="plans-grid">
          {PLANS.map((p) => <PlanCard key={p.name} plan={p} />)}
        </div>
        <div className="plans-note">
          <span className="chip success"><span className="dot"></span>Free trial</span>
          <span>1,000 credits on us — no card required.</span>
          <a className="plans-note-link" href={PORTAL_URL}>Start free <span className="arr">→</span></a>
        </div>
      </div>
    </section>
  );
}

const CREDIT_ROWS = [
  { label: "Standard page",       cost: "1", note: "HTML, JSON, simple sites" },
  { label: "Hard target",         cost: "2", note: "Cloudflare / DataDome / Akamai / Kasada" },
  { label: "JS render + capture", cost: "3", note: "Heavy SPA, full DOM" },
  { label: "Failed request",      cost: "0", note: "You're never charged for what we couldn't return" }
];

function CreditsExplainer() {
  return (
    <section className="section" data-screen-label="Pricing — Credits">
      <div className="container">
        <div className="section-head left">
          <div className="eyebrow"><span className="dot"></span>What's a credit?</div>
          <h2 style={{ marginTop: 14 }}>One unit. Predictable cost.</h2>
          <p className="lead" style={{ marginTop: 12 }}>
            A credit is one successful request. Heavier targets cost a bit more — see below.
            We never charge for blocked or failed responses.
          </p>
        </div>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <table className="credits-table">
            <thead>
              <tr>
                <th>Request type</th>
                <th>Credits</th>
                <th>Notes</th>
              </tr>
            </thead>
            <tbody>
              {CREDIT_ROWS.map((r) => (
                <tr key={r.label} className={r.cost === "0" ? "credits-row-free" : ""}>
                  <td>{r.label}</td>
                  <td className="credits-cost"><span className="credits-cost-num">{r.cost}</span></td>
                  <td className="credits-note">{r.note}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

const FAQ_ITEMS = [
  {
    q: "What happens if I run out of credits?",
    a: "Requests start returning a 402. You can top up in-dashboard with a one-time pack at the same per-credit rate as your plan, or upgrade. We'll notify you at 80% and 100%."
  },
  {
    q: "Do unused credits roll over?",
    a: "Yes — unused credits roll over for 30 days. After that they expire."
  },
  {
    q: "Am I charged for failed or blocked requests?",
    a: "Never. You only pay when we return content. If we get blocked, we eat the cost — that's the whole point."
  },
  {
    q: "Can I switch or cancel plans?",
    a: "Any time, from the dashboard. Upgrades take effect immediately and are prorated; downgrades take effect at the next billing cycle."
  },
  {
    q: "Need higher volume or custom terms?",
    a: <span>We have a custom plan for teams running 5M+ requests/mo, with dedicated proxy pools and SLAs. Reach out to <a href="mailto:sales@string.ai">sales@string.ai</a>.</span>
  }
];

function PricingFAQ() {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section className="section" data-screen-label="Pricing — FAQ">
      <div className="container">
        <div className="section-head left">
          <div className="eyebrow"><span className="dot"></span>Common questions</div>
          <h2 style={{ marginTop: 14 }}>FAQ.</h2>
        </div>
        <div className="faq-list">
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = openIdx === i;
            return (
              <div key={item.q} className={"faq-item" + (isOpen ? " is-open" : "")}>
                <button
                  className="faq-q"
                  type="button"
                  id={"faq-btn-" + i}
                  aria-expanded={isOpen}
                  aria-controls={isOpen ? "faq-panel-" + i : undefined}
                  onClick={() => setOpenIdx(isOpen ? -1 : i)}
                >
                  <span>{item.q}</span>
                  <span className="faq-chev" aria-hidden="true">+</span>
                </button>
                {isOpen && (
                  <div id={"faq-panel-" + i} className="faq-a" role="region" aria-labelledby={"faq-btn-" + i}>
                    {item.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.PricingSection = PricingSection;
window.CreditsExplainer = CreditsExplainer;
window.PricingFAQ = PricingFAQ;