// Inferno HOW IT WORKS page

const InfernoHowItWorks = () => {
  const steps = [
    {
      n: '01',
      t: 'Install the plugin',
      d: 'Download the plugin from fireyouragency.net, upload it under Plugins → Add New → Upload Plugin, and activate. WooCommerce required.',
      time: '90 seconds',
      visual: 'install',
    },
    {
      n: '02',
      t: 'AI is built in',
      d: "No API key to paste. Claude generation runs on our infrastructure and is metered by your plan's monthly AI credits — nothing to configure, nothing to pay for separately.",
      time: 'zero setup',
      visual: 'keys',
    },
    {
      n: '03',
      t: 'Sync WooCommerce',
      d: 'We automatically pull your products and customer segments. No CSV uploads, no manual mapping.',
      time: 'instant',
      visual: 'sync',
    },
    {
      n: '04',
      t: 'Generate your first ad',
      d: 'Open Studio → AI Generator. Pick a product, channel, audience. Click generate. Get 3 ad variants by default (up to 5) in seconds.',
      time: 'seconds',
      visual: 'gen',
    },
    {
      n: '05',
      t: 'Connect your ad accounts',
      d: 'Connecting ad accounts is part of the paid plans: OAuth into Meta on Starter, add Google Ads from Growth up. Full campaign CRUD, not just copy to paste.',
      time: '2 minutes',
      visual: 'connect',
    },
    {
      n: '06',
      t: 'Cancel your retainer',
      d: 'We even drafted the email. Copy-paste, send, done. The hardest part is over.',
      time: 'whenever',
      visual: 'fire',
    },
  ];

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

      <section className="sec-pad" style={{ padding: '80px 48px 64px' }}>
        <SectionLabel num="" label="HOW IT WORKS"/>
        <h1 style={{ fontSize: 'clamp(48px, 9vw, 130px)', margin: 0, lineHeight: 0.86, letterSpacing: '-0.05em', fontWeight: 900 }}>
          Six steps.<br/>
          <span style={{
            background: 'linear-gradient(180deg, #E5421A, #FFB800)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
          }}>Under five minutes.</span>
        </h1>
        <p style={{ fontSize: 'clamp(16px, 2.2vw, 20px)', marginTop: 24, color: '#3D2818', maxWidth: 700 }}>
          From plugin install to generating your first ad. No agency onboarding, no kickoff call, no contract review.
        </p>
      </section>

      <section className="sec-pad" style={{ padding: '0 48px 96px' }}>
        {steps.map((s, i) => (
          <div key={i} className="step-grid" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48,
            padding: '48px 0', alignItems: 'center',
            borderBottom: i < steps.length - 1 ? '2px solid #1A0D08' : 'none',
          }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 16 }}>
                <div style={{ fontSize: 'clamp(48px, 8vw, 96px)', fontWeight: 900, color: '#E5421A', letterSpacing: '-0.05em', lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#5C3D28', letterSpacing: '0.1em' }}>STEP {s.n}</div>
              </div>
              <h2 style={{ fontSize: 'clamp(28px, 5vw, 56px)', margin: 0, lineHeight: 0.94, letterSpacing: '-0.03em', fontWeight: 900 }}>{s.t}</h2>
              <p style={{ fontSize: 17, marginTop: 16, color: '#3D2818', lineHeight: 1.5, maxWidth: 480 }}>{s.d}</p>
              <div style={{ marginTop: 20, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', background: '#1A0D08', color: '#FFB800', borderRadius: 999, fontSize: 12, fontWeight: 700 }}>
                <span>⚡</span> {s.time}
              </div>
            </div>

            {/* Visual placeholder */}
            <HardCard dark={i % 2 === 1} style={{ padding: 28, minHeight: 320 }}>
              {s.visual === 'install' && (
                <div>
                  <div style={{ fontSize: 11, color: i % 2 === 1 ? '#FFB800' : '#5C3D28', fontWeight: 700, marginBottom: 16, letterSpacing: '0.05em' }}>WP-ADMIN / PLUGINS / ADD NEW</div>
                  <div style={{ background: i % 2 === 1 ? '#0E0704' : '#fff', border: '1px solid ' + (i % 2 === 1 ? '#3D2818' : '#1A0D0822'), borderRadius: 8, padding: 16 }}>
                    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
                      <div style={{ width: 56, height: 56, borderRadius: 12, background: 'linear-gradient(135deg, #E5421A, #FFB800)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <InfernoLogo size={32}/>
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 15, fontWeight: 700 }}>Fire Your Agency</div>
                        <div style={{ fontSize: 12, color: i % 2 === 1 ? '#A88770' : '#5C3D28' }}>by Fire Your Agency · Free plan available</div>
                      </div>
                      <button style={{ background: '#E5421A', color: '#FFF4E8', border: 'none', padding: '8px 16px', borderRadius: 6, fontSize: 12, fontWeight: 700 }}>Install Now</button>
                    </div>
                  </div>
                </div>
              )}
              {s.visual === 'keys' && (
                <div>
                  <div style={{ fontSize: 11, color: i % 2 === 1 ? '#FFB800' : '#5C3D28', fontWeight: 700, marginBottom: 16, letterSpacing: '0.05em' }}>DASHBOARD / YOUR PLAN</div>
                  <div style={{ background: i % 2 === 1 ? '#0E0704' : '#fff', border: '1px solid ' + (i % 2 === 1 ? '#3D2818' : '#1A0D0822'), borderRadius: 8, padding: 16, marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: i % 2 === 1 ? '#A88770' : '#5C3D28', fontWeight: 600, marginBottom: 6 }}>
                      <span>AI generations this month</span>
                      <span>76/100</span>
                    </div>
                    <div style={{ height: 6, borderRadius: 999, background: i % 2 === 1 ? '#3D2818' : '#FFF4E8', overflow: 'hidden' }}>
                      <div style={{ width: '76%', height: '100%', background: 'linear-gradient(90deg, #E5421A, #FFB800)' }}/>
                    </div>
                  </div>
                  <div style={{ fontSize: 12, color: i % 2 === 1 ? '#A88770' : '#5C3D28', lineHeight: 1.5 }}>
                    Included in every plan — powered by our own Claude infrastructure, not yours. Nothing to configure, nothing to pay for separately.
                  </div>
                </div>
              )}
              {s.visual === 'sync' && (
                <div>
                  <div style={{ fontSize: 11, color: i % 2 === 1 ? '#FFB800' : '#5C3D28', fontWeight: 700, marginBottom: 16, letterSpacing: '0.05em' }}>WOOCOMMERCE SYNC — 2.4s</div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                    {[
                      ['Products synced', '142'],
                      ['Customer segments', '8'],
                      ['Orders (90d)', '1,247'],
                      ['Revenue (90d)', '$48,210'],
                    ].map(([l, v], li) => (
                      <div key={l} style={{ background: i % 2 === 1 ? '#0E0704' : '#fff', border: '1px solid ' + (i % 2 === 1 ? '#3D2818' : '#1A0D0822'), borderRadius: 8, padding: 12 }}>
                        <div style={{ fontSize: 10, color: i % 2 === 1 ? '#A88770' : '#5C3D28', fontWeight: 600 }}>{l}</div>
                        <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4 }}>{v}</div>
                      </div>
                    ))}
                  </div>
                  <div style={{ marginTop: 12, fontSize: 11, color: '#1A8E4F', fontWeight: 600 }}>✓ Sync complete</div>
                </div>
              )}
              {s.visual === 'gen' && (
                <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 12 }}>
                  <div style={{ color: '#FFB800', marginBottom: 12 }}>// generation.log</div>
                  <div style={{ color: i % 2 === 1 ? '#A88770' : '#5C3D28', lineHeight: 1.8 }}>
                    <div>→ product: ceramic-mug-34</div>
                    <div>→ channel: meta</div>
                    <div>→ audience: repeat-buyers-ltv-200</div>
                    <div>→ calling claude...</div>
                  </div>
                  <div style={{ marginTop: 12, padding: 12, background: i % 2 === 1 ? '#0E0704' : '#FFF4E8', borderLeft: '2px solid #E5421A' }}>
                    <div style={{ color: '#FFB800', fontSize: 10, marginBottom: 4 }}>// VARIANT A</div>
                    <div style={{ fontSize: 13 }}>"The mug that finally fits your hand."</div>
                  </div>
                  <div style={{ marginTop: 8, color: '#1A8E4F', fontSize: 11 }}>✓ 3 variants · 9 left this month</div>
                </div>
              )}
              {s.visual === 'connect' && (
                <div>
                  <div style={{ fontSize: 11, color: i % 2 === 1 ? '#FFB800' : '#5C3D28', fontWeight: 700, marginBottom: 16, letterSpacing: '0.05em' }}>AD CHANNELS</div>
                  {[
                    ['Meta Ads', 'connected', '4 accounts'],
                    ['Google Ads', 'connected', '2 accounts'],
                    ['TikTok Ads', 'coming soon', ''],
                    ['Klaviyo', 'connected', '1 account'],
                  ].map(([n, status, sub]) => (
                    <div key={n} style={{ background: i % 2 === 1 ? '#0E0704' : '#fff', border: '1px solid ' + (i % 2 === 1 ? '#3D2818' : '#1A0D0822'), borderRadius: 8, padding: 12, marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 600 }}>{n}</div>
                        {sub && <div style={{ fontSize: 11, color: i % 2 === 1 ? '#A88770' : '#5C3D28' }}>{sub}</div>}
                      </div>
                      <div style={{ fontSize: 11, color: status === 'connected' ? '#1A8E4F' : '#E5421A', fontWeight: 700 }}>{status === 'connected' ? '● connected' : status}</div>
                    </div>
                  ))}
                </div>
              )}
              {s.visual === 'fire' && (
                <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 12 }}>
                  <div style={{ color: i % 2 === 1 ? '#FFB800' : '#5C3D28', marginBottom: 12, fontSize: 11, fontWeight: 700 }}>RESIGNATION_EMAIL.txt</div>
                  <div style={{ background: i % 2 === 1 ? '#0E0704' : '#FFF4E8', border: '1px dashed ' + (i % 2 === 1 ? '#3D2818' : '#1A0D08'), padding: 16, borderRadius: 8, fontSize: 12, lineHeight: 1.6 }}>
                    <div>To: {RESIGNATION_EMAIL.to}</div>
                    <div>Subj: {RESIGNATION_EMAIL.subject}</div>
                    <div style={{ marginTop: 12, whiteSpace: 'pre-line' }}>{RESIGNATION_EMAIL.body}</div>
                  </div>
                  <CopyButton
                    text={`To: ${RESIGNATION_EMAIL.to}\nSubject: ${RESIGNATION_EMAIL.subject}\n\n${RESIGNATION_EMAIL.body}`}
                    style={{ marginTop: 12 }}
                  />
                </div>
              )}
            </HardCard>
          </div>
        ))}
      </section>

      {/* DETAILED REQS */}
      <section className="sec-pad" style={{ padding: '0 48px 96px' }}>
        <SectionLabel num="" label="REQUIREMENTS"/>
        <h2 style={{ fontSize: 'clamp(28px, 5vw, 56px)', margin: '0 0 32px', lineHeight: 0.94, letterSpacing: '-0.03em', fontWeight: 900 }}>
          What you'll need.
        </h2>
        <div className="reqs-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            { t: 'WordPress 6.4+', d: 'PHP 8.1+, MySQL 5.7+', icon: 'WP' },
            { t: 'WooCommerce 7.0+', d: 'Standard install. No subscriptions add-on required.', icon: 'WC' },
            { t: 'A Fire Your Agency plan', d: 'AI generation is included and metered by your plan — no separate Anthropic account needed.', icon: 'AI' },
            { t: 'Ad account access', d: 'Meta/Google — admin access via OAuth.', icon: '◫' },
          ].map((r, i) => (
            <HardCard key={i} style={{ padding: 24, minHeight: 180 }}>
              <div style={{ width: 44, height: 44, borderRadius: 22, background: '#1A0D08', color: '#FFB800', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 800, marginBottom: 16 }}>{r.icon}</div>
              <div style={{ fontSize: 16, fontWeight: 800, marginBottom: 6 }}>{r.t}</div>
              <div style={{ fontSize: 13, color: '#5C3D28', lineHeight: 1.4 }}>{r.d}</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' }}>
            Ready when you are.
          </h2>
          <a href="pricing.html" 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' }}>
            Start 14-day trial →
          </a>
        </div>
      </section>

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

window.InfernoHowItWorks = InfernoHowItWorks;