/* Pricing page */

const TIERS = [
  {
    name: "Discovery sprint",
    price: "$12k",
    unit: "fixed · 2 weeks",
    blurb: "Two weeks to map the problem, sketch the experience, and produce a scoped build plan with a fixed price.",
    bullets: [
      "Workshops with your team",
      "Design exploration + sketches",
      "Build plan with milestones",
      "Fixed quote for the build",
      "All deliverables yours to keep",
    ],
    cta: "Start a discovery",
  },
  {
    name: "Build phase",
    price: "$25k+",
    unit: "fixed per milestone",
    featured: true,
    blurb: "Scoped, fixed-price milestones. Most v1 launches run 8–14 weeks across 3–5 milestones.",
    bullets: [
      "Full senior team (PM + design + 2–4 eng)",
      "Weekly demo + retro",
      "Production-ready by milestone 1",
      "App Store / Play Store launch",
      "30-day post-launch warranty",
    ],
    cta: "See typical builds",
  },
  {
    name: "Retainer",
    price: "$18k",
    unit: "per month",
    blurb: "Ongoing maintenance + a fixed pool of improvement hours. Cancel any month with 30 days' notice.",
    bullets: [
      "Bug fixes + dependency updates",
      "OS release support",
      "Sentry + uptime monitoring",
      "40 hours/month improvements",
      "Same-day response in DXB hours",
    ],
    cta: "Discuss a retainer",
  },
  {
    name: "Embedded squad",
    price: "$45k+",
    unit: "per month",
    blurb: "One or more of our engineers join your team — your repo, your standups, your tools.",
    bullets: [
      "1–3 engineers, senior level",
      "Minimum 3 months",
      "Full integration with your stack",
      "Quarterly on-site travel included",
      "Replaceable with notice",
    ],
    cta: "Hire a squad",
  },
];

const PRICING_FAQS = [
  {
    q: "Why not hourly rates?",
    a: "Time-and-materials punishes you for our slow days and us for our fast ones. Fixed milestones align both sides.",
  },
  {
    q: "What's not included in the build price?",
    a: "Third-party costs (App Store, hosting, payment processor fees), and any work that comes out of a change order. Both are itemised before they're spent.",
  },
  {
    q: "Do you take equity?",
    a: "Occasionally, for early-stage startups we deeply believe in, in lieu of part of the cash. Decisions are slow and made by the founding team — assume it's no unless we say yes.",
  },
  {
    q: "What if we want to stop mid-build?",
    a: "All milestone deliverables to date are yours, and we hand off cleanly. We've only had this happen twice in eight years.",
  },
  {
    q: "Do you work with non-MENA clients?",
    a: "Yes — about 30% of our 2026 pipeline is EU / UK / US. We bill in USD or AED and contract under English law.",
  },
];

function PricingPage() {
  React.useEffect(() => {
    document.title = "Pricing — Innoveev";
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name","description"); document.head.appendChild(m); }
    m.setAttribute("content", "Transparent, fixed-fee pricing for Innoveev engagements — discovery, build, retainer and embedded squad.");
  }, []);

  return (
    <>
      <Nav />

      <header className="sub-hero">
        <div className="mesh" aria-hidden="true">
          <span className="mesh__blob mesh__blob--1"></span>
          <span className="mesh__blob mesh__blob--2"></span>
          <span className="mesh__blob mesh__blob--3"></span>
          <span className="mesh__fade-bottom"></span>
        </div>
        <div className="container">
          <div className="sub-hero__head">
            <span className="eyebrow">Pricing · No quotes-by-email</span>
            <h1 className="sub-hero__title">
              Four ways to <em>work with us.</em>
            </h1>
            <p className="sub-hero__lede">
              Fixed fees per engagement. No hours billed. No mystery quote at the end. If you can read these
              cards, you know what we cost.
            </p>
          </div>
        </div>
      </header>

      <PricingEstimator />

      <section className="section section--tight">
        <div className="container">
          {/* Pricing-specific FAQ */}
          <div className="section-head" style={{ marginTop: 0 }}>
            <div>
              <span className="eyebrow">Common questions</span>
              <h2 className="h2 section-head__title">The honest answers.</h2>
            </div>
            <p className="lede section-head__lede">
              Money questions are usually the awkward ones. Here are ours, answered upfront.
            </p>
          </div>

          <Accordion type="single" defaultValue="p-0">
            {PRICING_FAQS.map((f, i) => (
              <AccordionItem key={i} value={`p-${i}`}>
                <AccordionTrigger>{f.q}</AccordionTrigger>
                <AccordionContent>
                  <p>{f.a}</p>
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>

          <div className="faq-closing" style={{ marginTop: 80 }}>
            <h2 className="faq-closing__title">Still not sure which fits?</h2>
            <p className="faq-closing__lede">
              Send us a paragraph about the project. We'll tell you within a day which engagement makes
              sense, or whether you'd be better served somewhere else.
            </p>
            <div className="faq-closing__ctas">
              <a href="index.html#contact" className="btn btn--primary">Talk to the studio <Arrow /></a>
              <a href="faq.html" className="btn btn--secondary">Read the FAQ</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <StickyCTA />
      <BuildMode />
      <KeyboardEggs />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PricingPage />);