// pricing-faq.jsx - pricing tiers + FAQ accordion

function Pricing({ show = true, onCTA }) {
  if (!show) return null;
  const tiers = [
    {
      name: "Audit",
      tag: "Best first step",
      tagTone: "blue",
      price: "€1,200",
      priceRange: "- €2,500",
      sub: "1-2 weeks · fixed fee",
      what: "We audit your stack, score the risks, and hand you a 90-day modernization plan you can run with or without us.",
      includes: [
        "Full architecture review",
        "Pipeline & infra assessment",
        "Security & compliance scan",
        "90-day prioritized roadmap",
        "Effort estimates per workstream",
      ],
      cta: "Get an audit quote",
      featured: false,
    },
    {
      name: "CI/CD Fast-Track",
      tag: "Most popular",
      tagTone: "red",
      price: "€1,800",
      priceRange: "- €3,500",
      sub: "~2 weeks per repo · fixed fee",
      what: "We rebuild your pipeline end-to-end. Three-stage flow, secret management, QA self-serve, observable everything.",
      includes: [
        "Three-stage release pipeline",
        "Secrets vault integration",
        "QA self-serve release UI",
        "Build caching & parallelization",
        "Runbook + handover session",
      ],
      cta: "Get a CI/CD quote",
      featured: true,
    },
    {
      name: "Modernization",
      tag: "Larger scope",
      tagTone: "blue",
      price: "€4,500",
      priceRange: "- €18,000",
      sub: "Phased, weekly drops",
      what: ".NET Framework → .NET 10, WCF → REST, on-prem → Azure. Service by service, never a multi-month freeze.",
      includes: [
        "App-by-app migration plan",
        ".NET 10 upgrades + library audit",
        "API modernization (WCF → REST/gRPC)",
        "Azure landing zone",
        "Cutover + rollback playbooks",
      ],
      cta: "Get a modernization quote",
      featured: false,
    },
  ];

  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="sb-sec-head">
          <div>
            <span className="eyebrow">Pricing</span>
            <h2 className="h1" style={{ marginTop: 18 }}>
              <em>Fixed fee.</em><br />
              Fixed date. On the page.
            </h2>
          </div>
          <p className="lede" style={{ marginTop: 6 }}>
            No hourly billing. No retainer creep. 50% to start, 50% on delivery.
            VAT included. If we don't ship what's in the SOW, you don't pay
            the second half.
          </p>
        </div>

        <div className="sb-tiers">
          {tiers.map((t, i) => (
            <article key={i} className={"sb-tier " + (t.featured ? "is-featured" : "")}>
              <header className="sb-tier-head">
                <div className="sb-tier-name-row">
                  <h3 className="h3" style={{ fontSize: 18 }}>{t.name}</h3>
                  <span className={"chip " + (t.tagTone === "red" ? "chip--red" : "chip--blue")}>{t.tag}</span>
                </div>
                <div className="sb-tier-price">
                  <span className="sb-tier-from kicker">From</span>
                  <span className="sb-tier-amount">{t.price}</span>
                  <span className="sb-tier-range">{t.priceRange}</span>
                </div>
                <p className="sb-tier-sub mono">{t.sub}</p>
              </header>

              <p className="sb-tier-what">{t.what}</p>

              <ul className="sb-tier-list">
                {t.includes.map((it, j) => (
                  <li key={j}>
                    <CheckCircle />
                    <span>{it}</span>
                  </li>
                ))}
              </ul>

              <button
                className={"btn " + (t.featured ? "btn--primary" : "btn--ghost")}
                onClick={onCTA}
                style={{ width: "100%", justifyContent: "center" }}
              >
                {t.cta}
              </button>
            </article>
          ))}
        </div>

        <div className="sb-pricing-foot">
          <div className="sb-pricing-foot-item">
            <span className="sb-pf-icon">✓</span>
            <div>
              <strong>100% fixed-fee guarantee</strong>
              <span>No surprise invoices. Quote is the price.</span>
            </div>
          </div>
          <div className="sb-pricing-foot-item">
            <span className="sb-pf-icon">↺</span>
            <div>
              <strong>50 / 50 payment terms</strong>
              <span>Half to start, half on signed acceptance.</span>
            </div>
          </div>
          <div className="sb-pricing-foot-item">
            <span className="sb-pf-icon">⊘</span>
            <div>
              <strong>No vendor lock-in</strong>
              <span>You own the code, IaC, runbooks, accounts.</span>
            </div>
          </div>
          <div className="sb-pricing-foot-item">
            <span className="sb-pf-icon">€</span>
            <div>
              <strong>Custom scope?</strong>
              <span>Maintenance, multi-team, longer modernization - ask.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CheckCircle() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden style={{ flexShrink: 0, marginTop: 3 }}>
      <circle cx="8" cy="8" r="7" stroke="var(--bridge-red)" strokeWidth="1.2"/>
      <path d="m5 8 2 2 4-4" stroke="var(--bridge-red)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function FAQ() {
  const items = [
    {
      q: "How long until you can start?",
      a: "Usually within 1-2 weeks of signed SOW. Audits often start within 5 business days."
    },
    {
      q: "Do you work with both Azure DevOps and GitHub Actions?",
      a: "Both, fluently. The three-stage flow, secret management, and observability patterns are the same - only the YAML changes. We'll match your existing platform or recommend one based on your team's preferences."
    },
    {
      q: "What .NET versions and stacks do you cover?",
      a: ".NET Framework 4.5+ through .NET 10, including WCF, WebForms, MVC 5, Web API 2, EF6, EF Core, Blazor, MAUI, and worker services. We've migrated all of these to modern .NET on Azure App Service, Container Apps, and AKS."
    },
    {
      q: "What happens after delivery? Do we need to keep paying you?",
      a: "No retainer required. You own everything: code, pipelines, infrastructure-as-code, runbooks, and Azure accounts. We include 30 days of post-launch support. After that, hire us back per engagement, or don't."
    },
    {
      q: "Can you do maintenance and ongoing development too?",
      a: "Yes - once we've delivered an initial engagement and you've seen our work, we can take on maintenance or feature development on a monthly retainer. We prefer this order so you're not signing up blind."
    },
    {
      q: "What if scope changes mid-engagement?",
      a: "We re-quote in writing before doing the work. No silent scope creep, no surprise invoices. If something we estimated turns out simpler, the price drops."
    },
    {
      q: "Where are you based? What timezone?",
      a: "Tbilisi, Georgia - but we work CET-aligned hours so calls and async overlap fully with EU teams. NDAs signed before any code or pipeline access. GDPR-aware on data handling for EU clients."
    },
    {
      q: "Is the founder really on the project, or is this a bait-and-switch?",
      a: "I (Saba) am on every project. I do the audit, write the SOW, and provide daily updates in your preferred channel (Slack, Teams, email, or Jira). For larger scopes I bring in 1-2 senior engineers I've worked with for years - you meet them on the kickoff call."
    },
  ];

  const [open, setOpen] = React.useState(0);
  return (
    <section className="section section--alt" id="faq">
      <div className="wrap">
        <div className="sb-sec-head">
          <div>
            <span className="eyebrow">FAQ</span>
            <h2 className="h1" style={{ marginTop: 18 }}>
              The <em>boring</em> questions,<br />answered.
            </h2>
          </div>
          <p className="lede" style={{ marginTop: 6 }}>
            Still missing something? Email{" "}
            <a href="mailto:hello@skybridgesystems.io" className="sb-link">hello@skybridgesystems.io</a>{" "}
            - typical response in &lt; 4 hours during CET business days.
          </p>
        </div>

        <div className="sb-faq">
          {items.map((it, i) => (
            <details key={i} open={open === i} onToggle={(e) => e.target.open && setOpen(i)}>
              <summary>
                <span className="sb-faq-q-num mono">- {String(i + 1).padStart(2, "0")}</span>
                <span className="sb-faq-q">{it.q}</span>
                <span className="sb-faq-toggle" aria-hidden>
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
                </span>
              </summary>
              <div className="sb-faq-a">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

const pfStyles = document.createElement("style");
pfStyles.textContent = `
  /* Pricing */
  .sb-tiers {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin-bottom: 48px;
  }
  @media (max-width: 980px) { .sb-tiers { grid-template-columns: 1fr; } }

  .sb-tier {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 28px 28px;
    display: flex; flex-direction: column; gap: 20px;
    position: relative;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
  }
  .sb-tier:hover { border-color: var(--line-strong); transform: translateY(-2px); }
  .sb-tier.is-featured {
    background: var(--surface-invert);
    border-color: var(--surface-invert-line);
    color: var(--surface-invert-fg);
  }
  .sb-tier.is-featured .kicker,
  .sb-tier.is-featured .sb-tier-sub,
  .sb-tier.is-featured .sb-tier-what,
  .sb-tier.is-featured .sb-tier-list li { color: var(--surface-invert-muted); }
  .sb-tier.is-featured .sb-tier-range { color: var(--surface-invert-muted); }
  .sb-tier.is-featured h3,
  .sb-tier.is-featured .sb-tier-amount { color: var(--surface-invert-fg); }
  .sb-tier.is-featured .chip--red {
    background: rgba(229,96,78,0.18);
    color: #F0B5AC;
    border-color: rgba(229,96,78,0.4);
  }
  .sb-tier.is-featured circle { stroke: #F0B5AC; }
  .sb-tier.is-featured path { stroke: #F0B5AC; }

  .sb-tier-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; border-bottom: 1px dashed var(--line); }
  .sb-tier.is-featured .sb-tier-head { border-color: var(--surface-invert-line); }
  .sb-tier-name-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .sb-tier-price { display: flex; align-items: baseline; gap: 8px; }
  .sb-tier-from { font-size: 10px; }
  .sb-tier-amount { font-family: var(--f-serif); font-size: 52px; line-height: 1; color: var(--ink); letter-spacing: -0.015em; }
  .sb-tier-range { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
  .sb-tier-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
  .sb-tier-what { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; }
  .sb-tier-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .sb-tier-list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }

  .sb-pricing-foot {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden;
  }
  @media (max-width: 820px) { .sb-pricing-foot { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .sb-pricing-foot { grid-template-columns: 1fr; } }
  .sb-pricing-foot-item {
    display: flex; gap: 14px; padding: 22px 24px;
    border-right: 1px solid var(--line);
    background: var(--paper);
  }
  .sb-pricing-foot-item:last-child { border-right: 0; }
  @media (max-width: 820px) {
    .sb-pricing-foot-item:nth-child(2n) { border-right: 0; }
    .sb-pricing-foot-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  }
  @media (max-width: 480px) {
    .sb-pricing-foot-item { border-right: 0; border-bottom: 1px solid var(--line); }
    .sb-pricing-foot-item:last-child { border-bottom: 0; }
  }
  .sb-pf-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--bridge-red-soft); color: var(--bridge-red);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600;
  }
  .sb-pricing-foot-item > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
  .sb-pricing-foot-item strong { color: var(--ink); font-size: 14px; font-weight: 500; }

  /* FAQ */
  .sb-faq {
    border-top: 1px solid var(--line);
  }
  .sb-faq details {
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
  }
  .sb-faq summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 56px 1fr 32px;
    gap: 16px;
    align-items: center;
    font-family: var(--f-serif);
    font-size: clamp(20px, 2vw, 26px);
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.25;
    transition: color .15s var(--ease);
  }
  .sb-faq summary::-webkit-details-marker { display: none; }
  .sb-faq summary:hover { color: var(--bridge-red); }
  .sb-faq-q-num { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; align-self: start; padding-top: 6px; }
  .sb-faq-toggle {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: transform .25s var(--ease), background .15s var(--ease);
  }
  .sb-faq details[open] .sb-faq-toggle { transform: rotate(45deg); background: var(--bridge-red); color: var(--paper); border-color: var(--bridge-red); }
  .sb-faq-a {
    padding: 16px 0 0 72px;
    font-size: 15.5px;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 70ch;
  }
  @media (max-width: 560px) {
    .sb-faq summary { grid-template-columns: 1fr 32px; }
    .sb-faq-q-num { display: none; }
    .sb-faq-a { padding-left: 0; }
  }
  .sb-link { color: var(--bridge-red); border-bottom: 1px solid currentColor; }
`;
document.head.appendChild(pfStyles);

Object.assign(window, { Pricing, FAQ });