import { BlogFAQ } from "../BlogFAQ";
import { BlogInlineCTA } from "../BlogInlineCTA";
import type { TOCItem } from "../BlogTOC";

export const costBreakdownFAQ = [
  {
    q: "How much does a design subscription cost in 2026?",
    a: "From ~$250/mo (budget graphic design) to $9,000/mo (enterprise). Premium product-design subscriptions with senior teams and development included run $3,000–$5,000/mo.",
  },
  {
    q: "Is a design subscription cheaper than hiring?",
    a: "At $3,495/mo ($42k/yr) vs $170k–$210k fully loaded for a senior in-house designer, yes, roughly 4x cheaper, with no recruiting time or hiring risk.",
  },
  {
    q: "Can I pause a design subscription?",
    a: "Reputable services let you pause and roll over unused days, so you only pay for active months.",
  },
  {
    q: "What's the catch with unlimited requests?",
    a: "Requests are queued and processed one at a time (premium tiers offer parallel slots). Unlimited refers to the backlog, not simultaneous output — compare services on per-request turnaround instead.",
  },
];

export const costBreakdownTOC: TOCItem[] = [
  { id: "cost-table", label: "The real annual cost" },
  { id: "when-each", label: "When each option wins" },
  { id: "math", label: "The math at startup volume" },
  { id: "limits", label: "What it doesn't do" },
  { id: "faq", label: "FAQ" },
];

export function ArticleCostBreakdown() {
  return (
    <div className="b-prose">
      <p className="b-lead">
        Every founder hits this decision: you need consistent, senior-quality
        design, and you have four ways to get it. Hire in-house. Use
        freelancers. Retain an agency. Or subscribe to a design service.
      </p>
      <p>
        The marketing for each option obscures the real math, so here it is with
        2026 numbers.
      </p>

      <h2 id="cost-table">The real annual cost of each option</h2>
      <div className="b-tablewrap">
        <table className="b-table">
          <thead>
            <tr>
              <th>Option</th>
              <th>Real annual cost</th>
              <th>Hidden costs</th>
              <th>Speed to start</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>In-house senior designer</td>
              <td>$170k–$210k</td>
              <td>
                Recruiting (3+ months), equity, tools, management, single point
                of failure
              </td>
              <td>2–4 months</td>
            </tr>
            <tr>
              <td>Freelancers</td>
              <td>$40k–$120k+ (at $75–$150/hr)</td>
              <td>
                Sourcing, inconsistent availability &amp; quality, no dev
                handoff, PM falls on you
              </td>
              <td>1–4 weeks</td>
            </tr>
            <tr>
              <td>Traditional agency</td>
              <td>$15k–$50k+ per project</td>
              <td>
                Scope creep, change-order invoices, weeks-long timelines,
                account layers
              </td>
              <td>2–6 weeks</td>
            </tr>
            <tr className="b-row-highlight">
              <td>Design subscription (premium)</td>
              <td>$42k ($3,495/mo)</td>
              <td>Queue-based: one active request at a time</td>
              <td>24–48 hours</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p style={{ fontSize: "14.5px", color: "var(--b-ink-soft)" }}>
        <em>
          Estimates: US-market senior product designer base $130k–$160k + ~30%
          benefits/overhead.
        </em>
      </p>

      <h2 id="when-each">When each option actually wins</h2>
      <h3>Hire in-house when&hellip;</h3>
      <p>
        Design is your core differentiator, you have 10+ engineers shipping
        daily, and you can keep a senior designer fully loaded year-round. Below
        that utilization, you&rsquo;re paying $200k for a part-time need.
      </p>
      <h3>Use freelancers when&hellip;</h3>
      <p>
        You have one-off, well-scoped projects and someone internal who can
        art-direct, manage, and QA the work. The hourly rate looks cheap; the
        management tax is the real price.
      </p>
      <h3>Use an agency when&hellip;</h3>
      <p>
        You need a large, multi-disciplinary push—a full rebrand, a product
        launch campaign with strategy included—and the timeline is not critical.
      </p>
      <h3>Use a subscription when&hellip;</h3>
      <p>
        You ship continuously and need design weekly: landing pages, product
        screens, decks, and onboarding flows. You want senior quality,
        predictable cost, and no hiring risk. This is the default fit for
        pre-seed through Series B startups.
      </p>

      <h2 id="math">The math at startup volume</h2>
      <p>
        Say you ship 6 design projects a month (screens, a landing page, a deck
        update, ad creatives):
      </p>
      <ul>
        <li>
          <strong>Freelancer:</strong> ~60 hrs &times; $100/hr = $6,000/mo, plus
          your time managing it
        </li>
        <li>
          <strong>Agency:</strong> would quote $8k–$20k for the same scope,
          delivered in weeks
        </li>
        <li>
          <strong>In-house:</strong> $14k–$17k/mo fully loaded, capped at one
          person&rsquo;s skills
        </li>
        <li>
          <strong>Subscription:</strong> $3,495/mo flat, senior team, 48h per
          request, dev included
        </li>
      </ul>
      <blockquote>
        The subscription model breaks even against freelancers at roughly 3+
        projects per month. Below that, stay with freelancers; above it, the
        flat fee wins every time.
      </blockquote>

      <h2 id="limits">What the subscription model doesn&rsquo;t do</h2>
      <p>
        Honesty matters: a subscription processes requests sequentially;
        it&rsquo;s not built for ten parallel workstreams (that&rsquo;s agency
        or enterprise territory). And it isn&rsquo;t strategy consulting. You
        bring the direction, the service executes fast. If you need full product
        builds with backend and AI integration, that&rsquo;s a different
        engagement (fixed-scope product studios like{" "}
        <a
          href="https://eleganttechbd.com/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Elegant IT Limited
        </a>{" "}
        start around $15k).
      </p>

      <BlogInlineCTA
        heading="Compare it to your current"
        accent="design spend."
        text="DesignShare = senior designer + senior web developer + PM for $3,495/mo flat. ~48h turnaround, pause anytime, 7-day 75% guarantee."
        cta="See pricing"
        href="https://designshare.net/#pricing"
      />

      <h2 id="faq">Frequently asked questions</h2>
      <BlogFAQ items={costBreakdownFAQ} />
    </div>
  );
}