/* pricing.jsx - Plans and pricing destination */

const SELF_SERVICE_FEATURES = [
  "1 workspace",
  "1 RAG chatbot",
  "1 website widget",
  "Document ingestion and parsing",
  "Editable structured datasets",
  "Training Data Studio",
  "Conversation and feedback capture",
  "Connect your own model API keys",
  "Fine-tune your own model",
  "Basic model evaluation",
  "Up to 3 fine-tuning runs",
  "Up to 3 hosted fine-tuned model versions",
  "Assisted hosting for fine-tuned models",
  "Up to 10,000 recorded interactions per month",
  "Standard support",
];

const PRICING_ADDONS = [
  "Additional fine-tuning runs",
  "Additional model versions",
  "Additional recorded interactions",
  "Additional applications and widgets",
  "Additional team members",
  "Additional dataset storage",
  "Hosted inference and workflow runs when capacity is available",
];

const ENTERPRISE_FEATURES = [
  "Dedicated 24/7 hosting machine",
  "Faster fine-tuned model hosting",
  "More than 3 fine-tuned model versions",
  "Custom full fine-tuning",
  "Wrapper-to-owned-model migration",
  "Continuous learning",
  "Automated retraining",
  "Advanced model evaluation",
  "Custom benchmarks and regression testing",
  "Deployment approval gates",
  "Benchmark-aware model routing",
  "Controlled multi-model workflows",
  "Model Registry and lineage",
  "Dataset, model, and deployment versioning",
  "Dedicated model hosting",
  "Private cloud, VPC, on-premise, and hybrid deployment",
  "Enterprise observability and audit logs",
  "SSO and role-based access control",
  "Custom integrations",
  "Higher usage limits",
  "Dedicated implementation support",
  "Enterprise SLA and priority support",
];

const COMMERCIAL_STRUCTURE = [
  "Annual platform contract",
  "One-time onboarding and integration fee",
  "Usage-based training, evaluation, inference, and infrastructure charges",
];

const PRICING_FAQS = [
  {
    q: "What is billed separately?",
    a: "The Basic Plan includes access to Model OS and the usage limits listed in the plan. Fine-tuning compute, third-party model API usage, hosted inference, additional storage, and usage beyond the included limits may be billed separately.",
  },
  {
    q: "When should I move to Enterprise?",
    a: "Enterprise is designed for teams that need a dedicated 24/7 hosting machine, faster hosted inference, more than 3 fine-tuned model versions, private deployment, automated retraining, advanced evaluation, governance, or higher usage limits.",
  },
  {
    q: "Can I start self-serve and upgrade later?",
    a: "Yes. You can begin with the Basic Plan and upgrade when your training, deployment, security, or governance requirements become more advanced. Your datasets, model versions, evaluation results, and production history can move with you.",
  },
  {
    q: "What happens when I reach my usage limits?",
    a: "Your services will not be automatically removed. You can purchase additional interactions, fine-tuning runs, model versions, storage, applications, team seats, hosted inference, or workflow usage as needed.",
  },
  {
    q: "How does Basic hosting work?",
    a: "Basic Plan hosting is supported through shared capacity. We can help host your fine-tuned model, but hosting setup, refreshes, and version changes may take longer than Enterprise dedicated hosting.",
  },
  {
    q: "What counts as a recorded interaction?",
    a: "A recorded interaction is a production conversation, model request, workflow execution, or user feedback event captured by Model OS for observability, evaluation, or training-data preparation.",
  },
  {
    q: "Does Model OS own my data or models?",
    a: "No. You retain ownership of your uploaded documents, structured datasets, production feedback, training data, and customer-controlled model versions. Model OS provides the infrastructure to prepare, evaluate, deploy, and continuously improve those assets.",
  },
];

function PricingFeature({ children }) {
  return (
    <li className="pricing-feature">
      {I("checkCircle", { style: { width: 16, height: 16 } })}
      <span>{children}</span>
    </li>
  );
}

function PricingPlanCard({ icon, title, price, cadence, description, eyebrow, features, footerTitle, footerItems, actionLabel, featured, onAction }) {
  return (
    <section className={cx("pricing-plan card", featured && "pricing-plan-featured")}>
      {eyebrow && <span className="pricing-plan-badge">{eyebrow}</span>}
      <div className="pricing-plan-intro">
        <div className="pricing-plan-icon">{I(icon)}</div>
        <h2>{title}</h2>
        <div className="pricing-price">
          <span>{price}</span>
          {cadence && <small>{cadence}</small>}
        </div>
        <p>{description}</p>
      </div>

      <div className="divider" />

      <div className="pricing-feature-block">
        <div className="eyebrow">{featured ? "Everything in Basic, Plus" : "Included"}</div>
        <ul className={cx("pricing-feature-list", featured && "pricing-feature-list-two")}>
          {features.map((feature) => <PricingFeature key={feature}>{feature}</PricingFeature>)}
        </ul>
      </div>

      <div className="pricing-note-panel">
        <div className="pricing-note-title">
          {I(featured ? "scale" : "trend", { style: { width: 16, height: 16 } })}
          <span>{footerTitle}</span>
        </div>
        <ul>
          {footerItems.map((item) => (
            <li key={item}>
              <span className="dot" />
              <span>{item}</span>
            </li>
          ))}
        </ul>
      </div>

      {!featured && (
        <p className="pricing-footnote">
          {I("info", { style: { width: 15, height: 15 } })}
          Basic hosting uses shared capacity, so setup and model updates may take longer.
        </p>
      )}

      <button className="btn btn-primary btn-lg btn-block" onClick={onAction}>
        {actionLabel}
        {I("arrowR", { style: { width: 17, height: 17 } })}
      </button>
    </section>
  );
}

function PricingFaq({ item, open, onToggle }) {
  return (
    <div className="pricing-faq-item">
      <button onClick={onToggle} aria-expanded={open}>
        {I("info", { style: { width: 18, height: 18 } })}
        <span>{item.q}</span>
        {I(open ? "chevD" : "chevR", { style: { width: 18, height: 18 } })}
      </button>
      {open && <p>{item.a}</p>}
    </div>
  );
}

function PricingView({ ctx }) {
  const [openFaqs, setOpenFaqs] = React.useState({ 0: true });
  const toggleFaq = (idx) => setOpenFaqs((current) => ({ ...current, [idx]: !current[idx] }));
  const goToDeploy = () => ctx.setView("deploy");
  const goToFineTune = () => ctx.setView("finetune");

  return (
    <div className="page page-wide pricing-page">
      <PageHead
        eyebrow="Pricing"
        title="Plans & Pricing"
        sub="Start with a simple plan for building and hosting your own fine-tuned model, then upgrade when you need dedicated 24/7 infrastructure."
      />
      <div className="pricing-plan-grid fu fu-2">
        <PricingPlanCard
          icon="layers"
          title="Basic Plan"
          price="$200"
          cadence="/month"
          description="For teams that want to fine-tune their own model, host early versions, and start learning from real usage."
          features={SELF_SERVICE_FEATURES}
          footerTitle="Add More as You Grow"
          footerItems={PRICING_ADDONS}
          actionLabel="Get Started"
          onAction={goToDeploy}
        />
        <PricingPlanCard
          icon="lock"
          title="Enterprise Plan"
          price="Custom Pricing"
          description="For teams that need a dedicated machine running 24/7, faster hosting, and more fine-tuned model versions."
          eyebrow="Most Advanced"
          featured
          features={ENTERPRISE_FEATURES}
          footerTitle="Commercial Structure"
          footerItems={COMMERCIAL_STRUCTURE}
          actionLabel="Contact Sales"
          onAction={() => window.open("https://docs.google.com/forms/d/e/1FAIpQLSf2U7O7RnHH2Na-Fmh7Ja3jNz64C_oJKJjEGwGxxIYaM7VsRg/viewform?usp=header", "_blank", "noopener,noreferrer")}
        />
      </div>

      <section className="pricing-section fu fu-3">
        <h2>How pricing works</h2>
        <div className="pricing-info-grid">
          {[
            ["layers", "Basic Plan", "Fine-tune your own model up to 3 times and host early model versions through shared capacity."],
            ["trend", "Model Growth", "Add more fine-tuning runs, model versions, interactions, and workflows as you scale."],
            ["lock", "Enterprise Plan", "Run on a dedicated 24/7 machine with faster hosting, higher limits, and stronger controls."],
          ].map(([icon, title, text]) => (
            <div className="pricing-info-item" key={title}>
              <span>{I(icon, { style: { width: 21, height: 21 } })}</span>
              <b>{title}</b>
              <p>{text}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="pricing-section fu fu-4">
        <h2>What grows with you</h2>
        <div className="pricing-growth-grid">
          {[
            ["message", "Interactions"],
            ["sliders", "Fine-tune versions"],
            ["grid", "Workspaces"],
            ["globe", "24/7 Hosting"],
            ["lock", "Compliance & Governance"],
          ].map(([icon, label]) => (
            <div className="pricing-growth-item" key={label}>
              {I(icon, { style: { width: 19, height: 19 } })}
              <span>{label}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="pricing-section pricing-faq-section fu">
        <h2>Frequently asked questions</h2>
        <div className="pricing-faq-list">
          {PRICING_FAQS.map((item, idx) => (
            <PricingFaq
              key={item.q}
              item={item}
              open={!!openFaqs[idx]}
              onToggle={() => toggleFaq(idx)}
            />
          ))}
        </div>
      </section>
    </div>
  );
}

window.PricingView = PricingView;