// Inferno FEATURES detail page — full real feature list, grouped by category, tagged by tier

const InfernoFeatures = () => {
  // Tier badge component
  const Tier = ({ name, color }) => (
    <span style={{
      display: 'inline-block', padding: '2px 8px', borderRadius: 999,
      fontSize: 9, fontWeight: 800, letterSpacing: '0.08em',
      background: color, color: name === 'AGENCY' || name === 'MANAGED' || name === 'FREE' ? '#FFF4E8' : '#1A0D08',
      whiteSpace: 'nowrap',
    }}>{name}</span>
  );

  const Soon = () => (
    <span style={{
      display: 'inline-block', padding: '2px 8px', borderRadius: 999,
      fontSize: 9, fontWeight: 800, letterSpacing: '0.08em',
      background: '#1A0D08', color: '#FFB800',
      whiteSpace: 'nowrap', marginLeft: 6,
    }}>SOON</span>
  );

  // Tier color tokens
  const TC = {
    FREE:    '#1A8E4F',
    STARTER: '#FFB800',
    GROWTH:  '#E5421A',
    AGENCY:  '#1A0D08',
    MANAGED: '#5C3D28',
  };

  const groups = [
    {
      heading: 'AI Studio',
      sub: 'Claude-powered copy that adapts to performance.',
      items: [
        { t: 'AI Generator', d: 'Generate ad copy, email subject lines, body content, and headline variants from a brief. Powered by Anthropic\'s Claude. Multiple variants per call. Lives in the Studio section of the plugin. The free plan includes 10 generations a month; paid plans raise the limit.', tiers: ['FREE'] },
        { t: 'AI Marketing Summary', d: 'A plain-English read on the last 30 days on your dashboard: a grade, what is working, what to watch, and what to do next, written from your store\'s sales and any connected Meta or Google campaigns. It writes itself the first time you open the dashboard, then refreshes when you ask; each refresh uses one AI generation. No customer names, emails or addresses are sent. Paid plans can also act on the advice.', tiers: ['FREE'] },
        { t: 'Generation History', d: 'Every generation logged with prompt, output, channel, and product. Browse past generations in Studio, copy them, or delete them. Starter and up can also re-publish them to Meta or Google.', tiers: ['FREE'] },
        { t: 'Performance-Aware Prompting', d: 'Automatically enriches AI prompts with historical creative performance data so each generation builds on what already worked.', tiers: ['GROWTH'] },
      ],
    },
    {
      heading: 'Paid Advertising',
      sub: 'Unified UI across Meta and Google.',
      items: [
        { t: 'Campaign View (Meta + Google)', d: 'Connect Meta and Google Ads with read-only sign-in and see your campaigns, spend, clicks and reported return on ad spend in one place. Nothing in your ad accounts is created or changed. Meta is limited to the read-only ads_read permission.', tiers: ['FREE'] },
        { t: 'Meta Ads Management', d: 'Full campaign, ad set, and ad CRUD via the Meta Marketing API. OAuth 2.0, long-lived tokens, campaign + ad-level insights, Lookalike Audiences.', tiers: ['STARTER'] },
        { t: 'Google Ads Management', d: 'Campaign creation, pausing, and performance reporting via the Google Ads API. OAuth 2.0 with refresh tokens. Geographic breakdown.', tiers: ['GROWTH'] },
        { t: 'TikTok Ads Management', d: 'Campaign and ad group management via TikTok Marketing API. Authentication and CRUD alongside Meta and Google.', tiers: ['GROWTH'], soon: true },
        { t: 'Campaign Manager', d: 'Unified tabbed interface for Meta, Google, and Lookalike Audiences — all from one screen without leaving WP Admin.', tiers: ['GROWTH'] },
      ],
    },
    {
      heading: 'Audience & Segmentation',
      sub: 'Real segments from real WooCommerce orders.',
      items: [
        { t: 'WooCommerce Customer Segments', d: 'Live segments derived from order history: high-LTV, recent buyers, lapsed (90d+), first-timers, category buyers. No separate platform.', tiers: ['STARTER'] },
        { t: 'Lookalike Audiences', d: 'Upload SHA-256 hashed customer email lists to Meta as Custom Audiences and generate Lookalikes directly from the dashboard.', tiers: ['GROWTH'] },
        { t: 'Audience Advisor', d: 'AI-powered recommendations on which audience segments to target for a given campaign goal, based on your WooCommerce data.', tiers: ['GROWTH'] },
        { t: 'Audience Insights', d: 'Deep analysis of segments: purchase frequency, AOV, category affinity, churn signals — to inform targeting decisions.', tiers: ['GROWTH'] },
        { t: 'Exclusion Audiences', d: 'Automatically suppress recently-converted customers from prospecting campaigns. No wasted impressions on existing buyers.', tiers: ['GROWTH'] },
        { t: 'Google Audience Manager', d: 'Sync WooCommerce segments to Google Ads Customer Match audiences for remarketing and similar audiences.', tiers: ['GROWTH'] },
      ],
    },
    {
      heading: 'Email & SMS Automation',
      sub: 'Visual flows. Multi-step sequences. Real triggers.',
      items: [
        { t: 'Email Sending', d: 'Delivery via Klaviyo (primary) or SendGrid (fallback). Queued, batched sends — no mass-send PHP loops blocking your store.', tiers: ['STARTER'] },
        { t: 'Flow Builder', d: 'Visual multi-step email and SMS flow builder. Triggers: cart abandonment, order completion, segment join (e.g. win-back), or manual enrollment. Templates included.', tiers: ['GROWTH'] },
        { t: 'SMS Sending', d: 'SMS delivery via Attentive integration. Opt-in handling built in. Combine email + SMS in one flow.', tiers: ['GROWTH'] },
        { t: 'Cart Abandonment Detection', d: 'Hooks into WooCommerce session data to detect abandoned carts and auto-enroll customers into recovery flows.', tiers: ['GROWTH'] },
      ],
    },
    {
      heading: 'Analytics & Attribution',
      sub: 'Know which dollar earned which dollar.',
      items: [
        { t: 'Unified Dashboard', d: 'At-a-glance overview across Meta, Google, and email. AI budget intelligence surfaced on the home screen.', tiers: ['STARTER'] },
        { t: 'UTM Attribution', d: 'Captures UTMs at WooCommerce checkout, stores as order meta. Order-level attribution for accurate channel reporting.', tiers: ['FREE'] },
        { t: 'Multi-Touch Attribution', d: 'Configurable models: last-click, first-click, linear, time-decay. Full attribution reporting dashboard included.', tiers: ['FREE'] },
        { t: 'LTV Predictor', d: 'Forecasts customer lifetime value based on purchase history. Use it to set ad spend ceilings per segment.', tiers: ['GROWTH'] },
        { t: 'Churn Risk Scorer', d: 'Scores each customer\'s churn probability so at-risk customers can be targeted with retention campaigns proactively.', tiers: ['GROWTH'] },
        { t: 'Next Best Action Engine', d: 'Recommends the next marketing action per customer segment. Take the guesswork out of "what to send next."', tiers: ['GROWTH'] },
        { t: 'Predictive Segment Manager', d: 'Dynamic segments updated live by predictive model outputs — no manual list maintenance.', tiers: ['GROWTH'] },
      ],
    },
    {
      heading: 'Competitor Intelligence',
      sub: 'See what your rivals are running.',
      items: [
        { t: 'Competitor Analysis', d: 'Search the Meta Ad Library API by keyword, country, or advertiser. Identify creative patterns without leaving WP Admin.', tiers: ['GROWTH'] },
      ],
    },
    {
      heading: 'Campaign Planning',
      sub: 'AI-generated plans, calendared and budgeted.',
      items: [
        { t: 'Campaign Planner', d: 'Three-tab workspace: AI campaign plans, plan history, interactive marketing calendar (auto-populated with US holidays + seasonal events).', tiers: ['GROWTH'] },
        { t: 'Budget Analyser', d: 'Aggregates Meta + Google spend and ROAS, then Claude produces a natural-language budget reallocation recommendation.', tiers: ['GROWTH'] },
      ],
    },
    {
      heading: 'Landing Pages',
      sub: 'Built, copywritten, and served in-plugin.',
      items: [
        { t: 'Landing Page Builder', d: 'Create, manage, and publish campaign landing pages from WP Admin. Claude drafts copy from a brief; served via custom WP endpoint.', tiers: ['AGENCY'], soon: true },
      ],
    },
    {
      heading: 'Product Catalog',
      sub: 'Feed your products to Google Shopping automatically.',
      items: [
        { t: 'Google Merchant Center Feed', d: 'Generates and syncs a product feed to Google Merchant Center for Shopping Ads. The feed refreshes automatically every day.', tiers: ['GROWTH'] },
      ],
    },
    {
      heading: 'Reports',
      sub: 'Monthly performance, written by Claude.',
      items: [
        { t: 'PDF Reports', d: 'Monthly downloadable PDFs. Data assembled from Meta, Google, Klaviyo, WooCommerce. Claude writes the narrative + action items.', tiers: ['GROWTH'] },
        { t: 'Client-Facing Reports', d: 'Shareable, password-protected report links for agency clients. Whitelabel-safe view, no WP login required.', tiers: ['AGENCY'], soon: true },
      ],
    },
    {
      heading: 'Social & Content',
      sub: 'Cross-channel publishing + long-form blog content.',
      items: [
        { t: 'Social Manager', d: 'Schedule and publish social posts across connected channels. Claude drafts long-form blog content from campaign briefs.', tiers: ['AGENCY'], soon: true },
      ],
    },
    {
      heading: 'Referral & Affiliates',
      sub: 'Turn customers into a paid acquisition channel.',
      items: [
        { t: 'Referral Tracking', d: 'Track customer referrals using unique links. Attribute referred orders to the referrer for rewards and analytics.', tiers: ['AGENCY'], soon: true },
        { t: 'Affiliate Program', d: 'Manage an affiliate/partner program from WP Admin: track links, click-through, and commission-eligible orders.', tiers: ['AGENCY'], soon: true },
      ],
    },
    {
      heading: 'Reputation Management',
      sub: 'AI-drafted review responses, approved by you.',
      items: [
        { t: 'Review Management', d: 'Consolidates reviews from connected sources. Claude drafts contextually appropriate responses — approve and post from the dashboard.', tiers: ['AGENCY'], soon: true },
      ],
    },
    {
      heading: 'Done-For-You',
      sub: 'Hand us the keys, get your weekends back.',
      items: [
        { t: 'Managed Service', d: 'Our team logs in, runs campaigns, optimizes daily. You stay informed via monthly strategy + QBR. We do the work.', tiers: ['MANAGED'] },
        { t: 'Custom Integrations', d: 'Need it to talk to your CRM, ERP, or fulfilment partner? We build it for you under Managed.', tiers: ['MANAGED'] },
        { t: 'Dedicated Slack Channel', d: 'Shared Slack with our team. Same-day responses, no ticket queue, real humans on the other end.', tiers: ['MANAGED'] },
      ],
    },
    {
      heading: 'Platform & Infrastructure',
      sub: 'Boring, but important. Built for stores that matter.',
      items: [
        { t: 'AES-256 Encryption', d: 'All stored API keys and tokens encrypted at rest, derived from WP salts. No plaintext credentials anywhere.', tiers: ['FREE'] },
        { t: 'Centralized OAuth', d: 'OAuth 2.0 flow management for Meta and Google — initiation, callback, token exchange, refresh, all handled.', tiers: ['STARTER'] },
        { t: 'Rate Limiting', d: 'Per-user rate limiting on AI generation and expensive API endpoints. Prevents abuse and manages third-party API costs.', tiers: ['FREE'] },
        { t: 'Exponential Backoff', d: 'All external API calls retry on transient errors (429, 5xx) with 1s/2s/4s delays. Non-retryable errors fail fast.', tiers: ['FREE'] },
        { t: 'Scheduled Jobs', d: 'WP Cron tasks: hourly Meta/Google stats sync, 15-minute email and flow queue, daily WooCommerce-to-Klaviyo customer sync.', tiers: ['STARTER'] },
        { t: 'Structured Logging', d: 'Severity-levelled logs (debug/info/warning/error) for API interactions and OAuth events, viewable in Settings. The AI generation log is kept for 90 days.', tiers: ['FREE'] },
        { t: 'REST API', d: '109+ endpoints under fire-your-agency/v1. Capability-checked, nonce-verified, consistent { success, data, error } shape.', tiers: ['STARTER'] },
        { t: 'React Dashboard', d: 'Single-page admin app built with React + Zustand + Tailwind. All styles scoped to prevent WP Admin conflicts.', tiers: ['FREE'] },
      ],
    },
  ];

  const totalCount = groups.reduce((n, g) => n + g.items.length, 0);

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

      <section className="sec-pad" style={{ padding: '80px 48px 48px' }}>
        <SectionLabel num="" label="FEATURES"/>
        <h1 style={{ fontSize: 'clamp(40px, 8vw, 110px)', margin: 0, lineHeight: 0.9, letterSpacing: '-0.05em', fontWeight: 900 }}>
          Everything in <span style={{
            background: 'linear-gradient(180deg, #E5421A, #FFB800)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
          }}>one plugin.</span>
        </h1>
        <p style={{ fontSize: 'clamp(16px, 2.2vw, 20px)', marginTop: 24, color: '#3D2818', maxWidth: 760 }}>
          {totalCount} features across {groups.length} categories. Each tagged with the plan it is available from. Built into WP Admin — no separate platform, no tab-switching, no CSV exports.
        </p>

        {/* Legend */}
        <div style={{ marginTop: 32, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 12, color: '#5C3D28', fontWeight: 700, letterSpacing: '0.1em', marginRight: 8 }}>AVAILABLE FROM:</span>
          <Tier name="FREE" color={TC.FREE}/>
          <Tier name="STARTER" color={TC.STARTER}/>
          <Tier name="GROWTH" color={TC.GROWTH}/>
          <Tier name="AGENCY" color={TC.AGENCY}/>
          <Tier name="MANAGED" color={TC.MANAGED}/>
        </div>
      </section>

      {groups.map((group, gi) => (
        <section key={gi} className="sec-pad" style={{ padding: '32px 48px' }}>
          <div className="group-heading-row" style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 24 }}>
            <div style={{ fontSize: 'clamp(22px, 3vw, 32px)', fontWeight: 900, letterSpacing: '-0.02em' }}>{group.heading}</div>
            <div style={{ fontSize: 14, color: '#5C3D28', fontWeight: 500 }}>{group.sub}</div>
            <div className="group-heading-divider" style={{ flex: 1, height: 2, background: '#1A0D08' }}/>
            <div style={{ fontSize: 13, color: '#5C3D28' }}>{group.items.length} {group.items.length === 1 ? 'feature' : 'features'}</div>
          </div>
          <div className="groups-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {group.items.map((f, fi) => (
              <HardCard key={fi} style={{ padding: 24, minHeight: 200, display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 6, marginBottom: 12, flexWrap: 'wrap' }}>
                  {f.tiers.map(t => <Tier key={t} name={t} color={TC[t]}/>)}
                  {f.soon && <Soon/>}
                </div>
                <div style={{ fontSize: 18, fontWeight: 800, marginBottom: 8, letterSpacing: '-0.01em', textWrap: 'pretty' }}>{f.t}</div>
                <div style={{ fontSize: 13, color: '#5C3D28', lineHeight: 1.5, textWrap: 'pretty' }}>{f.d}</div>
              </HardCard>
            ))}
          </div>
        </section>
      ))}

      {/* CTA */}
      <section className="sec-pad" style={{ padding: '80px 48px 96px' }}>
        <div className="split-2 cta-pad" style={{
          background: 'linear-gradient(135deg, #E5421A, #FFB800)',
          border: '2px solid #1A0D08', borderRadius: 32, padding: 64,
          boxShadow: '12px 12px 0 #1A0D08',
          display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 32, alignItems: 'center',
        }}>
          <div>
            <h2 style={{ fontSize: 'clamp(32px, 5vw, 72px)', margin: 0, lineHeight: 0.92, letterSpacing: '-0.04em', fontWeight: 900, color: '#1A0D08' }}>
              See it all running.
            </h2>
            <p style={{ fontSize: 18, marginTop: 16, color: '#1A0D08', opacity: 0.8 }}>
              Start a 14-day trial. Generate your first ad in 4 seconds. Upgrade or downgrade anytime.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <button style={{ background: '#1A0D08', color: '#FFF4E8', border: 'none', padding: '18px 32px', borderRadius: 999, fontSize: 15, fontWeight: 700, cursor: 'pointer' }} onClick={() => openFreemiusCheckout({ planId: '60066', licenses: 1 })}>Start 14-day trial →</button>
            <a href="pricing.html" style={{ background: 'transparent', color: '#1A0D08', border: '2px solid #1A0D08', padding: '14px 28px', borderRadius: 999, fontSize: 15, fontWeight: 700, textAlign: 'center', textDecoration: 'none' }}>See pricing</a>
          </div>
        </div>
      </section>

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

window.InfernoFeatures = InfernoFeatures;