---
import Layout from '../layouts/Layout.astro';
import Cloud from '../components/Cloud.astro';
import Icon from '../components/Icon.astro';
import CTA from '../components/CTA.astro';

const groups = [
  {
    id: 'warmup',
    title: 'Warmup',
    items: [
      ['How long does warmup take?', 'Plan on 3–6 weeks for a brand-new mailbox to reach a stable warmed state. We ramp +1 / day from a 10 / day start with a 40 / day ceiling.'],
      ['Do free and premium pools mix?', 'No. Free-pool mailboxes never silently appear in the premium pool. Dedicated workers still participate in the premium pool by default.'],
      ['What gets a mailbox quarantined?', '≥ 3 invalid warmup tokens in 24h, spam score above 50, complaint rate over 0.10%, or spam-folder placement over 20% on a sufficient sample.'],
      ['Can I keep warming after I start cold sending?', 'Yes — and you should. Warmup should keep running even after campaigns begin.'],
    ],
  },
  {
    id: 'sending',
    title: 'Sending',
    items: [
      ['What is the per-mailbox cap?', 'Default 50 cold emails / day with a 10-minute minimum gap. You can lower it. You can raise it, but anything above 50 / day requires positive reputation signals.'],
      ['How do you spread sending across IPs?', 'One worker per machine, each with its own IP. We distribute mailboxes across workers and assign campaign sends round-robin across the chosen sender pool.'],
      ['Do you offer dedicated IPs?', 'Yes, on Business. A dedicated worker comes with its own IP and is allocated to a single organisation.'],
      ['What providers do you support?', 'Google Workspace / Gmail, Microsoft 365 / Outlook, and any SMTP / IMAP provider. iCloud and Zoho are first-class too.'],
    ],
  },
  {
    id: 'inbox',
    title: 'Inbox & replies',
    items: [
      ['How accurate is reply detection?', 'Reply detection survives quoted text, signatures, "sent from" footers, and forwarded threads. OOO and unsubscribe replies are classified separately.'],
      ['Can I unify several mailboxes in one view?', 'Yes — that is the whole point. Filters, search and assignment span every connected mailbox.'],
      ['Are open and click trackers reliable?', 'Honestly: opens are noisy because of Apple Mail Privacy and image proxies. We surface opens but never use them for deliverability decisions.'],
    ],
  },
  {
    id: 'security',
    title: 'Security',
    items: [
      ['Where is data stored?', 'AWS regions. us-east-1 by default, eu-west-1 on Grow and Business. Custom residency on Enterprise.'],
      ['How is mailbox auth stored?', 'Refresh tokens are envelope-encrypted with per-user KMS-derived data keys. Decrypted keys are cached briefly in Redis, never persisted to disk.'],
      ['Do you have SOC 2?', 'SOC 2 Type II audit is in progress. We can share the bridge letter once the report is issued.'],
      ['Do you sign DPAs?', 'Yes. Email hello@warmbly.com and we will turn it around within 48 hours.'],
    ],
  },
  {
    id: 'billing',
    title: 'Billing',
    items: [
      ['Do you charge per email?', 'No. Each plan includes a fixed daily send budget. Unused volume does not carry over.'],
      ['What if I disconnect a mailbox mid-month?', 'Charges are prorated. Reconnecting in the same period does not double-bill you.'],
      ['Refund policy?', 'Full refund within 14 days of a paid purchase if the platform did not work for you.'],
      ['Startup discount?', '50% off Grow for one year for pre-seed and seed companies on YC, Antler, EF, Techstars or similar.'],
    ],
  },
];
---
<Layout
  title="Frequently Asked Questions | Warmbly"
  description="Answers to common questions about email warmup, cold email sending limits, deliverability, mailbox connections, security, and billing on Warmbly."
>
  <!-- HERO with sticky-nav teaser -->
  <section class="relative isolate overflow-hidden text-white" style="background: radial-gradient(ellipse 130% 140% at 72% 28%, #0284c7 0%, #0369a1 25%, #075985 50%, #0c4a6e 80%, #0a3d5c 100%);">
    <div class="absolute top-0 right-0 w-[420px] opacity-30 pointer-events-none cloud-drift cloud-1" style="mix-blend-mode: screen;">
      <Cloud variant={5} opacity={1} />
    </div>

    <div class="container-page relative pt-14 pb-12">
      <div class="text-[11px] uppercase tracking-[0.18em] text-white/55 font-mono mb-3">FAQ</div>
      <h1 class="text-[32px] md:text-[48px] font-semibold tracking-[-0.025em] leading-[1.06] text-white max-w-3xl">
        Questions we hear the most.
      </h1>
      <div class="mt-8 flex flex-wrap gap-2">
        {groups.map((g) => (
          <a href={`#${g.id}`} class="inline-flex items-center h-7 px-3 rounded-full bg-white/10 backdrop-blur ring-1 ring-white/20 text-[12px] text-white/90 hover:bg-white/20">
            {g.title}
          </a>
        ))}
      </div>
    </div>
  </section>

  <!-- GROUPS: sticky title left, accordion right -->
  <section class="py-16 md:py-20">
    <div class="container-page space-y-16 md:space-y-24">
      {groups.map((g) => (
        <div id={g.id} class="grid lg:grid-cols-[1fr_2fr] gap-12 lg:gap-20 scroll-mt-24">
          <div class="lg:sticky lg:top-24 self-start">
            <div class="text-[11px] uppercase tracking-[0.18em] text-muted-foreground font-mono mb-3">{g.title}</div>
            <h2 class="text-[24px] md:text-[30px] font-semibold tracking-[-0.025em] text-heading leading-[1.1]">
              {g.items.length} questions answered.
            </h2>
          </div>
          <div class="divide-y divide-[color:var(--border)]">
            {g.items.map(([q, a]) => (
              <details class="group py-5">
                <summary class="flex items-start justify-between gap-4 cursor-pointer list-none">
                  <span class="text-[15px] font-medium text-heading">{q}</span>
                  <span class="shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-[color:var(--surface-2)] text-foreground/60 group-open:rotate-45 transition-transform">
                    <Icon name="plus" size={12} />
                  </span>
                </summary>
                <p class="mt-3 text-[14px] text-foreground/75 leading-relaxed max-w-2xl">{a}</p>
              </details>
            ))}
          </div>
        </div>
      ))}
    </div>
  </section>

  <CTA
    title="Still have a question?"
    description="Real humans, real response times."
    primaryLabel="Contact us"
    primaryHref="/contact/"
    secondaryLabel="See pricing"
    secondaryHref="/pricing/"
  />
</Layout>
