/* global React, PageNav, PageFooter, PageCTA, PSLabel, UmIcon, PageHero, PMDS_SERVICES, PMDS_AI_PACK, PMDS_AI_IMPLEMENTATION, PricingTiers */
const { useState: usePR, useMemo: useMemoPR } = React;

/* Central pricing page — rebuilt around the full services + AI registry. */

function PricingPage() {
  const [filter, setFilter] = usePR("all"); // all | content | brand | product | ai

  const groups = useMemoPR(() => ({
    all: PMDS_SERVICES,
    content: PMDS_SERVICES.filter(s => ["static-graphics", "motion-graphics", "video-production", "photography-videography", "digital-marketing", "presentation-design"].includes(s.id)),
    brand:   PMDS_SERVICES.filter(s => ["logo-creation", "presentation-design"].includes(s.id)),
    product: PMDS_SERVICES.filter(s => ["web-design", "ui-ux"].includes(s.id)),
  }), []);

  const list = groups[filter] || groups.all;

  const faqs = [
    { q: "How do you scope a project?",
      a: "Pick a tier on any service or open the Order flow — you'll get a tailored offer in 5 minutes with a discount applied. Prefer to talk first? Book a 15-min intro call." },
    { q: "What payment methods do you accept?",
      a: "Bank transfer and bank cheque. Wire / e-transfer cleared same-day; cheques cleared on receipt. Both methods generate a record and a project number." },
    { q: "Do you offer payment plans?",
      a: "Yes — 50/50 split is standard for projects above $2k. Identity builds and full UI/UX projects run on a 3-stage milestone schedule." },
    { q: "What's your turnaround?",
      a: "Single static assets: 72 hours. Decks and motion: 5–7 days. Brand identity builds: 3–4 weeks. UI/UX and websites: 4–6 weeks. Rush queue is available — pick the ASAP timeline in the Order flow." },
    { q: "Can I combine services for a discount?",
      a: "Yes. Picking 2 services gets 10% off. Picking 3+ gets up to 15%. Choose a flexible timeline for another 5–8% off. Discounts auto-apply in the Order flow." },
    { q: "What's included in the AI Pack?",
      a: "Six pre-configured automations: Claude Code, VS Code + extension, an infrastructure pack (private repo with scripts/skills/hooks), Telegram bot, Google Sheets connection, and a final testing suite. Self-serve for $19.99, or done-for-you in 1–2 days for $400." },
    { q: "Can you work inside our brand?",
      a: "Always. Every retainer starts with a brand calibration. I'll get inside your brand system and ship work that strengthens it, not replaces it." },
  ];

  return (
    <React.Fragment>
      <PageNav active="pricing"/>

      <PageHero
        kicker="Pricing · 10 services · Transparent rates"
        title="Build your"
        accent="package."
        lede="Every service shipped on this site has 2–3 plans. Pick what fits, stack what you need, or run it through the order flow for a tailored bundle + automatic discount."
      />

      {/* QUICK ACTIONS */}
      <section className="um-container" style={{paddingTop: 40, paddingBottom: 40}}>
        <div className="pr-cta-row">
          <a className="um-btn-primary" href="order.html">
            Start order flow <UmIcon name="ico-arrow-right" size={14}/>
          </a>
          <a className="um-btn-ghost" href="book-appointment.html">
            Book a 15-min call
          </a>
          <span className="pr-cta-note">Discount stacking is automatic at checkout · Up to 25% off</span>
        </div>

        {/* FILTER TABS */}
        <div className="pr-filter">
          {[
            { v: "all",     l: "All services", n: PMDS_SERVICES.length },
            { v: "content", l: "Content",      n: groups.content.length },
            { v: "brand",   l: "Brand",        n: groups.brand.length },
            { v: "product", l: "Product",      n: groups.product.length },
          ].map(t => (
            <button key={t.v}
                    className={"pr-tab " + (filter === t.v ? "active" : "")}
                    onClick={() => setFilter(t.v)}>
              {t.l} <span className="pr-tab-n">{t.n}</span>
            </button>
          ))}
        </div>
      </section>

      {/* SERVICE BLOCKS */}
      <section className="um-container" style={{paddingBottom: 60}}>
        <div style={{display:"flex", flexDirection:"column", gap: 64}}>
          {list.map(s => (
            <div key={s.id} className="pr-service-block">
              <div className="pr-service-head">
                <div>
                  <div className="pr-service-kicker">{s.kicker}</div>
                  <h2 className="pr-service-title">
                    {s.title.replace(s.accent, "").trim()} <span className="accent">{s.accent}</span>
                  </h2>
                  <p className="pr-service-lede">{s.short}</p>
                </div>
                <div className="pr-service-actions">
                  <a className="um-btn-ghost" href={`../services/${s.id}.html`}>
                    Service detail <UmIcon name="ico-arrow-up-right" size={14}/>
                  </a>
                </div>
              </div>
              <PricingTiers tiers={s.tiers} serviceId={s.id}/>
            </div>
          ))}
        </div>
      </section>

      {/* AI OFFERINGS BLOCK */}
      <section className="ps-work-section" style={{
        background: "radial-gradient(ellipse at 50% 0%, rgba(0,163,255,0.06), transparent 60%)",
        borderTop: "1px solid rgba(255,255,255,0.06)",
        borderBottom: "1px solid rgba(255,255,255,0.06)",
        padding: "80px 0",
      }}>
        <div className="um-container">
          <div className="pw-section-head">
            <div>
              <PSLabel>AI offerings · Add-on</PSLabel>
              <h2 style={{fontWeight:800, fontSize:"clamp(36px, 4.5vw, 56px)",
                          letterSpacing:"-0.02em", margin:"14px 0 0", lineHeight: 1.05}}>
                Add an <span className="accent">automation</span> layer.
              </h2>
            </div>
            <p className="pw-section-aside">
              Build your own 6-step automation stack, or have us install it for you in 1–2 days.
            </p>
          </div>

          <div className="pr-ai-grid">
            <div className="pr-ai-card">
              <div className="pr-ai-kicker">Self-serve · DIY</div>
              <h3>AI Automation Pack</h3>
              <p>Claude Code, VS Code, private infra pack, Telegram bot, Google Sheets — pre-configured. You install in an afternoon.</p>
              <a className="pr-ai-link" href="ai-automation-pack.html">Explore the AI Pack →</a>
              <PricingTiers tiers={[PMDS_AI_PACK.tiers[0]]} serviceId="ai-pack"/>
            </div>
            <div className="pr-ai-card featured">
              <div className="pr-ai-kicker">Done-for-you · Most popular</div>
              <h3>Implementation Service</h3>
              <p>Skip the technical setup. We install, test, and walk you through everything in 1–2 days. 7 days of email support included.</p>
              <a className="pr-ai-link" href="ai-implementation.html">Implementation details →</a>
              <PricingTiers tiers={[PMDS_AI_IMPLEMENTATION.tiers[0]]} serviceId="ai-implementation"/>
            </div>
          </div>
        </div>
      </section>

      {/* DISCOUNT EXPLAINER */}
      <section className="um-container ps-work-section">
        <div className="pw-section-head">
          <div>
            <PSLabel>Bundle math</PSLabel>
            <h2 style={{fontWeight:800, fontSize:"clamp(36px, 4.5vw, 56px)",
                        letterSpacing:"-0.02em", margin:"14px 0 0", lineHeight: 1.05}}>
              Stack services. <span className="accent">Save more.</span>
            </h2>
          </div>
          <p className="pw-section-aside">
            All discounts apply automatically at checkout in the Order flow.
          </p>
        </div>
        <div className="pr-discount-grid">
          <div className="pr-discount-card"><div className="num">10%</div><div className="t">2 services</div><div className="d">Pair any two service plans.</div></div>
          <div className="pr-discount-card featured"><div className="num">15%</div><div className="t">3+ services</div><div className="d">The most popular bundle.</div></div>
          <div className="pr-discount-card"><div className="num">+5%</div><div className="t">Within a month</div><div className="d">Standard onboarding window.</div></div>
          <div className="pr-discount-card"><div className="num">+8%</div><div className="t">Flexible timeline</div><div className="d">No rush — I pick the slot.</div></div>
        </div>
      </section>

      {/* FAQ */}
      <section className="um-container ps-work-section">
        <div className="pw-section-head">
          <div>
            <PSLabel>Common questions</PSLabel>
            <h2 style={{fontWeight:800, fontSize:"clamp(36px, 4.5vw, 56px)",
                        letterSpacing:"-0.02em", margin:"14px 0 0", lineHeight: 1.05}}>
              Quick <span className="accent">answers.</span>
            </h2>
          </div>
        </div>
        <div className="pricing-faq">
          {faqs.map((f, i) => <FAQItem key={i} item={f}/>)}
        </div>
      </section>

      <PageCTA headline="Ready to scope a" accent="project?"/>

      <PageFooter/>
    </React.Fragment>
  );
}

const { useState: useFAQ } = React;
function FAQItem({ item }) {
  const [open, setOpen] = useFAQ(false);
  return (
    <button className={"faq-item " + (open ? "open" : "")} onClick={() => setOpen(!open)}>
      <div className="faq-q">
        <span>{item.q}</span>
        <span className="faq-sign">{open ? "−" : "+"}</span>
      </div>
      {open && <div className="faq-a">{item.a}</div>}
    </button>
  );
}

window.PricingPage = PricingPage;