// Inferno PRICING page — Free plan + 4 paid monthly tiers

const InfernoPricing = () => {
  const tiers = [
    {
      name: 'Starter',
      price: 99,
      annual: 899,
      sub: '/ month',
      desc: 'For solo stores running ads on one channel.',
      cta: 'Get Starter',
      planId: '60066',
      licenses: 1,
      features: [
        '1 store',
        'Meta Ads + email',
        '100 AI generations / month',
        'Basic automations (welcome, cart abandon)',
        'WooCommerce customer segments',
        'Sales by campaign & ad reporting',
        'Re-publish saved generations to Meta',
        'Email support',
      ],
    },
    {
      name: 'Growth',
      price: 249,
      annual: 2250,
      sub: '/ month',
      desc: 'For serious stores running every channel.',
      cta: 'Get Growth',
      planId: '60067',
      licenses: 1,
      featured: true,
      features: [
        '1 store',
        'All integrations (Meta + Google + Klaviyo + SendGrid)',
        '500 AI generations / month',
        'Campaign scheduling + planner',
        'Full Flow Builder (email + SMS)',
        'Competitor ad library spy',
        'Predictive analytics (LTV / churn / NBA)',
        'Lookalike + custom audiences',
        'Branded PDF reports',
      ],
    },
    {
      name: 'Agency / Pro',
      price: 499,
      annual: 4750,
      sub: '/ month',
      desc: 'Multi-store, agency-ready, supported.',
      cta: 'Get Agency',
      planId: '60068',
      licenses: 5,
      features: [
        'Up to 5 stores (multi-site)',
        '2,500 AI generations / month',
        'Priority support (4hr SLA)',
        'Onboarding session',
      ],
    },
    {
      name: 'Managed',
      price: 999,
      sub: '/ month',
      desc: 'Done-for-you. We run the platform for your client.',
      cta: 'Book a call',
      href: 'mailto:help@fireyouragency.net?subject=' + encodeURIComponent('Managed plan — let\'s talk'),
      dark: true,
      features: [
        'Everything in Agency / Pro',
        'FYA team manages the platform',
        'Unlimited stores',
        'Monthly strategy session',
        'Quarterly performance review',
        'Custom integrations',
        'Dedicated Slack channel',
        'Same-day support SLA',
      ],
    },
  ];

  return (
    <div style={{ background: '#FFF4E8', color: '#1A0D08', fontFamily: '"Inter", sans-serif' }}>
      <InfernoNav active="Pricing"/>

      <section className="sec-pad" style={{ padding: '80px 48px 40px', textAlign: 'center' }}>
        <SectionLabel num="" label="PRICING"/>
        <h1 style={{ fontSize: 'clamp(40px, 8vw, 110px)', margin: 0, lineHeight: 0.92, letterSpacing: '-0.04em', fontWeight: 900 }}>
          Less than <span style={{
            background: 'linear-gradient(180deg, #E5421A, #FFB800)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
          }}>one day</span><br/>of agency time.
        </h1>
        <p style={{ fontSize: 18, marginTop: 24, color: '#5C3D28', maxWidth: 660, margin: '24px auto 0' }}>
          Start free — 10 AI generations a month, no card, ever. Paid plans are billed annually by default — save ~20% vs. paying monthly — with monthly billing available as an opt-in. Every paid plan includes a 14-day free trial (card required to start, not charged unless you don't cancel) and a 30-day money-back guarantee. Cancel or downgrade anytime, no kickoff fee.
        </p>
      </section>

      {/* FREE TIER STRIP */}
      <section className="sec-pad" style={{ padding: '0 48px 28px' }}>
        <div className="free-tier-grid" style={{
          background: '#1A0D08', color: '#FFF4E8',
          border: '2px solid #1A0D08', borderRadius: 24, padding: '28px 32px',
          display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 32, alignItems: 'center',
          boxShadow: '6px 6px 0 #FFB800',
        }}>
          <div>
            <div style={{ display: 'inline-block', padding: '4px 10px', background: '#FFB800', color: '#1A0D08', borderRadius: 999, fontSize: 10, fontWeight: 800, letterSpacing: '0.1em' }}>FREE PLAN</div>
            <div style={{ fontSize: 44, fontWeight: 900, marginTop: 10, letterSpacing: '-0.03em', lineHeight: 1 }}>Free<span style={{ fontSize: 15, fontWeight: 500, color: '#A88770', marginLeft: 8 }}>forever</span></div>
          </div>
          <div style={{ fontSize: 14, color: '#A88770', lineHeight: 1.6 }}>
            <strong style={{ color: '#FFF4E8' }}>Kick the tires with no card.</strong> Install the plugin, then connect your account to switch on AI generation.
            <div style={{ marginTop: 8, display: 'flex', gap: 20, flexWrap: 'wrap', fontSize: 13 }}>
              <span><span style={{ color: '#FFB800' }}>✓</span> AI copy + images</span>
              <span><span style={{ color: '#FFB800' }}>✓</span> 10 AI generations / month</span>
              <span><span style={{ color: '#FFB800' }}>✓</span> AI marketing summary on your dashboard</span>
              <span><span style={{ color: '#FFB800' }}>✓</span> See Meta &amp; Google campaigns (read-only)</span>
              <span><span style={{ color: '#FFB800' }}>✓</span> Generation history + UTM attribution</span>
              <span><span style={{ color: '#FFB800' }}>✓</span> Meta, Google &amp; email copy to paste anywhere</span>
              <span><span style={{ color: '#A88770' }}>✗</span> Publishing ads and automation flows start at Starter</span>
            </div>
          </div>
          <a href="https://checkout.freemius.com/plugin/27834/plan/46003/" target="_blank" rel="noopener noreferrer" style={{ background: '#FFB800', color: '#1A0D08', border: 'none', padding: '15px 24px', borderRadius: 999, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap', textDecoration: 'none', display: 'inline-block' }}>Get free plan →</a>
        </div>
      </section>

      {/* PAID TIERS */}
      <section className="sec-pad pricing-tiers-grid" style={{ padding: '20px 48px 80px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {tiers.map((t, i) => (
          <div key={i} className="tier-card" style={{
            background: t.dark ? '#0E0704' : t.featured ? '#1A0D08' : '#FFF4E8',
            color: (t.featured || t.dark) ? '#FFF4E8' : '#1A0D08',
            border: '2px solid #1A0D08', borderRadius: 24, padding: 28,
            boxShadow: t.dark ? '8px 8px 0 #FFB800' : t.featured ? '8px 8px 0 #E5421A' : '8px 8px 0 #1A0D08',
            position: 'relative', minHeight: 760, display: 'flex', flexDirection: 'column',
          }}>
            {t.featured && (
              <div style={{ position: 'absolute', top: -14, left: 24, background: '#FFB800', color: '#1A0D08', padding: '5px 12px', borderRadius: 999, fontSize: 10, fontWeight: 800, letterSpacing: '0.1em', whiteSpace: 'nowrap' }}>MOST POPULAR</div>
            )}
            {t.dark && (
              <div style={{ position: 'absolute', top: -14, left: 24, background: '#E5421A', color: '#FFF4E8', padding: '5px 12px', borderRadius: 999, fontSize: 10, fontWeight: 800, letterSpacing: '0.1em', whiteSpace: 'nowrap' }}>DONE FOR YOU</div>
            )}
            <div style={{ fontSize: 12, color: (t.featured || t.dark) ? '#FFB800' : '#E5421A', fontWeight: 700, letterSpacing: '0.12em' }}>{t.name.toUpperCase()}</div>
            {t.annual ? (() => {
              const monthlyEq = t.annual / 12;
              const [whole, cents] = monthlyEq.toFixed(2).split('.');
              const mutedColor = (t.featured || t.dark) ? '#A88770' : '#5C3D28';
              return (
                <>
                  <div style={{ fontSize: 13, marginTop: 14, color: '#E5421A', textDecoration: 'line-through', textDecorationColor: '#E5421A' }}>Normally ${t.price}/mo</div>
                  <div style={{ display: 'flex', alignItems: 'flex-start', marginTop: 2 }}>
                    <div style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 900, lineHeight: 1, letterSpacing: '-0.04em' }}>${whole}</div>
                    <div style={{ fontSize: 18, fontWeight: 700, marginTop: 6 }}>.{cents}</div>
                    <div style={{ fontSize: 13, fontWeight: 600, marginTop: 'auto', marginLeft: 4, marginBottom: 6, color: mutedColor }}>/ mo</div>
                  </div>
                  <div style={{ fontSize: 12, marginTop: 4, fontWeight: 700, letterSpacing: '0.08em', color: mutedColor }}>BILLED ANNUALLY · ${t.annual.toLocaleString()}/yr</div>
                  <div style={{ fontSize: 12, marginTop: 2, color: mutedColor }}>or ${t.price}/mo, billed monthly</div>
                </>
              );
            })() : (
              <>
                <div style={{ marginTop: 14, fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 900, lineHeight: 1, letterSpacing: '-0.04em' }}>${t.price.toLocaleString()}</div>
                <div style={{ fontSize: 13, marginTop: 4, color: (t.featured || t.dark) ? '#A88770' : '#5C3D28' }}>{t.sub}</div>
              </>
            )}
            <p style={{ fontSize: 13, marginTop: 12, marginBottom: 24, color: (t.featured || t.dark) ? '#A88770' : '#5C3D28', lineHeight: 1.4, minHeight: 56 }}>{t.desc}</p>
            {(() => {
              const btnStyle = {
                background: t.dark ? '#FFB800' : t.featured ? '#E5421A' : '#1A0D08',
                color: t.dark ? '#1A0D08' : '#FFF4E8', border: 'none',
                padding: '14px 18px', borderRadius: 999, textAlign: 'center', textDecoration: 'none', display: 'block',
                fontSize: 14, fontWeight: 700, cursor: 'pointer', marginBottom: 24, fontFamily: 'inherit',
              };
              return t.planId
                ? <button style={btnStyle} onClick={() => openFreemiusCheckout({ planId: t.planId, licenses: t.licenses })}>{t.cta}</button>
                : <a href={t.href} style={btnStyle}>{t.cta}</a>;
            })()}
            <div style={{ flex: 1, paddingTop: 20, borderTop: (t.featured || t.dark) ? '1px solid #3D2818' : '1px solid #E8D8C5' }}>
              {t.features.map((f, fi) => (
                <div key={fi} style={{ display: 'flex', gap: 10, padding: '7px 0', fontSize: 13, lineHeight: 1.4 }}>
                  <span style={{ width: 16, height: 16, borderRadius: 8, background: (t.featured || t.dark) ? '#FFB800' : '#E5421A', color: '#1A0D08', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 900, marginTop: 2 }}>✓</span>
                  <span>{f}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </section>

      {/* TIER COMPARISON */}
      <section className="sec-pad" style={{ padding: '0 48px 96px' }}>
        <SectionLabel num="" label="FEATURE COMPARISON"/>
        <h2 style={{ fontSize: 'clamp(28px, 5vw, 56px)', margin: '0 0 32px', lineHeight: 0.94, letterSpacing: '-0.03em', fontWeight: 900 }}>What's in each tier.</h2>
        <div className="table-scroll">
        <HardCard className="grid-compare-6" style={{ overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.7fr 0.9fr 1fr 1fr 1fr 1fr', background: '#1A0D08', color: '#FFF4E8' }}>
            <div style={{ padding: 16, fontSize: 11, fontWeight: 700, letterSpacing: '0.12em' }}>FEATURE</div>
            <div style={{ padding: 16, fontSize: 12, fontWeight: 700, textAlign: 'center' }}>Free<br/><span style={{ fontWeight: 400, color: '#A88770', fontSize: 11 }}>$0</span></div>
            <div style={{ padding: 16, fontSize: 12, fontWeight: 700, textAlign: 'center' }}>Starter<br/><span style={{ fontWeight: 400, color: '#A88770', fontSize: 11 }}>$899/yr · $99/mo</span></div>
            <div style={{ padding: 16, fontSize: 12, fontWeight: 700, textAlign: 'center', background: '#E5421A' }}>Growth<br/><span style={{ fontWeight: 400, color: '#FFB800', fontSize: 11 }}>$2,250/yr · $249/mo</span></div>
            <div style={{ padding: 16, fontSize: 12, fontWeight: 700, textAlign: 'center' }}>Agency / Pro<br/><span style={{ fontWeight: 400, color: '#A88770', fontSize: 11 }}>$4,750/yr · $499/mo</span></div>
            <div style={{ padding: 16, fontSize: 12, fontWeight: 700, textAlign: 'center' }}>Managed<br/><span style={{ fontWeight: 400, color: '#A88770', fontSize: 11 }}>$999/mo</span></div>
          </div>
          {[
            ['Stores included',                          '1',         '1',       '1',       'up to 5',   'unlimited'],
            ['AI generations / month',                   '10',        '100',     '500',     '2,500',     '2,500'],
            ['Generation history',                       '✓',         '✓',       '✓',       '✓',         '✓'],
            ['UTM revenue attribution (first / last / linear / time-decay)', '✓', '✓', '✓', '✓', '✓'],
            ['Email sending (Klaviyo / SendGrid)',       '✗',         '✓',       '✓',       '✓',         '✓'],
            ['AI marketing summary on dashboard',        '✓',         '✓',       '✓',       '✓',         '✓'],
            ['Meta & Google campaign view (read-only)',  '✓',         '✓',       '✓',       '✓',         '✓'],
            ['Meta Ads (create / edit / publish)',       '✗',         '✓',       '✓',       '✓',         '✓'],
            ['Google Ads (create / edit / publish)',     '✗',         '✗',       '✓',       '✓',         '✓'],
            ['TikTok Ads',                               'Soon',      'Soon',    'Soon',    'Soon',      'Soon'],
            ['SMS (Attentive)',                          '✗',         '✗',       '✓',       '✓',         '✓'],
            ['Basic automations (welcome / abandon)',     '✗',         '✓',       '✓',       '✓',         '✓'],
            ['Full Flow Builder',                        '✗',         '✗',       '✓',       '✓',         '✓'],
            ['A/B copy testing + significance',          'Soon',      'Soon',    'Soon',    'Soon',      'Soon'],
            ['Campaign scheduling + planner',            '✗',         '✗',       '✓',       '✓',         '✓'],
            ['Performance-aware prompting',              '✗',         '✗',       '✓',       '✓',         '✓'],
            ['Competitor ad library spy',                '✗',         '✗',       '✓',       '✓',         '✓'],
            ['Predictive analytics (LTV / churn / NBA)', '✗',         '✗',       '✓',       '✓',         '✓'],
            ['Lookalike + custom audiences',             '✗',         '✗',       '✓',       '✓',         '✓'],
            ['Google Merchant Center feed',              '✗',         '✗',       '✓',       '✓',         '✓'],
            ['Branded PDF reports',                      '✗',         '✗',       '✓',       '✓',         '✓'],
            ['White-label client reports',               'Soon',      'Soon',    'Soon',    'Soon',      'Soon'],
            ['Landing page builder',                     'Soon',      'Soon',    'Soon',    'Soon',      'Soon'],
            ['Affiliate / referral program',             'Soon',      'Soon',    'Soon',    'Soon',      'Soon'],
            ['Social Manager + blog gen',                'Soon',      'Soon',    'Soon',    'Soon',      'Soon'],
            ['Review management (AI replies)',           'Soon',      'Soon',    'Soon',    'Soon',      'Soon'],
            ['Done-for-you management',                  '✗',         '✗',       '✗',       '✗',         '✓'],
            ['Monthly strategy + QBR',                   '✗',         '✗',       '✗',       '✗',         '✓'],
            ['Custom integrations',                      '✗',         '✗',       '✗',       '✗',         '✓'],
            ['Support',                                  'Community', 'Email',   'Email',   'Priority 4hr', 'Same day'],
          ].map((row, i, arr) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.7fr 0.9fr 1fr 1fr 1fr 1fr', borderBottom: i < arr.length - 1 ? '1px solid #E8D8C5' : 'none', fontSize: 13, alignItems: 'center' }}>
              <div style={{ padding: '12px 16px', fontWeight: 600 }}>{row[0]}</div>
              {row.slice(1).map((cell, ci) => {
                const colorMap = { '✓': '#1A8E4F', '✗': '#A88770', 'Soon': '#E5421A' };
                const color = colorMap[cell] || '#1A0D08';
                return (
                  <div key={ci} style={{
                    padding: '12px 12px', textAlign: 'center',
                    fontWeight: 600, color,
                    background: ci === 2 ? '#FFB80022' : 'transparent',
                    fontSize: cell.length > 4 ? 11 : 16,
                  }}>{cell}</div>
                );
              })}
            </div>
          ))}
        </HardCard>
        </div>
        <div style={{ marginTop: 16, fontSize: 12, color: '#5C3D28', display: 'flex', gap: 20, flexWrap: 'wrap' }}>
          <span><strong style={{ color: '#1A8E4F' }}>✓</strong> included</span>
          <span><strong style={{ color: '#A88770' }}>✗</strong> not in tier</span>
          <span><strong style={{ color: '#E5421A' }}>Soon</strong> coming in a future release</span>
        </div>
      </section>

      {/* AGENCY vs PLUGIN */}
      <section className="sec-pad" style={{ padding: '0 48px 96px' }}>
        <SectionLabel num="" label="THE MATH"/>
        <h2 style={{ fontSize: 'clamp(28px, 5vw, 64px)', margin: '0 0 48px', lineHeight: 0.94, letterSpacing: '-0.04em', fontWeight: 900, textAlign: 'center' }}>
          Agency <span style={{ color: '#E5421A' }}>vs.</span> Fire Your Agency
        </h2>
        <div className="split-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <HardCard style={{ padding: 36 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: '#A88770', letterSpacing: '0.1em' }}>YOUR CURRENT AGENCY</div>
            <div style={{ fontSize: 'clamp(48px, 8vw, 96px)', fontWeight: 900, lineHeight: 1, letterSpacing: '-0.04em', marginTop: 8, color: '#5C3D28' }}>$8,000<span style={{ fontSize: 18, fontWeight: 500 }}>/mo</span></div>
            <div style={{ marginTop: 24, fontSize: 14, lineHeight: 2, color: '#5C3D28' }}>
              <div>— 4-day turnaround on copy</div>
              <div>— Reports you don't read</div>
              <div>— Account manager turnover</div>
              <div>— 12-month contract lock-in</div>
              <div>— Strategy calls about strategy calls</div>
            </div>
          </HardCard>
          <div style={{ background: 'linear-gradient(135deg, #E5421A, #FFB800)', border: '2px solid #1A0D08', borderRadius: 24, padding: 36, boxShadow: '8px 8px 0 #1A0D08', color: '#1A0D08' }}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.1em' }}>FIRE YOUR AGENCY — GROWTH</div>
            <div style={{ fontSize: 'clamp(48px, 8vw, 96px)', fontWeight: 900, lineHeight: 1, letterSpacing: '-0.04em', marginTop: 8 }}>$2,250<span style={{ fontSize: 18, fontWeight: 500 }}>/yr</span></div>
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4 }}>billed annually · $188/mo effective</div>
            <div style={{ marginTop: 24, fontSize: 14, lineHeight: 2 }}>
              <div>+ Copy generated in seconds, not days</div>
              <div>+ Live dashboard in WP Admin</div>
              <div>+ Same plugin, every time</div>
              <div>+ Cancel or downgrade anytime</div>
              <div>+ ~22 hrs/month back</div>
            </div>
          </div>
        </div>
        <div style={{ marginTop: 32, padding: 24, background: '#1A0D08', color: '#FFF4E8', borderRadius: 16, textAlign: 'center', fontSize: 18, fontWeight: 600 }}>
          That's <span style={{ color: '#FFB800', fontWeight: 800 }}>$93,750 saved</span> per year. And ~22 hours/mo back. <span style={{ color: '#A88770', fontWeight: 400 }}>Math's not even close.</span>
        </div>
      </section>

      {/* FAQ */}
      <section className="sec-pad" style={{ padding: '0 48px 96px' }}>
        <h2 style={{ fontSize: 'clamp(28px, 5vw, 56px)', margin: '0 0 40px', lineHeight: 0.94, letterSpacing: '-0.03em', fontWeight: 900 }}>FAQ</h2>
        <div className="split-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {[
            ['Is the free tier actually free?', 'Yes, forever. 10 AI generations a month (copy and images), an AI marketing summary on your dashboard, a saved history of everything you generate, and UTM revenue attribution. You can connect Meta and Google to see how your campaigns are performing (read-only; nothing in your ad accounts is changed), and get ad copy to paste wherever you like. No card, no trial timer. Creating and publishing ads, and automation flows, start at Starter.'],
            ['Is there a free trial on paid plans?', 'Yes — every paid tier includes a 14-day full-access trial. A card is required to start it; cancel before it ends and you\'re not charged. Every paid plan also carries a 30-day money-back guarantee after purchase.'],
            ['Annual or monthly — which should I pick?', 'Annual is the default and saves roughly 20-25% versus paying monthly. Prefer flexibility? Every paid tier also offers monthly billing at a slight premium, and you can move from annual to monthly at renewal.'],
            ['What happens if I hit my generation cap?', 'You can wait for the monthly reset or upgrade a tier. We never auto-charge surprise overages.'],
            ['Do I need WooCommerce?', 'Yes. Fire Your Agency hooks into Woo products, orders, and customer segments. Plain WordPress alone won\'t cut it.'],
            ['Where do my API keys live?', 'Encrypted (AES-256) in your WP options table, derived from your WP salts. Your Klaviyo and SendGrid keys never leave your site. Meta and Google sign-in passes through our relay once during the OAuth handshake and the resulting tokens are stored only on your site.'],
            ['Can I switch tiers?', 'Yes — upgrade or downgrade anytime. Pro-rated on the way up, credited on the way down.'],
            ['What model powers the AI?', 'Anthropic Claude for all copy generation. We don\'t use your generations to train any model.'],
            ['What does "Managed" actually mean?', 'Our team logs into your install, runs the campaigns, and optimizes daily. You stay in the loop with monthly strategy and a QBR.'],
            ['Multi-site / agency use?', 'Agency / Pro covers up to 5 stores. Managed has no store cap.'],
            ['Why do I connect my account to use AI on the free plan?', 'Copy and images are written by our service, which needs to know which site is asking so it can count that site\'s monthly generations. Connecting is optional, and it is the only thing that shares your site URL and Freemius install ID with us. Until you connect, the free plugin sends us nothing. History, attribution and settings work either way.'],
            ['Does the free plugin track my visitors?', 'Only visitors who arrive through a link with UTM parameters, and only so their order can be attributed: a 30-day first-party cookie, the UTM values, and the page address, stored in your own database. None of it is sent to us. You may want to mention it in your own privacy policy.'],
          ].map(([q, a], i) => (
            <HardCard key={i} style={{ padding: 24 }}>
              <div style={{ fontSize: 17, fontWeight: 800, marginBottom: 8 }}>{q}</div>
              <div style={{ fontSize: 14, color: '#5C3D28', lineHeight: 1.5 }}>{a}</div>
            </HardCard>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="sec-pad" style={{ padding: '0 48px 96px' }}>
        <div className="cta-pad" style={{ background: 'linear-gradient(135deg, #E5421A, #FFB800)', border: '2px solid #1A0D08', borderRadius: 32, padding: 64, textAlign: 'center', boxShadow: '12px 12px 0 #1A0D08' }}>
          <h2 style={{ fontSize: 'clamp(32px, 6vw, 88px)', margin: 0, lineHeight: 0.92, letterSpacing: '-0.04em', fontWeight: 900, color: '#1A0D08' }}>
            Start free. Save a fortune.
          </h2>
          <a href="https://checkout.freemius.com/plugin/27834/plan/46003/" target="_blank" rel="noopener noreferrer" style={{ background: '#1A0D08', color: '#FFF4E8', border: 'none', padding: '20px 36px', borderRadius: 999, fontSize: 16, fontWeight: 700, cursor: 'pointer', marginTop: 32, textDecoration: 'none', display: 'inline-block' }}>
            Get free plan →
          </a>
          <div style={{ marginTop: 14, fontSize: 13, color: '#1A0D08', opacity: 0.7 }}>
            Free plan · No credit card · Upgrade in-plugin anytime
          </div>
        </div>
      </section>

      <InfernoFooter/>
    </div>
  );
};

window.InfernoPricing = InfernoPricing;