> ## Documentation Index
> Fetch the complete documentation index at: https://testdocs.clodura.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Calculator

> Estimate how many Clodura.AI credits you need and see what they unlock across emails, phones, calls, warm-up, inbox tests, and AI Writer.

export const CreditsCalculator = () => {
  const STEPS = [100, 2000, 4500, 6900, 10000, 15000, 20000, 30000, 50000, 75000, 100000, 250000];

  const SERVICES = [
    { key: "emails", label: "Emails", cost: 1, icon: "📧", note: (n) => `Access up to ${Math.floor(n / 4).toLocaleString()} contact emails` },
    { key: "phones", label: "Phone Numbers", cost: 10, icon: "📞", note: (n) => `Access up to ${Math.floor(n / 100).toLocaleString()} contact phone numbers` },
    { key: "callMins", label: "Call Minutes", cost: 3, icon: "🎙️", suffix: " Mins", note: (n) => `${Math.floor(n / 100).toLocaleString()} minutes of talk time` },
    { key: "warmups", label: "Mailbox Warm-up", cost: 200, icon: "🔥", note: () => "Ensure inbox delivery" },
    { key: "inboxTests", label: "Inbox Placement Test", cost: 50, icon: "📥", note: () => "Test inbox vs. spam delivery" },
    { key: "aiWriter", label: "AI Writer", cost: 50, icon: "✍️", note: () => "Create personalized cold emails" },
  ];

  const MONTHLY_PLANS = [
    { credits: 5000, monthly: 100, annualPerMonth: 90 },
    { credits: 8000, monthly: 156, annualPerMonth: 140 },
    { credits: 10000, monthly: 194, annualPerMonth: 175 },
    { credits: 15000, monthly: 283, annualPerMonth: 255 },
    { credits: 20000, monthly: 378, annualPerMonth: 340 },
    { credits: 30000, monthly: 550, annualPerMonth: 495 },
    { credits: 50000, monthly: 806, annualPerMonth: 725 },
    { credits: 75000, monthly: 1200, annualPerMonth: 1108 },
    { credits: 100000, monthly: 1556, annualPerMonth: 1400 },
    { credits: 250000, monthly: 3889, annualPerMonth: 3500 },
  ];

  const PAYG_PLANS = [
    { credits: 2500, price: 100 },
    { credits: 5000, price: 200 },
    { credits: 10000, price: 389 },
    { credits: 15000, price: 567 },
    { credits: 20000, price: 756 },
    { credits: 30000, price: 1100 },
    { credits: 50000, price: 1611 },
    { credits: 75000, price: 2400 },
    { credits: 100000, price: 3111 },
    { credits: 250000, price: 7778 },
  ];

  const [stepIdx, setStepIdx] = React.useState(3);
  const [billing, setBilling] = React.useState("annual");

  const credits = STEPS[stepIdx];

  const findPlan = () => {
    const plans = billing === "payg" ? PAYG_PLANS : MONTHLY_PLANS;
    return plans.find((p) => p.credits >= credits) || plans[plans.length - 1];
  };
  const plan = findPlan();
  const planPrice =
    billing === "payg" ? plan.price : billing === "annual" ? plan.annualPerMonth : plan.monthly;
  const priceSuffix =
    billing === "payg" ? "one-time" : billing === "annual" ? "Per Month, Billed yearly" : "Per Month";

  const tabBtn = (active) => ({
    padding: "8px 18px",
    borderRadius: "999px",
    border: "none",
    background: active ? "#111827" : "transparent",
    color: active ? "#fff" : "#6b7280",
    cursor: "pointer",
    fontSize: "13px",
    fontWeight: 600,
  });

  const card = {
    border: "1px solid #e5e7eb",
    borderRadius: "12px",
    padding: "18px",
    background: "#fff",
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
  };

  return (
    <div style={{ fontFamily: "inherit", color: "#111827" }}>
      {/* Billing toggle */}
      <div style={{ display: "inline-flex", padding: "4px", background: "#f3f4f6", borderRadius: "999px", marginBottom: "20px" }}>
        <button style={tabBtn(billing === "monthly")} onClick={() => setBilling("monthly")}>Monthly</button>
        <button style={tabBtn(billing === "annual")} onClick={() => setBilling("annual")}>
          Yearly <span style={{ fontSize: "11px", marginLeft: "4px", color: billing === "annual" ? "#86efac" : "#22c55e" }}>Save 10%</span>
        </button>
        <button style={tabBtn(billing === "payg")} onClick={() => setBilling("payg")}>PAYG</button>
      </div>

      {/* Slider section */}
      <div style={{ ...card, marginBottom: "20px" }}>
        <div style={{ fontSize: "13px", fontWeight: 600, color: "#6b7280", marginBottom: "6px" }}>
          Credits needed per month
        </div>
        <div style={{ fontSize: "12px", color: "#9ca3af", marginBottom: "16px" }}>
          Unused credits roll over for 2 months.
        </div>

        <input
          type="range"
          min="0"
          max={STEPS.length - 1}
          step="1"
          value={stepIdx}
          onChange={(e) => setStepIdx(Number(e.target.value))}
          style={{ width: "100%", accentColor: "#2563eb" }}
        />
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: "10px", color: "#9ca3af", marginTop: "6px" }}>
          {STEPS.map((s, i) => (
            <span key={i} style={{ fontWeight: i === stepIdx ? 700 : 400, color: i === stepIdx ? "#2563eb" : "#9ca3af" }}>
              {s >= 1000 ? `${s / 1000}K` : s}
            </span>
          ))}
        </div>

        <div style={{ marginTop: "20px", display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: "16px" }}>
          <div>
            <div style={{ fontSize: "13px", color: "#6b7280" }}>Credits needed per month (~)</div>
            <div style={{ fontSize: "34px", fontWeight: 700, color: "#2563eb" }}>
              {credits.toLocaleString()}
            </div>
            <div style={{ fontSize: "12px", color: "#6b7280" }}>
              Recommended Plan: <strong>{plan.credits >= 1000 ? `${plan.credits / 1000}K` : plan.credits}</strong>
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: "13px", color: "#6b7280" }}>{plan.credits >= 1000 ? `${plan.credits / 1000}K` : plan.credits} Credits Cost</div>
            <div style={{ fontSize: "34px", fontWeight: 700, color: "#111827" }}>
              ${planPrice.toLocaleString()}
            </div>
            <div style={{ fontSize: "12px", color: "#6b7280" }}>{priceSuffix}</div>
          </div>
        </div>
      </div>

      {/* Service blocks */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "14px" }}>
        {SERVICES.map((s) => {
          const value = Math.floor(credits / s.cost);
          return (
            <div key={s.key} style={card}>
              <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "10px" }}>
                <span style={{ fontSize: "20px" }}>{s.icon}</span>
                <span style={{ fontSize: "13px", fontWeight: 600, color: "#374151" }}>{s.label}*</span>
              </div>
              <div style={{ fontSize: "26px", fontWeight: 700, color: "#2563eb", marginBottom: "4px" }}>
                {value.toLocaleString()}{s.suffix || ""}
              </div>
              <div style={{ fontSize: "11px", color: "#9ca3af", marginBottom: "8px" }}>
                {credits.toLocaleString()}/{s.cost} = {value.toLocaleString()}
              </div>
              <div style={{ fontSize: "12px", color: "#6b7280" }}>{s.note(credits)}</div>
            </div>
          );
        })}
      </div>

      <p style={{ fontSize: "11px", color: "#9ca3af", marginTop: "16px" }}>
        * Estimate based on the lowest-cost data source. Actual usage may vary.
      </p>

      <div style={{ marginTop: "20px", textAlign: "center" }}>
        <a
          href="https://www.clodura.ai/pricing/"
          style={{
            display: "inline-block",
            padding: "12px 28px",
            background: "#2563eb",
            color: "#fff",
            borderRadius: "8px",
            fontWeight: 600,
            fontSize: "14px",
            textDecoration: "none",
          }}
        >
          Sign up for free
        </a>
      </div>
    </div>
  );
};

Slide to choose how many credits you need each month and see exactly what they unlock — emails, phone numbers, call minutes, warm-up, inbox tests, and AI Writer.

<CreditsCalculator />

## Where can I use credits?

<CardGroup cols={2}>
  <Card title="Email Reveal" icon="envelope">
    1 credit per email found
  </Card>

  <Card title="Phone Reveal" icon="phone">
    10 credits per phone number
  </Card>

  <Card title="Call Minutes" icon="microphone">
    3 credits per call minute (US/Canada)
  </Card>

  <Card title="Mailbox Warm-up" icon="fire">
    200 credits per warm-up session
  </Card>

  <Card title="Inbox Placement Test" icon="inbox">
    50 credits per test
  </Card>

  <Card title="AI Writer" icon="pen-nib">
    50 credits per AI Writer use
  </Card>
</CardGroup>

<Tip>
  Annual plans include a 10% discount with credits valid for 12 months. Monthly plan credits roll over for up to 2 months.
</Tip>