import { useState, useEffect } from 'react';

const quarters = [
  {
    id: 'q1',
    label: 'Q1: January – March',
    title: 'Foundations',
    icon: (
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5">
        <rect x="6" y="6" width="8" height="8" rx="1"/>
        <rect x="18" y="6" width="8" height="8" rx="1"/>
        <rect x="6" y="18" width="8" height="8" rx="1"/>
        <rect x="18" y="18" width="8" height="8" rx="1"/>
      </svg>
    ),
    months: [
      { month: 'January', title: 'AI Maturity: Where Do You Actually Stand?', desc: 'Self-assessment frameworks. Benchmarking against peers. Identifying gaps between perception and reality.' },
      { month: 'February', title: 'AI Use Case Prioritization', desc: 'From 50 ideas to 3 priorities. Scoring frameworks. Kill criteria. How to say no to shiny objects.' },
      { month: 'March', title: 'Defining Success Before You Build', desc: "Why most AI projects can't answer 'is this working?' Setting success criteria upfront. Leading indicators. Kill criteria before momentum takes over." }
    ]
  },
  {
    id: 'q2',
    label: 'Q2: April – June',
    title: 'Risk & Governance',
    icon: (
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M16 4L4 10v8c0 7 5 12 12 14 7-2 12-7 12-14v-8L16 4z"/>
      </svg>
    ),
    months: [
      { month: 'April', title: 'AI Risk Landscape', desc: 'Legal exposure. Compliance requirements. The lawsuits happening now and what they mean for you.' },
      { month: 'May', title: 'AI Policy Workshop', desc: 'Hands-on session. Draft your acceptable use policy. Review peer approaches. Leave with something usable.' },
      { month: 'June', title: 'Responsible AI: Bias, Transparency & Oversight', desc: 'Beyond compliance theater. Actual decisions about bias, transparency, and when humans stay in the loop.' }
    ]
  },
  {
    id: 'q3',
    label: 'Q3: July – September',
    title: 'Decisions & Vendors',
    icon: (
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5">
        <circle cx="16" cy="16" r="11"/>
        <circle cx="16" cy="16" r="3"/>
        <line x1="16" y1="5" x2="16" y2="9"/>
        <line x1="16" y1="23" x2="16" y2="27"/>
        <line x1="5" y1="16" x2="9" y2="16"/>
        <line x1="23" y1="16" x2="27" y2="16"/>
      </svg>
    ),
    months: [
      { month: 'July', title: 'Data Readiness: What AI Actually Requires', desc: 'AI projects die on data. What your data actually needs to look like. Gaps to close before spending on vendors.' },
      { month: 'August', title: 'Build vs Buy vs Partner', desc: 'When to use off-the-shelf. When to customize. When to build. When to hire consultants. The real cost of each.' },
      { month: 'September', title: 'AI Vendor Evaluation', desc: "Who's real, who's vaporware. Evaluation frameworks. Red flags in demos and contracts." }
    ]
  },
  {
    id: 'q4',
    label: 'Q4: October – December',
    title: 'People & Execution',
    icon: (
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5">
        <circle cx="16" cy="10" r="5"/>
        <circle cx="8" cy="22" r="4"/>
        <circle cx="24" cy="22" r="4"/>
        <path d="M16 15v4M12 22h-4M20 22h4"/>
      </svg>
    ),
    months: [
      { month: 'October', title: 'Workforce Conversations', desc: "Having honest conversations about AI's impact. Displacement, reskilling, new roles. What to say and when." },
      { month: 'November', title: 'Driving AI Adoption', desc: 'Getting people to actually use the tools. Overcoming resistance. Building prompt fluency. Integrating AI into real workflows.' },
      { month: 'December', title: 'Your AI Roadmap', desc: 'Planning when capabilities change every 6 months. Facilitated session. Peer review. Leave with a concrete plan.' }
    ]
  }
];

const pillars = [
  { word: 'Judgment', desc: 'Making the right call when the data is incomplete' },
  { word: 'Authority', desc: 'Knowing who decides what, and when' },
  { word: 'Accountability', desc: 'Owning outcomes, not just activity' },
  { word: 'Direction', desc: 'Setting the course others can follow' }
];

const features = [
  { label: '2 hours monthly', sublabel: 'in-person' },
  { label: 'Food included', sublabel: '' },
  { label: 'Monthly toolkit', sublabel: 'take-home' },
  { label: 'Case study', sublabel: 'quarterly' }
];

export default function AILeadershipStudio() {
  const [activeQ, setActiveQ] = useState('q1');
  const [visible, setVisible] = useState(false);
  const [darkMode, setDarkMode] = useState(true);
  
  useEffect(() => {
    setVisible(true);
  }, []);

  const t = darkMode ? {
    bg: '#000000',
    bgAlt: '#050505',
    text: '#ffffff',
    textMuted: '#a0a0a0',
    textFaint: '#707070',
    textFainter: '#505050',
    accent: '#d99e33',
    accentHover: '#e8b04a',
    accentMuted: 'rgba(217,158,51,0.8)',
    accentFaint: 'rgba(217,158,51,0.5)',
    accentBg: 'rgba(217,158,51,0.08)',
    accentBgStrong: 'rgba(217,158,51,0.15)',
    accentBorder: 'rgba(217,158,51,0.3)',
    border: 'rgba(255,255,255,0.1)',
    borderLight: 'rgba(255,255,255,0.06)',
    cardBg: 'transparent',
    cardBgHover: 'rgba(217,158,51,0.05)',
    cardBorder: 'rgba(255,255,255,0.15)',
    glow: 'rgba(217,158,51,0.05)'
  } : {
    bg: '#fefefe',
    bgAlt: '#f5f4f2',
    text: '#1a1a1a',
    textMuted: '#5a5a5a',
    textFaint: '#777777',
    textFainter: '#999999',
    accent: '#b8860b',
    accentHover: '#9a7209',
    accentMuted: 'rgba(184,134,11,0.8)',
    accentFaint: 'rgba(184,134,11,0.5)',
    accentBg: 'rgba(184,134,11,0.06)',
    accentBgStrong: 'rgba(184,134,11,0.12)',
    accentBorder: 'rgba(184,134,11,0.25)',
    border: 'rgba(0,0,0,0.08)',
    borderLight: 'rgba(0,0,0,0.05)',
    cardBg: 'rgba(0,0,0,0.02)',
    cardBgHover: 'rgba(0,0,0,0.04)',
    cardBorder: 'rgba(0,0,0,0.08)',
    glow: 'rgba(184,134,11,0.08)'
  };

  return (
    <div style={{ minHeight: '100vh', backgroundColor: t.bg, color: t.text, fontFamily: 'system-ui, sans-serif', position: 'relative' }}>
      
      {/* Theme Toggle */}
      <button 
        onClick={() => setDarkMode(!darkMode)}
        style={{
          position: 'fixed',
          top: '20px',
          right: '20px',
          zIndex: 100,
          backgroundColor: darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)',
          border: `1px solid ${t.border}`,
          borderRadius: '8px',
          padding: '10px 14px',
          cursor: 'pointer',
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          color: t.textMuted,
          fontSize: '14px'
        }}
      >
        {darkMode ? (
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="5"/>
            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
          </svg>
        ) : (
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
        )}
        {darkMode ? 'Light' : 'Dark'}
      </button>

      {/* Hero */}
      <header style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{ 
          maxWidth: '1000px', 
          margin: '0 auto', 
          padding: '64px 24px 80px',
          opacity: visible ? 1 : 0,
          transform: visible ? 'translateY(0)' : 'translateY(20px)',
          transition: 'all 1s ease-out'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '32px' }}>
            <div style={{ 
              width: '40px', 
              height: '40px', 
              border: `1px solid ${t.accentFaint}`, 
              borderRadius: '6px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}>
              <div style={{ width: '12px', height: '12px', backgroundColor: t.accent, borderRadius: '2px' }}/>
            </div>
            <span style={{ color: t.accent, fontWeight: '500', letterSpacing: '0.1em', fontSize: '14px', textTransform: 'uppercase' }}>
              AI Leadership Studio
            </span>
          </div>
          
          <h1 style={{ 
            fontSize: 'clamp(36px, 5vw, 56px)', 
            fontWeight: '300', 
            lineHeight: '1.1', 
            marginBottom: '24px',
            maxWidth: '800px'
          }}>
            AI leadership, taught the way it is <span style={{ color: t.accent }}>practiced.</span>
          </h1>
          
          <p style={{ 
            fontSize: '20px', 
            color: t.textMuted, 
            maxWidth: '640px', 
            marginBottom: '40px',
            lineHeight: '1.6'
          }}>
            In-person mentorship for emerging AI leaders. Decision standards, operating judgment, governance under pressure, and real implementation tradeoffs.
          </p>
          
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', marginBottom: '48px' }}>
            {features.map((f, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <div style={{ width: '6px', height: '6px', backgroundColor: t.accent, borderRadius: '50%' }}/>
                <span style={{ color: t.textMuted }}>{f.label}</span>
                {f.sublabel && <span style={{ color: t.textFaint, fontSize: '14px' }}>{f.sublabel}</span>}
              </div>
            ))}
          </div>
          
          <button 
            onClick={() => document.getElementById('pricing')?.scrollIntoView({ behavior: 'smooth' })}
            style={{ 
              backgroundColor: t.accent, 
              color: darkMode ? '#000' : '#fff', 
              fontWeight: '500', 
              padding: '16px 32px', 
              borderRadius: '6px',
              border: 'none',
              cursor: 'pointer',
              fontSize: '16px'
            }}>
            See Pricing & Join
          </button>
        </div>
      </header>

      {/* Four Pillars */}
      <section style={{ borderTop: `1px solid ${t.border}`, backgroundColor: t.bgAlt }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '80px 24px' }}>
          <div style={{ textAlign: 'center', marginBottom: '48px' }}>
            <span style={{ color: t.accent, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
              The Four Pillars
            </span>
            <h2 style={{ fontSize: '32px', fontWeight: '300', marginTop: '12px', color: t.text }}>
              What leadership actually carries
            </h2>
          </div>
          
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '24px' }}>
            {pillars.map((p, i) => (
              <div key={i} style={{ 
                textAlign: 'center', 
                padding: '32px 24px',
                backgroundColor: 'transparent',
                border: `1px solid ${t.accentBorder}`,
                borderRadius: '12px',
                transition: 'all 0.3s ease',
                cursor: 'default'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = t.accent;
                e.currentTarget.style.boxShadow = `0 0 25px ${t.glow}`;
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = t.accentBorder;
                e.currentTarget.style.boxShadow = 'none';
              }}>
                <div style={{ 
                  fontSize: '28px', 
                  fontWeight: '400', 
                  color: t.accent,
                  marginBottom: '12px'
                }}>
                  {p.word}
                </div>
                <div style={{ fontSize: '14px', color: t.textMuted, lineHeight: '1.5' }}>
                  {p.desc}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Value Props */}
      <section style={{ borderTop: `1px solid ${t.border}`, backgroundColor: t.bg }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '64px 24px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '48px' }}>
            {[
              { title: 'Decision Standards', desc: 'How to define "good" before projects generate momentum, spend, and sunk-cost politics.' },
              { title: 'Operating Judgment', desc: 'How to make tradeoffs in real environments: capacity limits, incentives, timelines, organizational friction.' },
              { title: 'Governance Under Pressure', desc: 'Authority, accountability, escalation paths, and the discipline to slow down at the right moments.' }
            ].map((item, i) => (
              <div key={i}>
                <div style={{ width: '48px', height: '2px', backgroundColor: t.accentFaint, marginBottom: '24px' }}/>
                <h3 style={{ fontSize: '20px', fontWeight: '500', marginBottom: '12px', color: t.text }}>{item.title}</h3>
                <p style={{ color: t.textMuted, lineHeight: '1.6' }}>{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Curriculum */}
      <section style={{ borderTop: `1px solid ${t.border}`, padding: '80px 0', backgroundColor: t.bg }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '0 24px' }}>
          <div style={{ marginBottom: '48px' }}>
            <span style={{ color: t.accent, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
              12-Month Curriculum
            </span>
            <h2 style={{ fontSize: '32px', fontWeight: '300', marginTop: '12px', color: t.text }}>
              What the program covers
            </h2>
          </div>

          {/* Quarter Tabs */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '40px' }}>
            {quarters.map(q => (
              <button
                key={q.id}
                onClick={() => setActiveQ(q.id)}
                style={{ 
                  padding: '12px 20px',
                  borderRadius: '8px',
                  fontSize: '14px',
                  fontWeight: '500',
                  cursor: 'pointer',
                  transition: 'all 0.2s',
                  backgroundColor: activeQ === q.id ? t.accentBgStrong : t.cardBg,
                  color: activeQ === q.id ? t.accent : t.textMuted,
                  border: activeQ === q.id ? `1px solid ${t.accentBorder}` : '1px solid transparent'
                }}
              >
                {q.label.split(':')[0]}
              </button>
            ))}
          </div>

          {/* Active Quarter Content */}
          {quarters.filter(q => q.id === activeQ).map(quarter => (
            <div key={quarter.id}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '32px' }}>
                <div style={{ color: t.accent }}>{quarter.icon}</div>
                <div>
                  <span style={{ color: t.accentMuted, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                    {quarter.label}
                  </span>
                  <h3 style={{ fontSize: '24px', fontWeight: '300', color: t.text }}>{quarter.title}</h3>
                </div>
              </div>
              
              <div style={{ display: 'grid', gap: '16px' }}>
                {quarter.months.map((m, i) => (
                  <div 
                    key={i}
                    style={{ 
                      backgroundColor: 'transparent',
                      border: `1px solid ${t.cardBorder}`,
                      borderRadius: '12px',
                      padding: '24px',
                      transition: 'all 0.3s ease',
                      cursor: 'default'
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.borderColor = t.accent;
                      e.currentTarget.style.boxShadow = `0 0 20px ${t.glow}`;
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.borderColor = t.cardBorder;
                      e.currentTarget.style.boxShadow = 'none';
                    }}
                  >
                    <span style={{ color: t.accentFaint, fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                      {m.month}
                    </span>
                    <h4 style={{ fontSize: '20px', fontWeight: '500', marginTop: '8px', marginBottom: '12px', color: t.text }}>
                      {m.title}
                    </h4>
                    <p style={{ color: t.textMuted, lineHeight: '1.5' }}>{m.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        <p style={{ color: t.textFaint, fontSize: '13px', marginTop: '32px', fontStyle: 'italic' }}>
            Topics reflect our current plan. AI moves fast—we'll adjust sessions as the landscape evolves to keep content relevant and practical.
          </p>
        </div>
      </section>

      {/* Toolkits */}
      <section style={{ borderTop: `1px solid ${t.border}`, backgroundColor: t.bgAlt, padding: '80px 0' }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '0 24px' }}>
          <div style={{ marginBottom: '48px' }}>
            <span style={{ color: t.accent, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
              Monthly Deliverables
            </span>
            <h2 style={{ fontSize: '32px', fontWeight: '300', marginTop: '12px', color: t.text }}>
              Take-home toolkits
            </h2>
            <p style={{ color: t.textMuted, marginTop: '16px', maxWidth: '600px' }}>
              One tool per month. Keep it. Use it with your teams, stakeholders, or clients.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '24px' }}>
            {[
              { cat: 'Assessment', items: ['AI Maturity Assessment', 'AI Readiness Assessment'] },
              { cat: 'Operating & Change', items: ['Change management kit', 'Operating standards templates'] },
              { cat: 'Vendor & Risk', items: ['Vendor contract reading guide', 'Risk review checklist'] }
            ].map((tool, i) => (
              <div key={i} style={{ 
                backgroundColor: 'transparent',
                border: `1px solid ${t.cardBorder}`,
                borderRadius: '12px',
                padding: '24px',
                transition: 'all 0.3s ease'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = t.accent;
                e.currentTarget.style.boxShadow = `0 0 20px ${t.glow}`;
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = t.cardBorder;
                e.currentTarget.style.boxShadow = 'none';
              }}>
                <h4 style={{ color: t.accent, fontWeight: '500', marginBottom: '16px' }}>{tool.cat}</h4>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                  {tool.items.map((item, j) => (
                    <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', color: t.textMuted }}>
                      <div style={{ width: '6px', height: '6px', backgroundColor: t.accentFaint, borderRadius: '50%', marginTop: '8px', flexShrink: 0 }}/>
                      {item}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Who It's For */}
      <section style={{ borderTop: `1px solid ${t.border}`, padding: '80px 0', backgroundColor: t.bg }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '0 24px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '48px', alignItems: 'start' }}>
            <div>
              <span style={{ color: t.accent, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                Good Fit
              </span>
              <h2 style={{ fontSize: '28px', fontWeight: '300', marginTop: '12px', marginBottom: '32px', color: t.text }}>
                Who this is for
              </h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                {[
                  'Stepping into AI leadership responsibilities',
                  'Managing teams, programs, vendors, or stakeholders around AI decisions',
                  'Want repeatable standards you can apply in real situations',
                  'Value practical tools you can deploy immediately'
                ].map((item, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: '16px' }}>
                    <div style={{ 
                      width: '24px', 
                      height: '24px', 
                      borderRadius: '4px',
                      border: `1px solid ${t.accentBorder}`,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      flexShrink: 0,
                      marginTop: '2px'
                    }}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={t.accent} strokeWidth="2">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/>
                      </svg>
                    </div>
                    <span style={{ color: t.textMuted }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>
            
            <div style={{ 
              backgroundColor: 'transparent',
              border: `1px solid ${t.accentBorder}`,
              borderRadius: '16px',
              padding: '32px',
              transition: 'all 0.3s ease'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = t.accent;
              e.currentTarget.style.boxShadow = `0 0 25px ${t.glow}`;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = t.accentBorder;
              e.currentTarget.style.boxShadow = 'none';
            }}>
              <h3 style={{ fontSize: '20px', fontWeight: '500', marginBottom: '24px', color: t.text }}>
                What's included
              </h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', color: t.textMuted }}>
                {[
                  'Monthly in-person session (2 hours) with food',
                  'Monthly toolkit (template, framework, or diagnostic)',
                  'Digital badge for each session (shareable on LinkedIn)',
                  'Slack access during initial build period',
                  'Quarterly case study session'
                ].map((item, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
                    <div style={{ width: '6px', height: '6px', backgroundColor: t.accent, borderRadius: '50%', marginTop: '8px', flexShrink: 0 }}/>
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" style={{ 
        borderTop: `1px solid ${t.border}`, 
        backgroundColor: t.bg,
        padding: '80px 0'
      }}>
        <div style={{ maxWidth: '800px', margin: '0 auto', padding: '0 24px' }}>
          <div style={{ textAlign: 'center', marginBottom: '48px' }}>
            <span style={{ color: t.accent, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
              Membership
            </span>
            <h2 style={{ fontSize: '32px', fontWeight: '300', marginTop: '12px', color: t.text }}>
              Join the program
            </h2>
          </div>

          {/* January Trial Callout */}
          <div style={{
            backgroundColor: 'transparent',
            border: `1px solid ${t.accentBorder}`,
            borderRadius: '12px',
            padding: '24px',
            marginBottom: '32px',
            textAlign: 'center',
            transition: 'all 0.3s ease'
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.borderColor = t.accent;
            e.currentTarget.style.boxShadow = `0 0 20px ${t.glow}`;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.borderColor = t.accentBorder;
            e.currentTarget.style.boxShadow = 'none';
          }}>
            <div style={{ color: t.accent, fontWeight: '600', marginBottom: '8px' }}>January Session — Satisfaction Guaranteed</div>
            <div style={{ color: t.textMuted }}>
              $200 to attend. Not satisfied or not a fit? Tell me before you leave and get a full refund. No-show = no refund. January only.
            </div>
          </div>

          {/* Pricing Cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '24px' }}>
            
            {/* Per Session */}
            <div style={{
              backgroundColor: 'transparent',
              border: `1px solid ${t.cardBorder}`,
              borderRadius: '16px',
              padding: '32px',
              textAlign: 'center',
              transition: 'all 0.3s ease'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = t.accent;
              e.currentTarget.style.boxShadow = `0 0 30px ${t.glow}`;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = t.cardBorder;
              e.currentTarget.style.boxShadow = 'none';
            }}>
              <div style={{ color: t.textMuted, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '16px' }}>
                Per Session
              </div>
              <div style={{ fontSize: '48px', fontWeight: '300', color: t.text, marginBottom: '8px' }}>
                $200<span style={{ fontSize: '18px', color: t.textFaint }}>/session</span>
              </div>
              <div style={{ color: t.textFaint, fontSize: '14px', marginBottom: '24px' }}>
                No commitment — come when it fits
              </div>
              <div style={{ borderTop: `1px solid ${t.border}`, paddingTop: '24px', marginBottom: '24px' }}>
                <div style={{ color: t.textMuted, fontSize: '14px', lineHeight: '1.8' }}>
                  Pay per session<br/>
                  Session toolkit included<br/>
                  Slack access<br/>
                  Food included
                </div>
              </div>
              <button style={{
                width: '100%',
                backgroundColor: 'transparent',
                color: t.accent,
                fontWeight: '500',
                padding: '16px 32px',
                borderRadius: '6px',
                border: `1px solid ${t.accent}`,
                cursor: 'pointer',
                fontSize: '16px'
              }}>
                Register for a Session
              </button>
            </div>

            {/* Annual */}
            <div style={{
              backgroundColor: 'transparent',
              border: `1px solid ${t.accentBorder}`,
              borderRadius: '16px',
              padding: '32px',
              textAlign: 'center',
              position: 'relative',
              transition: 'all 0.3s ease'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = t.accent;
              e.currentTarget.style.boxShadow = `0 0 30px ${t.glow}`;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = t.accentBorder;
              e.currentTarget.style.boxShadow = 'none';
            }}>
              <div style={{
                position: 'absolute',
                top: '-12px',
                left: '50%',
                transform: 'translateX(-50%)',
                backgroundColor: t.accent,
                color: darkMode ? '#000' : '#fff',
                fontSize: '12px',
                fontWeight: '600',
                padding: '4px 12px',
                borderRadius: '12px'
              }}>
                2 MONTHS FREE
              </div>
              <div style={{ color: t.accent, fontSize: '14px', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '16px' }}>
                Annual Access
              </div>
              <div style={{ fontSize: '48px', fontWeight: '300', color: t.text, marginBottom: '8px' }}>
                $2,000<span style={{ fontSize: '18px', color: t.textFaint }}>/yr</span>
              </div>
              <div style={{ color: t.textFaint, fontSize: '14px', marginBottom: '24px' }}>
                Guaranteed seat every month
              </div>
              <div style={{ borderTop: `1px solid ${t.accentBorder}`, paddingTop: '24px', marginBottom: '24px' }}>
                <div style={{ color: t.textMuted, fontSize: '14px', lineHeight: '1.8' }}>
                  Everything in per-session<br/>
                  Seat guaranteed<br/>
                  Priority registration<br/>
                  Pay by Feb 12 to lock in
                </div>
              </div>
              <button style={{
                width: '100%',
                backgroundColor: t.accent,
                color: darkMode ? '#000' : '#fff',
                fontWeight: '500',
                padding: '16px 32px',
                borderRadius: '6px',
                border: 'none',
                cursor: 'pointer',
                fontSize: '16px'
              }}>
                Pay Annually
              </button>
            </div>
          </div>

          <p style={{ color: t.textFainter, fontSize: '14px', marginTop: '32px', textAlign: 'center' }}>
            RTP / Triangle area • Limited to 30 • Food included
          </p>
          
          <div style={{ textAlign: 'center', marginTop: '24px' }}>
            <a 
              href="#" 
              style={{ 
                color: t.accent, 
                fontSize: '14px', 
                textDecoration: 'none',
                display: 'inline-flex',
                alignItems: 'center',
                gap: '8px'
              }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7 10 12 15 17 10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
              </svg>
              Download "Ask Your Employer" Letter (PDF)
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer style={{ borderTop: `1px solid ${t.border}`, padding: '48px 0 32px', backgroundColor: t.bgAlt }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '0 24px' }}>
          
          {/* Footer top - links */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '32px', marginBottom: '48px' }}>
            
            <div>
              <div style={{ color: t.text, fontWeight: '500', marginBottom: '16px', fontSize: '14px' }}>Program</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                <a href="#pricing" style={{ color: t.textMuted, textDecoration: 'none', fontSize: '14px' }}>Pricing</a>
                <a href="#" style={{ color: t.textMuted, textDecoration: 'none', fontSize: '14px' }}>FAQ</a>
                <a href="#" style={{ color: t.textMuted, textDecoration: 'none', fontSize: '14px' }}>Testimonials</a>
              </div>
            </div>
            
            <div>
              <div style={{ color: t.text, fontWeight: '500', marginBottom: '16px', fontSize: '14px' }}>Teams</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                <a href="#" style={{ color: t.textMuted, textDecoration: 'none', fontSize: '14px' }}>Group Discounts</a>
                <a href="#" style={{ color: t.textMuted, textDecoration: 'none', fontSize: '14px' }}>Ask Your Employer (PDF)</a>
              </div>
            </div>
            
            <div>
              <div style={{ color: t.text, fontWeight: '500', marginBottom: '16px', fontSize: '14px' }}>Legal</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                <a href="#" style={{ color: t.textMuted, textDecoration: 'none', fontSize: '14px' }}>Terms of Service</a>
                <a href="#" style={{ color: t.textMuted, textDecoration: 'none', fontSize: '14px' }}>Privacy Policy</a>
              </div>
            </div>
            
            <div>
              <div style={{ color: t.text, fontWeight: '500', marginBottom: '16px', fontSize: '14px' }}>Contact</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                <a href="#" style={{ color: t.textMuted, textDecoration: 'none', fontSize: '14px' }}>Get in Touch</a>
                <a href="#" style={{ color: t.textMuted, textDecoration: 'none', fontSize: '14px' }}>Sponsorship Inquiry</a>
              </div>
            </div>
          </div>
          
          {/* Footer bottom */}
          <div style={{ borderTop: `1px solid ${t.border}`, paddingTop: '24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '16px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: t.textFainter, fontSize: '14px' }}>
              <div style={{ 
                width: '24px', 
                height: '24px', 
                border: `1px solid ${t.textFainter}`, 
                borderRadius: '4px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}>
                <div style={{ width: '8px', height: '8px', backgroundColor: t.textFainter, borderRadius: '2px' }}/>
              </div>
              AI Leadership Studio
            </div>
            <span style={{ color: t.textFainter, fontSize: '13px' }}>© 2025 AI A Innovations. All rights reserved.</span>
          </div>
        </div>
      </footer>
    </div>
  );
}