// Pricing.jsx — Stripe-style two-card pricing: pay-as-you-go + custom
function Pricing({ onBook, onContact }) {
  return (
    <section className="section pricing-section" id="pricing">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>Pricing</span>
          <h2>Simple, pay-as-you-go pricing. <em>No setup fees. No hidden fees.</em></h2>
          <p>
            We price every engagement around the actual work — not seat counts or contracts.
            Start with one workflow, scale as you see the value.
          </p>
        </div>

        <div className="pricing-shell">
          <div className="pricing-card light reveal">
            <div className="pricing-tag" style={{ color: "var(--fg-3)" }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--slate-400)", display: "inline-block" }}></span>
              Standard
            </div>
            <h3>Pay-as-you-go</h3>
            <div className="amount">
              <span className="big">Custom</span>
              <span className="sub">— priced per workflow</span>
            </div>
            <p className="desc">
              For teams that want to start with one operational problem and see the result before
              committing to more. Every quote is fixed up-front in writing — no surprises on the invoice.
            </p>
            <ul className="pricing-list">
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>One-page proposal within 48 hours of the consult</li>
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>Named operations lead from day one</li>
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>All tooling, agents, and engineering included</li>
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>Cancel any time — month-to-month</li>
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>Monthly reporting on hours saved &amp; ROI</li>
            </ul>
            <div className="pricing-note">
              <i data-lucide="info" className="ic"></i>
              No setup fees. No monthly platform fees. No surprise charges.
            </div>
            <div className="pricing-action">
              <button className="btn primary lg" onClick={onContact}>
                Get a quote
                <i data-lucide="arrow-right" className="ic"></i>
              </button>
            </div>
          </div>

          <div className="pricing-card dark reveal d1">
            <div className="pricing-tag">
              <span className="dot"></span>
              Operating partner
            </div>
            <h3>Embedded team</h3>
            <div className="amount">
              <span className="big">Let's talk</span>
              <span className="sub">— scoped to your ops</span>
            </div>
            <p className="desc">
              For teams who want DuckTask as the operating layer of the business: HR + admin +
              automation + AI agents, run as one program with a single point of contact.
            </p>
            <ul className="pricing-list">
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>Everything in pay-as-you-go, across multiple workflows</li>
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>Dedicated ops lead + engineer + AI specialist</li>
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>Custom software &amp; SaaS builds included</li>
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>Quarterly business review with leadership</li>
              <li><span className="check"><i data-lucide="check" className="ic"></i></span>Priority response &amp; on-call coverage</li>
            </ul>
            <div className="pricing-note">
              <i data-lucide="phone-call" className="ic"></i>
              20-min consultation, then a written plan. No commitment.
            </div>
            <div className="pricing-action">
              <button className="btn bill lg" onClick={onBook}>
                Book a consultation
                <i data-lucide="arrow-right" className="ic"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;