/* Services / engagement models with 3 layout variants */

const PLANS = [
  {
    id: "consult",
    name: "AI-Native Consulting",
    tag: "For teams ready to operate differently",
    price: 2500,
    desc: "We embed with your team for 4–8 weeks to rewire how work gets done. Your non-tech teams learn to build, draft, analyze and decide with AI — your tech team ships 3×.",
    features: [
      "Weekly working sessions across product, ops, marketing, sales",
      "Role-specific AI playbooks — not generic ChatGPT 101",
      "Tool stack selection and rollout (we pay for nothing — you own it)",
      "Quarterly metrics review: cycle time, output volume, team CSAT",
      "Founder-level access, no junior handoffs"
    ],
    cta: "Start with consulting"
  },
  {
    id: "build",
    name: "Build With You",
    tag: "When you need a product, not a deck",
    price: 4000,
    featured: true,
    desc: "We ship your product end-to-end. Architecture, backend, frontend, data, and the AI layer — all designed to be maintained by your team when we hand it over.",
    features: [
      "Everything in AI-Native Consulting, plus:",
      "Two founders full-stack: product, engineering, design",
      "Shipped platform in 12 weeks — real users, real revenue",
      "Your team pair-programmed through the whole build",
      "30-day post-launch operator support"
    ],
    cta: "Build with us"
  }
];

function PriceBlock({ amount }) {
  return (
    <div className="plan-price">
      <b>${amount.toLocaleString()}<small>/mo</small></b>
      <span style={{ color: "var(--fg-mute)" }}>USD · billed monthly</span>
    </div>
  );
}

function PlanCard({ plan, featured }) {
  return (
    <div className={`plan ${featured ? "featured" : ""}`}>
      {featured && <div className="plan-badge">Most engaged</div>}
      <div className="plan-head">
        <div>
          <div className="kicker">{plan.tag}</div>
          <div className="plan-name" style={{ marginTop: 10 }}>{plan.name}</div>
        </div>
        <PriceBlock amount={plan.price} />
      </div>
      <p className="plan-desc">{plan.desc}</p>
      <ul className="plan-features">
        {plan.features.map((f, i) => <li key={i}>{f}</li>)}
      </ul>
      <div className="plan-cta">
        <a href="#contact" className={featured ? "btn btn-primary" : "btn btn-ghost"}>
          {plan.cta} <Arrow/>
        </a>
      </div>
    </div>
  );
}

function StackPlan({ plan, featured }) {
  return (
    <div className={`plan ${featured ? "featured" : ""}`}>
      {featured && <div className="plan-badge">Most engaged</div>}
      <div className="plan-col">
        <div className="kicker">{plan.tag}</div>
        <div className="plan-name">{plan.name}</div>
        <p className="plan-desc" style={{ marginTop: -8 }}>{plan.desc}</p>
        <PriceBlock amount={plan.price} />
        <div className="plan-cta">
          <a href="#contact" className={featured ? "btn btn-primary" : "btn btn-ghost"}>
            {plan.cta} <Arrow/>
          </a>
        </div>
      </div>
      <div className="plan-col">
        <ul className="plan-features" style={{ borderTop: 0, paddingTop: 0 }}>
          {plan.features.map((f, i) => <li key={i}>{f}</li>)}
        </ul>
      </div>
    </div>
  );
}

function Services({ variant = "split" }) {
  return (
    <section id="services">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="eyebrow">Engagement models</div>
            <h2>Two ways we work. Both hands-on.</h2>
            <p className="sub">
              No retainers on dashboards. No slide-deck strategy. We work alongside your team
              and leave you with an org that operates differently — and, if you want, a shipped product.
            </p>
          </div>
        </Reveal>

        {variant === "stack" ? (
          <Reveal delay={1}>
            <div className="plans stack">
              {PLANS.map(p => <StackPlan key={p.id} plan={p} featured={p.featured} />)}
            </div>
          </Reveal>
        ) : (
          <Reveal delay={1}>
            <div className={`plans ${variant === "split" ? "" : ""}`}>
              {PLANS.map(p => <PlanCard key={p.id} plan={p} featured={p.featured} />)}
            </div>
          </Reveal>
        )}

        <Reveal delay={2}>
          <div style={{ marginTop: 32, display: "flex", justifyContent: "center" }}>
            <div className="contact-availability" role="status" aria-label="1 of 2 client seats open this quarter" style={{ marginTop: 0 }}>
              <span className="dot" aria-hidden="true" />
              <span>We take only 2 clients at a time. One seat left.</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Services });