---
import Hero from "@/components/blocks/hero-1.astro";
import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
import { Section, SectionContent, SectionGrid, SectionProse } from "@/components/ui/section";
import { Tile, TileActions, TileContent, TileDescription, TileTitle } from "@/components/ui/tile";
import BaseLayout from "@/layouts/BaseLayout.astro";
---

<BaseLayout title="IF.Trace — Pricing" description="Simple pricing for IF.Trace: free, monthly, or pay‑as‑you‑go.">
  <Hero
    link={{ text: "Questions", href: "mailto:ds@infrafabric.io?subject=IF.Trace%20pricing%20question", icon: "mail" }}
    links={[
      { text: "Email us", href: "mailto:ds@infrafabric.io?subject=IF.Trace%20pricing", icon: "mail" },
      { text: "Browse sectors", href: "/verticals/", icon: "layers" },
    ]}
    image={{ src: "/assets/iftrace-diagram.svg", alt: "Verification flow diagram (example)" }}
  >
    <p>Simple pricing, on purpose</p>
    <h1>Pricing</h1>
    <p>Pick the plan that matches your monthly volume. No jargon.</p>
  </Hero>

  <Section aria-label="Pricing">
    <SectionContent>
      <SectionProse class="text-center">
        <p>Choose a plan</p>
        <h2>Free, monthly, or pay‑as‑you‑go.</h2>
        <p>
          A “transaction” is one published receipt (a trace link) with a yes/no integrity result.
        </p>
      </SectionProse>

      <SectionGrid class="@3xl:grid-cols-3">
        <Tile variant="floating" class="justify-between">
          <TileContent>
            <TileTitle class="text-xl">Free</TileTitle>
            <TileDescription>Try it. Share a receipt. See if it fits your workflow.</TileDescription>
            <div class="mt-4 flex items-end gap-2">
              <div class="text-4xl font-semibold tracking-tight text-white">10</div>
              <div class="pb-1 text-sm text-white/60">transactions / month</div>
            </div>
            <ul class="mt-4 space-y-2 text-sm text-white/75">
              <li class="flex gap-2"><Icon name="check" class="mt-0.5" />Public receipt pages (no login)</li>
              <li class="flex gap-2"><Icon name="check" class="mt-0.5" />HTML fallback for reviewers</li>
              <li class="flex gap-2"><Icon name="check" class="mt-0.5" />Best for testing and low volume</li>
            </ul>
          </TileContent>
          <TileActions class="mt-auto w-full">
            <Button class="w-full" size="sm" href="https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n" target="_blank" rel="noreferrer">
              <Icon name="sparkles" />
              See a live receipt
            </Button>
          </TileActions>
        </Tile>

        <Tile variant="floating" class="justify-between">
          <TileContent>
            <TileTitle class="text-xl">Monthly</TileTitle>
            <TileDescription>Pick a monthly volume. The slider shows the price.</TileDescription>

            <div class="mt-5 rounded-xl border border-white/10 bg-white/5 p-4">
              <div class="flex items-center justify-between gap-3">
                <div class="text-sm font-semibold text-white/85">Monthly volume</div>
                <div class="text-xs text-white/60"><span id="plan-volume">100</span> / month</div>
              </div>

              <input
                id="plan-slider"
                type="range"
                min="0"
                max="3"
                step="1"
                value="0"
                class="mt-4 w-full accent-orange-500"
                aria-label="Monthly plan volume selector"
              />

              <div class="mt-2 flex items-center justify-between text-[11px] text-white/55">
                <span>100</span>
                <span>1,000</span>
                <span>10,000</span>
                <span>25,000+</span>
              </div>

              <div class="mt-5 grid grid-cols-2 gap-3">
                <div class="rounded-lg border border-white/10 bg-slate-950/40 p-3">
                  <div class="text-[11px] text-white/60">Price / month</div>
                  <div class="mt-1 text-2xl font-semibold tracking-tight text-white" id="plan-monthly">$9.99</div>
                </div>
                <div class="rounded-lg border border-white/10 bg-slate-950/40 p-3">
                  <div class="text-[11px] text-white/60">Effective price</div>
                  <div class="mt-1 text-2xl font-semibold tracking-tight text-white" id="plan-effective">$0.10</div>
                  <div class="text-[11px] text-white/50">per transaction</div>
                </div>
              </div>
            </div>

            <ul class="mt-4 space-y-2 text-sm text-white/75">
              <li class="flex gap-2"><Icon name="check" class="mt-0.5" />Includes everything in Free</li>
              <li class="flex gap-2"><Icon name="check" class="mt-0.5" />Designed for repeated external review</li>
              <li class="flex gap-2"><Icon name="check" class="mt-0.5" />Upgrade or switch to pay‑as‑you‑go anytime</li>
            </ul>
          </TileContent>
          <TileActions class="mt-auto w-full">
            <Button class="w-full" size="sm" href="mailto:ds@infrafabric.io?subject=IF.Trace%20monthly%20plan">
              <Icon name="mail" />
              Start monthly plan
            </Button>
          </TileActions>
        </Tile>

        <Tile variant="floating" class="justify-between">
          <TileContent>
            <TileTitle class="text-xl">Pay‑as‑you‑go</TileTitle>
            <TileDescription>For irregular volume. No monthly commitment.</TileDescription>
            <div class="mt-4 flex items-end gap-2">
              <div class="text-4xl font-semibold tracking-tight text-white">$0.12</div>
              <div class="pb-1 text-sm text-white/60">per transaction</div>
            </div>
            <ul class="mt-4 space-y-2 text-sm text-white/75">
              <li class="flex gap-2"><Icon name="check" class="mt-0.5" />Same receipt surface</li>
              <li class="flex gap-2"><Icon name="check" class="mt-0.5" />Good for spikes and seasonal workflows</li>
              <li class="flex gap-2"><Icon name="check" class="mt-0.5" />No commitment</li>
            </ul>
          </TileContent>
          <TileActions class="mt-auto w-full">
            <Button class="w-full" size="sm" href="mailto:ds@infrafabric.io?subject=IF.Trace%20paygo">
              <Icon name="mail" />
              Enable pay‑as‑you‑go
            </Button>
          </TileActions>
        </Tile>
      </SectionGrid>

      <div class="mx-auto mt-10 max-w-3xl text-sm text-white/70">
        <p class="text-white/80 font-semibold">Notes</p>
        <ul class="mt-2 list-disc space-y-1 pl-5">
          <li>We may introduce fair‑use limits (for example: unusually large files or unusually high download volume) to protect reliability.</li>
          <li>We will warn you before applying any new overage pricing.</li>
        </ul>
        <p class="mt-4">
          Terms: <a class="text-primary hover:underline" href="/terms/">/terms/</a>
        </p>
      </div>
    </SectionContent>
  </Section>

  <script is:inline>
    const tiers = [
      { volume: 100, monthly: 9.99, effective: 0.0999 },
      { volume: 1000, rate: 0.07 },
      { volume: 10000, rate: 0.06 },
      { volume: 25000, rate: 0.05, plus: true }
    ];

    function money(n) {
      return `$${n.toFixed(2)}`;
    }

    function money4(n) {
      return `$${n.toFixed(2)}`;
    }

    function fmtVolume(n, plus) {
      const s = n.toLocaleString("en-US");
      return plus ? `${s}+` : s;
    }

    function initPricingSlider() {
      const slider = document.getElementById("plan-slider");
      if (!slider) return;

      const volumeEl = document.getElementById("plan-volume");
      const monthlyEl = document.getElementById("plan-monthly");
      const effectiveEl = document.getElementById("plan-effective");

      function render() {
        const idx = Number(slider.value || 0);
        const tier = tiers[idx] || tiers[0];

        const volume = tier.volume;
        const monthly = tier.monthly ?? (volume * (tier.rate ?? 0));
        const effective = monthly / volume;

        if (volumeEl) volumeEl.textContent = fmtVolume(volume, Boolean(tier.plus));
        if (monthlyEl) monthlyEl.textContent = money(monthly);
        if (effectiveEl) effectiveEl.textContent = money4(effective);
      }

      slider.addEventListener("input", render);
      render();
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", initPricingSlider);
    } else {
      initPricingSlider();
    }
    document.addEventListener("astro:page-load", initPricingSlider);
  </script>
</BaseLayout>