// Pricing page sections — Deals To Grow

(function () {
  const { C, F, Stamp, Eyebrow, SectionTitle, Btn } = window;

  const CHECK_HREF = 'https://dealstogrow.com/book-scoping-call';

  const PLANS = [
    {
      id: 'launch',
      code: 'PLAN.01',
      name: 'LAUNCH',
      price: 1500,
      tagline: 'End the feast or famine stress. Get your phone ringing on demand.',
      forWho: 'Solo operators running on word of mouth with no online presence.',
      featured: false,
    },
    {
      id: 'grow',
      code: 'PLAN.02',
      name: 'GROW',
      price: 2500,
      tagline: 'Forget buying leads — own your pipeline.',
      forWho: 'Contractors with reviews but an inconsistent pipeline.',
      featured: true,
    },
    {
      id: 'scale',
      code: 'PLAN.03',
      name: 'SCALE',
      price: 3500,
      tagline: 'Stand out from the competition. Get booked weeks in advance.',
      forWho: 'Established contractors with a crew ready to dominate their market.',
      featured: false,
    },
  ];

  // Feature matrix grouped by category
  // Values: true = ✅, false = —, string = inline text value
  const MATRIX = [
    {
      cat: 'ADS',
      rows: [
        { label: 'Meta Ads',                 launch: true,                grow: true,                  scale: true },
        { label: 'Google Ads + LSA',         launch: false,               grow: true,                  scale: true },
        { label: 'Ad Creatives',             launch: 'Static + Carousel', grow: 'Static + Carousel',   scale: 'Static + Carousel + Video' },
      ],
    },
    {
      cat: 'LEADS',
      rows: [
        { label: 'Email + SMS Follow-Ups',   launch: 'Basic',             grow: 'Full Sequence',       scale: 'Full + Reactivation' },
        { label: 'Email Campaigns',          launch: false,               grow: false,                 scale: '2 / month' },
        { label: 'AI Receptionist',          launch: false,               grow: true,                  scale: true },
        { label: 'Kaching CRM + Ads Sync',   launch: true,                grow: true,                  scale: true },
      ],
    },
    {
      cat: 'BRAND',
      rows: [
        { label: 'Reputation Management',    launch: false,               grow: false,                 scale: true },
        { label: 'Social Media Management',  launch: false,               grow: false,                 scale: true },
        { label: 'Merchandise Design',       launch: false,               grow: false,                 scale: true },
      ],
    },
    {
      cat: 'ACCOUNT',
      rows: [
        { label: 'Exclusive Territory',      launch: true,                grow: true,                  scale: true },
        { label: 'Weekly Updates',           launch: true,                grow: true,                  scale: true },
        { label: 'Monthly Report',           launch: true,                grow: true,                  scale: true },
      ],
    },
  ];

  // ----- ICONS -----
  function Check({ size = 16, color = C.hi }) {
    return (
      <svg width={size} height={size} viewBox="0 0 16 16" style={{ display: 'block', flexShrink: 0 }} aria-hidden="true">
        <rect x="0" y="0" width="16" height="16" fill={color} />
        <path d="M3.5 8.2 L6.5 11.2 L12.5 4.8" fill="none" stroke="#16161A" strokeWidth="2.4" strokeLinecap="square" strokeLinejoin="miter" />
      </svg>
    );
  }
  function Dash({ color = 'rgba(22,22,26,0.32)' }) {
    return (
      <span style={{
        display: 'inline-block', width: 14, height: 2, background: color,
      }} aria-hidden="true" />
    );
  }
  function DashDark({ color = 'rgba(255,255,255,0.32)' }) {
    return (
      <span style={{
        display: 'inline-block', width: 14, height: 2, background: color,
      }} aria-hidden="true" />
    );
  }

  // ----- HERO -----
  function PricingHero() {
    return (
      <section id="overview" style={{ position: 'relative', borderBottom: `2px solid ${C.ink}`, background: C.ink, color: C.panel, overflow: 'hidden' }}>
        <img src="https://d8j0ntlcm91z4.cloudfront.net/user_32AlkriQy02CEEW16SNlUTGrDex/hf_20260503_194727_79710e56-c235-462a-bc50-c10f106d41cc.png" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.18, display: 'block' }} />
        <div style={{
          position: 'relative',
          padding: '48px 40px 56px',
          maxWidth: 1400, margin: '0 auto',
        }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
            <Stamp color={C.hi}>// SECTION: PRICING</Stamp>
            <Stamp color={C.hi}>3 PLANS</Stamp>
            <Stamp color={C.hi}>NO CONTRACTS</Stamp>
            <Stamp color={C.hi}>1 PER METRO</Stamp>
          </div>
          <h1 style={{
            fontFamily: F.display, fontSize: 'clamp(40px, 5.5vw, 80px)', lineHeight: 0.92,
            color: C.panel, letterSpacing: '-0.025em', textTransform: 'uppercase',
            margin: 0, textWrap: 'balance', overflowWrap: 'break-word', maxWidth: 980,
          }}>
            Hire one team of experts.<br />
            <span style={{ color: C.hi }}>Once and for all.</span>
          </h1>
          <p style={{ fontFamily: F.sans, fontSize: 18, lineHeight: 1.5, color: 'rgba(242,239,233,0.82)', maxWidth: 720, marginTop: 18 }}>
            Forget freelancers or hiring multiple agencies.
          </p>
        </div>
      </section>
    );
  }

  // ----- ROW VALUE -----
  function rowVal(v, dark = false) {
    if (v === true)  return <Check />;
    if (v === false) return dark ? <DashDark /> : <Dash />;
    return (
      <span style={{
        fontFamily: F.mono, fontSize: 11, fontWeight: 600, letterSpacing: 0.6,
        color: dark ? 'rgba(242,239,233,0.92)' : C.ink, textTransform: 'uppercase',
      }}>{v}</span>
    );
  }

  // ----- CARD -----
  function Card({ plan, allRowsByCard }) {
    const featured = plan.featured;
    const bg = featured ? C.ink : C.panel;
    const fg = featured ? C.panel : C.ink;
    const rule = featured ? 'rgba(255,255,255,0.1)' : C.rule;
    const muted = featured ? 'rgba(242,239,233,0.7)' : C.muted;
    const border = featured ? `2px solid ${C.hi}` : `2px solid ${C.ink}`;
    const shadow = featured
      ? `8px 8px 0 ${C.hi}`
      : `6px 6px 0 ${C.ink}`;

    return (
      <div style={{
        position: 'relative', background: bg, color: fg,
        border, boxShadow: shadow,
        display: 'flex', flexDirection: 'column',
        transform: featured ? 'translateY(-12px)' : 'none',
      }}>
        {featured && (
          <div style={{
            position: 'absolute', top: -16, left: 24,
            background: C.hi, color: C.ink, fontFamily: F.mono, fontSize: 11, fontWeight: 700,
            letterSpacing: 1.6, padding: '6px 12px', border: `2px solid ${C.ink}`,
          }}>★ MOST POPULAR</div>
        )}

        {/* Header strip */}
        <div style={{
          padding: '14px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          borderBottom: `2px solid ${featured ? C.hi : C.ink}`,
          background: featured ? 'rgba(250,98,21,0.08)' : 'transparent',
          fontFamily: F.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.4,
          color: featured ? C.hi : C.hiDark,
        }}>
          <span>// {plan.code}</span>
          <span>● ACTIVE</span>
        </div>

        {/* Name + price */}
        <div style={{ padding: '36px 28px 24px', borderBottom: `1px solid ${rule}` }}>
          <div style={{
            fontFamily: F.display, fontSize: 56, lineHeight: 0.9, letterSpacing: '-0.02em',
            textTransform: 'uppercase', color: fg, marginBottom: 20,
          }}>{plan.name}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
            <span style={{ fontFamily: F.display, fontSize: 64, lineHeight: 1, letterSpacing: '-0.02em', color: fg }}>
              ${plan.price.toLocaleString()}
            </span>
            <span style={{ fontFamily: F.mono, fontSize: 14, color: muted, fontWeight: 600 }}>
              /mo
            </span>
          </div>
          <div style={{
            fontFamily: F.mono, fontSize: 11, fontWeight: 600, letterSpacing: 1.2,
            color: featured ? C.caution : C.hiDark, textTransform: 'uppercase',
            paddingTop: 10, marginTop: 10, borderTop: `1px dashed ${rule}`,
          }}>
            + $2,000 ONE-TIME · AUTHORITY WEBSITE
          </div>
        </div>

        {/* Tagline */}
        <div style={{ padding: '24px 28px', borderBottom: `1px solid ${rule}` }}>
          <div style={{
            fontFamily: F.sans, fontSize: 17, lineHeight: 1.4, fontWeight: 600, color: fg,
            marginBottom: 8, textWrap: 'balance',
          }}>{plan.tagline}</div>
          <div style={{ fontFamily: F.sans, fontSize: 13, lineHeight: 1.5, color: muted }}>
            {plan.forWho}
          </div>
        </div>

        {/* Feature list grouped by category */}
        <div style={{ padding: '8px 0 24px', flex: 1 }}>
          {MATRIX.map((group, gi) => (
            <div key={group.cat} style={{
              padding: '20px 28px 8px',
              borderBottom: gi < MATRIX.length - 1 ? `1px solid ${rule}` : 'none',
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.8,
                color: featured ? C.hi : C.hiDark, marginBottom: 14, textTransform: 'uppercase',
              }}>// {group.cat}</div>
              {group.rows.map((row) => {
                const v = row[plan.id];
                const dim = v === false;
                return (
                  <div key={row.label} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '8px 0', minHeight: 28,
                    opacity: dim ? 0.45 : 1,
                  }}>
                    <span style={{ width: 18, display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
                      {v === true ? <Check size={14} color={featured ? C.hi : C.hi} />
                        : v === false ? (featured ? <DashDark /> : <Dash />)
                        : <span style={{ width: 4, height: 4, background: featured ? C.hi : C.ink, borderRadius: 0, marginLeft: 6 }} />}
                    </span>
                    <span style={{
                      fontFamily: F.sans, fontSize: 14, fontWeight: 500, color: fg, flex: 1,
                      textDecoration: dim ? 'line-through' : 'none',
                    }}>{row.label}</span>
                    {typeof v === 'string' && (
                      <span style={{
                        fontFamily: F.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.2,
                        color: featured ? C.caution : C.hiDark, textTransform: 'uppercase',
                        textAlign: 'right', whiteSpace: 'nowrap',
                      }}>{v}</span>
                    )}
                  </div>
                );
              })}
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{
          padding: 20, borderTop: `2px solid ${featured ? C.hi : C.ink}`,
          background: featured ? 'rgba(250,98,21,0.06)' : 'transparent',
        }}>
          <a href={CHECK_HREF} style={{
            display: 'block', textAlign: 'center',
            padding: '16px 20px', fontFamily: F.mono, fontSize: 12,
            letterSpacing: 1.6, fontWeight: 700, textTransform: 'uppercase',
            background: featured ? C.hi : C.ink,
            color: featured ? C.ink : C.hi,
            border: `2px solid ${featured ? C.ink : C.ink}`,
            textDecoration: 'none',
            boxShadow: featured ? `4px 4px 0 ${C.panel}` : 'none',
          }}>GET STARTED ▸</a>
          <a href="/revenue-simulator" style={{
            display: 'block', textAlign: 'center', marginTop: 8,
            padding: '13px 20px', fontFamily: F.mono, fontSize: 11,
            letterSpacing: 1.4, fontWeight: 700, textTransform: 'uppercase',
            background: 'transparent',
            color: featured ? 'rgba(242,239,233,0.85)' : C.ink,
            border: `1px solid ${featured ? 'rgba(250,98,21,0.4)' : C.rule}`,
            textDecoration: 'none',
          }}>CALCULATE PROFIT ▸</a>
          <div style={{
            fontFamily: F.mono, fontSize: 10, fontWeight: 600, letterSpacing: 1.4,
            color: muted, textAlign: 'center', marginTop: 12, textTransform: 'uppercase',
          }}>NO CONTRACTS · CANCEL ANYTIME</div>
        </div>
      </div>
    );
  }

  // ----- CARDS SECTION -----
  function PricingCards() {
    return (
      <section id="plans" style={{ padding: '88px 40px 56px', position: 'relative' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          {/* Top utility line */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            gap: 12, marginBottom: 40, flexWrap: 'wrap',
          }}>
            <span style={{
              fontFamily: F.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.6,
              color: C.hiDark, textTransform: 'uppercase',
            }}>// EVERY PLAN INCLUDES</span>
            <span style={{
              fontFamily: F.sans, fontSize: 14, fontWeight: 500, color: C.muted,
              letterSpacing: 0.2,
            }}>
              Kaching CRM with Facebook Ads Sync — you see exactly where every dollar goes.
            </span>
          </div>

          {/* Card grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
            gap: 24,
            alignItems: 'stretch',
            paddingTop: 24,
          }}>
            {PLANS.map((p) => <Card key={p.id} plan={p} />)}
          </div>

          {/* Bottom utility line */}
          <div style={{
            marginTop: 56, padding: '20px 28px',
            border: `2px solid ${C.ink}`, background: C.ink, color: C.panel,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            gap: 12, flexWrap: 'wrap', textAlign: 'center',
          }}>
            <Stamp color={C.hi} dark>● LIVE</Stamp>
            <span style={{
              fontFamily: F.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.4,
              color: C.hi, textTransform: 'uppercase',
            }}>One contractor per city.</span>
            <span style={{
              fontFamily: F.sans, fontSize: 14, fontWeight: 500, color: 'rgba(242,239,233,0.85)',
            }}>Once your market is taken, it's gone.</span>
          </div>
        </div>
      </section>
    );
  }

  // ----- PIECEMEAL COST BAND — what you'd pay hiring each role individually -----
  function PiecemealCostBand() {
    const rows = [
      ['Meta Ads agency retainer',          '$2,000/mo'],
      ['Google Ads agency retainer',        '$1,500/mo'],
      ['Ad creative designer',              '$1,500/mo'],
      ['SEO agency',                        '$2,000/mo'],
      ['AI receptionist service',           '$500/mo'],
      ['CRM setup + tools',                 '$300/mo'],
      ['Reputation mgmt',                   '$800/mo'],
      ['Account manager / coordinator',     '$500/mo'],
    ];
    const PIECEMEAL_TOTAL = '$9,100/mo';
    const PIECEMEAL_BUILD = '$8,000 one-time';
    const DTG_PRICE = '$2,500/mo';
    const DTG_SITE  = '$2,000 one-time';
    const SAVINGS = '73%';

    return (
      <section id="vs-piecemeal" style={{ padding: '88px 40px', background: C.bg, borderTop: `2px solid ${C.ink}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <SectionTitle eyebrow="Or hire it piece by piece">Hiring each part separately.<br />Here's the math.</SectionTitle>
          <p style={{ fontFamily: F.sans, fontSize: 16, lineHeight: 1.55, color: C.muted, maxWidth: 720, margin: '0 0 40px' }}>
            Most contractors try to bolt this together one vendor at a time. Different logins, different invoices, nothing talks to anything else. Here's what that actually costs.
          </p>

          <div style={{
            display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
            border: `2px solid ${C.ink}`, background: C.panel,
          }}>
            {/* LEFT — Piecemeal column */}
            <div style={{ borderRight: `2px solid ${C.ink}` }}>
              <div style={{ padding: '14px 22px', background: C.ink, color: C.panel, display: 'flex', justifyContent: 'space-between', fontFamily: F.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.4 }}>
                <span>// PIECEMEAL · 8 VENDORS</span>
                <span>● TYPICAL MARKET</span>
              </div>
              <div style={{ padding: '8px 0' }}>
                {rows.map(([label, cost], i) => (
                  <div key={label} style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                    padding: '14px 22px',
                    borderBottom: i < rows.length - 1 ? `1px solid ${C.rule}` : 'none',
                  }}>
                    <span style={{ fontFamily: F.sans, fontSize: 15, color: C.ink }}>{label}</span>
                    <span style={{ fontFamily: F.mono, fontSize: 13, fontWeight: 700, color: C.ink, letterSpacing: 0.4 }}>{cost}</span>
                  </div>
                ))}
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  padding: '20px 22px', borderTop: `2px solid ${C.ink}`, background: C.bg,
                }}>
                  <span style={{ fontFamily: F.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.4, color: C.ink, textTransform: 'uppercase' }}>Piecemeal total</span>
                  <span style={{ fontFamily: F.display, fontSize: 24, color: C.ink, letterSpacing: -0.6 }}>{PIECEMEAL_TOTAL}</span>
                </div>
                <div style={{ padding: '12px 22px', display: 'flex', justifyContent: 'space-between', fontFamily: F.mono, fontSize: 11, fontWeight: 600, color: C.muted, letterSpacing: 0.6 }}>
                  <span>+ Website build (one-time)</span>
                  <span>{PIECEMEAL_BUILD}</span>
                </div>
              </div>
            </div>

            {/* RIGHT — DTG column */}
            <div style={{ background: C.ink, color: C.panel, display: 'flex', flexDirection: 'column' }}>
              <div style={{ padding: '14px 22px', background: C.hi, color: C.ink, display: 'flex', justifyContent: 'space-between', fontFamily: F.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.4 }}>
                <span>// DTG · ONE TEAM</span>
                <span>● GROW PLAN</span>
              </div>
              <div style={{ padding: '32px 28px 28px', display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
                <div>
                  <div style={{ fontFamily: F.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.6, color: C.hi, marginBottom: 8 }}>EVERYTHING ON THE LEFT</div>
                  <div style={{ fontFamily: F.display, fontSize: 56, lineHeight: 0.9, letterSpacing: -1.6, color: C.panel }}>
                    {DTG_PRICE}
                  </div>
                  <div style={{ fontFamily: F.mono, fontSize: 12, color: 'rgba(242,239,233,0.7)', marginTop: 8 }}>
                    + {DTG_SITE} site build
                  </div>
                </div>
                <div style={{ padding: '14px 16px', background: 'rgba(250,98,21,0.12)', border: `1px solid ${C.hi}`, marginTop: 8 }}>
                  <div style={{ fontFamily: F.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.4, color: C.hi }}>SAVE {SAVINGS}</div>
                  <div style={{ fontFamily: F.sans, fontSize: 14, lineHeight: 1.5, color: 'rgba(242,239,233,0.88)', marginTop: 6 }}>
                    One team. One bill. The parts actually talk to each other.
                  </div>
                </div>
                <div style={{ marginTop: 'auto', paddingTop: 12 }}>
                  <Btn primary href="/book-scoping-call">BOOK SCOPING CALL ▸</Btn>
                </div>
              </div>
            </div>
          </div>

          <p style={{ fontFamily: F.mono, fontSize: 10, color: C.muted, letterSpacing: 0.6, marginTop: 16, maxWidth: 920 }}>
            * Market-rate estimates for U.S. contractor-services agencies. Your individual quotes will vary. Numbers compare DTG GROW ($2,500/mo) to the sum of the eight vendor categories listed.
          </p>
        </div>
      </section>
    );
  }

  // ----- COMPARISON TABLE (full matrix, dense, professional) -----
  function ComparisonTable() {
    return (
      <section id="comparison" style={{ padding: '80px 40px', borderTop: `2px solid ${C.ink}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <SectionTitle eyebrow="Full comparison">Every feature.<br />Side by side.</SectionTitle>
          <p style={{ fontFamily: F.sans, fontSize: 17, lineHeight: 1.55, color: C.muted, maxWidth: 720, margin: '0 0 48px' }}>
            No marketing decoder ring. Here is exactly what's in each plan. The card view above is the summary; this table is the spec sheet.
          </p>

          <div style={{
            border: `2px solid ${C.ink}`, background: C.panel, overflow: 'hidden',
          }}>
            {/* Header row */}
            <div style={{
              display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) repeat(3, minmax(120px, 1fr))',
              background: C.ink, color: C.panel,
            }}>
              <div style={{ padding: '20px 24px', fontFamily: F.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.6, color: 'rgba(242,239,233,0.6)' }}>// FEATURE</div>
              {PLANS.map((p) => (
                <div key={p.id} style={{
                  padding: '20px 24px', textAlign: 'center',
                  borderLeft: '1px solid rgba(255,255,255,0.1)',
                  background: p.featured ? 'rgba(250,98,21,0.12)' : 'transparent',
                }}>
                  <div style={{
                    fontFamily: F.display, fontSize: 22, letterSpacing: '-0.01em',
                    color: p.featured ? C.hi : C.panel, textTransform: 'uppercase',
                  }}>{p.name}</div>
                  <div style={{
                    fontFamily: F.mono, fontSize: 10, fontWeight: 600, letterSpacing: 1.2,
                    color: 'rgba(242,239,233,0.65)', marginTop: 4,
                  }}>${p.price.toLocaleString()}/MO</div>
                </div>
              ))}
            </div>

            {MATRIX.map((group) => (
              <React.Fragment key={group.cat}>
                {/* Category divider */}
                <div style={{
                  display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) repeat(3, minmax(120px, 1fr))',
                  background: C.bg, borderTop: `2px solid ${C.ink}`, borderBottom: `1px solid ${C.rule}`,
                }}>
                  <div style={{
                    padding: '14px 24px', fontFamily: F.mono, fontSize: 11, fontWeight: 700,
                    letterSpacing: 1.8, color: C.hiDark, textTransform: 'uppercase',
                  }}>// {group.cat}</div>
                  <div style={{ borderLeft: `1px solid ${C.rule}` }} />
                  <div style={{ borderLeft: `1px solid ${C.rule}` }} />
                  <div style={{ borderLeft: `1px solid ${C.rule}` }} />
                </div>
                {group.rows.map((row, ri) => (
                  <div key={row.label} style={{
                    display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) repeat(3, minmax(120px, 1fr))',
                    borderTop: ri === 0 ? 'none' : `1px solid ${C.rule}`,
                  }}>
                    <div style={{
                      padding: '16px 24px', fontFamily: F.sans, fontSize: 14, fontWeight: 500, color: C.ink,
                    }}>{row.label}</div>
                    {PLANS.map((p) => {
                      const v = row[p.id];
                      const dim = v === false;
                      return (
                        <div key={p.id} style={{
                          padding: '16px 24px', textAlign: 'center',
                          borderLeft: `1px solid ${C.rule}`,
                          background: p.featured ? 'rgba(250,98,21,0.05)' : 'transparent',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          opacity: dim ? 0.45 : 1,
                        }}>
                          {v === true && <Check size={16} />}
                          {v === false && <Dash />}
                          {typeof v === 'string' && (
                            <span style={{
                              fontFamily: F.mono, fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
                              color: C.ink, textTransform: 'uppercase', textAlign: 'center',
                              lineHeight: 1.3,
                            }}>{v}</span>
                          )}
                        </div>
                      );
                    })}
                  </div>
                ))}
              </React.Fragment>
            ))}

            {/* Footer row: one-time fee row */}
            <div style={{
              display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) repeat(3, minmax(120px, 1fr))',
              background: C.ink, color: C.panel, borderTop: `2px solid ${C.ink}`,
            }}>
              <div style={{
                padding: '18px 24px', fontFamily: F.mono, fontSize: 11, fontWeight: 700,
                letterSpacing: 1.6, color: C.caution, textTransform: 'uppercase',
              }}>// REQUIRED · AUTHORITY WEBSITE</div>
              {PLANS.map((p) => (
                <div key={p.id} style={{
                  padding: '18px 24px', textAlign: 'center',
                  borderLeft: '1px solid rgba(255,255,255,0.1)',
                  background: p.featured ? 'rgba(250,98,21,0.12)' : 'transparent',
                  fontFamily: F.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.2,
                  color: C.hi,
                }}>$2,000 · ONCE</div>
              ))}
            </div>

            {/* CTA row */}
            <div style={{
              display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) repeat(3, minmax(120px, 1fr))',
              borderTop: `2px solid ${C.ink}`, background: C.bg,
            }}>
              <div style={{
                padding: '24px', fontFamily: F.sans, fontSize: 14, fontWeight: 500,
                color: C.muted, display: 'flex', alignItems: 'center',
              }}>Lock your metro before it's gone.</div>
              {PLANS.map((p) => (
                <div key={p.id} style={{
                  padding: '20px 16px', textAlign: 'center',
                  borderLeft: `1px solid ${C.rule}`,
                  background: p.featured ? 'rgba(250,98,21,0.08)' : 'transparent',
                }}>
                  <a href={CHECK_HREF} style={{
                    display: 'inline-block', padding: '12px 18px',
                    fontFamily: F.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.4,
                    background: p.featured ? C.hi : C.ink,
                    color: p.featured ? C.ink : C.hi,
                    border: `2px solid ${C.ink}`,
                    textDecoration: 'none',
                  }}>GET STARTED ▸</a>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ----- FAQ -----
  function PricingFAQ() {
    const items = [
      { q: 'Why a $2,000 one-time fee on top of monthly?',
        a: 'The Authority Website is the foundation — your owned codebase, on your domain, with schema-locked SEO and full CMS. We build it once and you own it forever. Monthly covers ad management, CRM operations, AI receptionist, monitoring, and reinforcement. The site is yours regardless of plan.' },
      { q: 'What happens if I outgrow my plan?',
        a: 'You move up. Most operators start on Launch or Grow and step up within 6–12 months as the system compounds. The infrastructure scales — we just turn on more channels and surface area. No re-platforming, no re-onboarding.' },
      { q: 'Are there contracts?',
        a: 'No long-term contracts. Month-to-month after the initial setup. We earn the renewal every 30 days. We guarantee your site, Kaching CRM, AI receptionist, and first ad campaigns are live within 14 days of kickoff — then it\'s on us to keep earning your business. If you cancel, you keep the site, the CRM data, the ad accounts — everything we built. Documented, handed off cleanly.' },
      { q: 'How does the territory exclusivity work?',
        a: 'One contractor per metro per trade. Once your city is locked, we will not sign your direct competitor — full stop. The territory belongs to the operator who locks it first. Currently turning down more cities than we accept.' },
      { q: 'What\'s ad spend on top of plan price?',
        a: 'Ad spend is separate and yours. We recommend $1,500/mo minimum on Launch, $2,500/mo on Grow, $4,000+/mo on Scale. Spend goes directly to Meta / Google / LSA — we never mark it up. Tracked in the CRM with full attribution.' },
      { q: 'Do you guarantee leads?',
        a: 'No, and you should run from anyone who does. We guarantee the infrastructure, the deployment, and the reinforcement loop. Lead volume depends on your spend, market, and offer — all variables we tune monthly. The system makes the unit economics predictable.' },
    ];
    const [open, setOpen] = React.useState(0);
    return (
      <section id="faq" style={{ padding: '80px 40px', borderTop: `2px solid ${C.ink}`, background: C.panel }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionTitle eyebrow="FAQ · Pricing">The questions<br />we get most.</SectionTitle>
          <div style={{ border: `2px solid ${C.ink}`, background: C.bg }}>
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: i < items.length - 1 ? `1px solid ${C.rule}` : 'none' }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: '100%', padding: '24px 28px', display: 'flex',
                      alignItems: 'center', justifyContent: 'space-between', gap: 24,
                      background: 'transparent', border: 'none', cursor: 'pointer',
                      textAlign: 'left', fontFamily: F.sans, fontSize: 18, fontWeight: 600,
                      color: C.ink,
                    }}
                  >
                    <span style={{ flex: 1 }}>{it.q}</span>
                    <span style={{
                      width: 32, height: 32, border: `2px solid ${C.ink}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      background: isOpen ? C.hi : 'transparent', flexShrink: 0,
                      fontFamily: F.mono, fontSize: 16, fontWeight: 700,
                    }}>{isOpen ? '−' : '+'}</span>
                  </button>
                  {isOpen && (
                    <div style={{
                      padding: '0 28px 28px', fontFamily: F.sans, fontSize: 16, lineHeight: 1.6,
                      color: C.muted, maxWidth: 820,
                    }}>{it.a}</div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  // ----- CTA -----
  function PricingCTA() {
    return (
      <section style={{ background: C.ink, color: C.panel, padding: '120px 40px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(280px, 1fr)', gap: 64, alignItems: 'end' }}>
          <div style={{ minWidth: 0 }}>
            <Eyebrow color={C.hi}>LOCK YOUR METRO</Eyebrow>
            <h2 style={{
              fontFamily: F.display, fontSize: 'clamp(48px, 6vw, 88px)', lineHeight: 0.88,
              letterSpacing: '-0.025em', textTransform: 'uppercase', color: C.panel,
              margin: '20px 0 24px', textWrap: 'balance', overflowWrap: 'break-word',
            }}>
              Pick a plan.<br />Lock your city.<br /><span style={{ color: C.hi }}>Start running.</span>
            </h2>
            <p style={{ fontFamily: F.sans, fontSize: 18, lineHeight: 1.5, color: 'rgba(242,239,233,0.8)', maxWidth: 560, marginBottom: 32 }}>
              We diagnose first, lock second, deploy third. Ten minutes on a call confirms the fit. No pitch deck.
            </p>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <Btn primary href={CHECK_HREF}>GET STARTED ▸</Btn>
              <Btn dark href="/revenue-simulator">CALCULATE PROFIT ▸</Btn>
            </div>
          </div>
          <div style={{ border: `2px solid ${C.hi}`, padding: 0, alignSelf: 'end' }}>
            <div style={{ background: C.hi, color: C.ink, padding: '12px 18px', display: 'flex', justifyContent: 'space-between', fontFamily: F.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.4 }}>
              <span>// WHAT HAPPENS NEXT</span>
              <span>● 4 STEPS</span>
            </div>
            {[
              ['01', '10-min fit call', 'Confirm trade + metro availability'],
              ['02', 'Diagnostic', 'Audit your current pipeline + offer'],
              ['03', 'Territory lock', 'Sign + secure your metro'],
              ['04', 'Deploy', '5–14 day install. You go live.'],
            ].map(([n, t, d], i) => (
              <div key={n} style={{
                padding: '14px 18px', display: 'flex', gap: 14, alignItems: 'flex-start',
                borderBottom: i < 3 ? '1px solid rgba(255,255,255,0.1)' : 'none',
              }}>
                <span style={{ fontFamily: F.mono, fontSize: 11, fontWeight: 700, color: C.hi, letterSpacing: 1.2, paddingTop: 2 }}>{n}</span>
                <div>
                  <div style={{ fontFamily: F.sans, fontSize: 14, fontWeight: 600, color: C.panel, marginBottom: 2 }}>{t}</div>
                  <div style={{ fontFamily: F.sans, fontSize: 12, color: 'rgba(242,239,233,0.65)' }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  window.PricingSections = { PricingHero, PricingCards, PiecemealCostBand, ComparisonTable, PricingFAQ, PricingCTA };
})();