// Limited to Limitless — Corporate Website Components
// Dark navy theme. Playfair Display headings, Raleway body.
// Corporate palette: #265395 primary, #6AA9CC sky, #E27B2B orange CTA

const { useState, useEffect, useRef } = React;

// ── Image URLs ──────────────────────────────────────────
const LISA_HERO = 'https://static.wixstatic.com/media/e5fbcd_d4c781f718f6438987d0d360ba052635~mv2.jpg/v1/fill/w_600,h_600,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/LIsa%20Head%20shot%20executive%20conference%20room.jpg';
const LISA_ABOUT = 'https://static.wixstatic.com/media/e5fbcd_390ba46ffa6a479798d6badbf8b1500d~mv2.jpg/v1/fill/w_457,h_457,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/47_edited.jpg';
const LOGO = 'assets/logo-badge-primary.png';

// ── Animate on scroll ───────────────────────────────────
function useInView(threshold = 0.15) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } }, { threshold });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, vis];
}

// ── Navbar ──────────────────────────────────────────────
function Navbar({ page, setPage }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  const links = [
    { label: 'Home',       id: 'home' },
    { label: 'About',      id: 'about' },
    { label: 'Services',   id: 'services' },
    { label: 'Community',  id: 'community' },
    { label: 'Events',     id: 'events' },
    { label: 'Blog',       id: 'blog' },
  ];
  return (
    <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
      background: scrolled ? 'rgba(11,26,48,0.92)' : 'rgba(11,26,48,0.55)',
      borderBottom: scrolled ? '1px solid rgba(106,169,204,0.16)' : '1px solid transparent',
      backdropFilter: 'blur(18px)',
      WebkitBackdropFilter: 'blur(18px)',
      transition: 'background 400ms, border-color 400ms' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 76 }}>
        <button onClick={() => setPage('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          <img src={LOGO} alt="LtL" style={{ height: 46, width: 46, objectFit: 'contain' }} onError={e => e.currentTarget.style.display = 'none'} />
          <div style={{ textAlign: 'left', lineHeight: 1.15 }}>
            <div style={{ fontFamily: "'Playfair Display', Georgia, serif", fontSize: '1.05rem', fontWeight: 800, color: '#ECF2FA', letterSpacing: '-0.01em' }}>Limited to <em style={{ color: '#E27B2B', fontWeight: 700 }}>Limitless</em></div>
            <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.62rem', fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6AA9CC' }}>Transformational Consulting</div>
          </div>
        </button>
        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }} className="nav-links">
          {links.map(l => {
            const isActive = page === l.id;
            return (
              <button key={l.id} onClick={() => setPage(l.id)} style={{ background: 'none', border: 'none', borderBottom: isActive ? '2px solid #E27B2B' : '2px solid transparent', padding: '0.5rem 0.875rem', fontFamily: "'Raleway', sans-serif", fontSize: '0.88rem', fontWeight: isActive ? 700 : 500, color: isActive ? '#6AA9CC' : '#B8C5D8', cursor: 'pointer', transition: 'color 150ms, border-color 150ms' }}
                onMouseEnter={e => { if (!isActive) e.currentTarget.style.color = '#F6FFFF'; }}
                onMouseLeave={e => { if (!isActive) e.currentTarget.style.color = '#B8C5D8'; }}>
                {l.label}
              </button>
            );
          })}
          <button onClick={() => setPage('book')} style={{ marginLeft: '0.875rem', background: '#E27B2B', color: '#fff', border: 'none', borderRadius: 8, padding: '0.625rem 1.25rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '0.85rem', cursor: 'pointer', boxShadow: '0 4px 14px rgba(226,123,43,0.3)', whiteSpace: 'nowrap', transition: '180ms' }}
            onMouseEnter={e => { e.currentTarget.style.background = '#F08C3F'; e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 0 28px rgba(226,123,43,0.6)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#E27B2B'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 4px 14px rgba(226,123,43,0.3)'; }}>
            Book Free Session
          </button>
        </div>
        <button onClick={() => setMenuOpen(o => !o)} className="hamburger" style={{ background: 'none', border: '1px solid rgba(106,169,204,0.20)', borderRadius: 6, padding: '0.4rem 0.6rem', color: '#6AA9CC', cursor: 'pointer', fontSize: '1.1rem', display: 'none' }}>☰</button>
      </div>
      {menuOpen && (
        <div style={{ background: '#0F2240', borderTop: '1px solid rgba(106,169,204,0.16)', padding: '0.75rem' }}>
          {links.map(l => (
            <button key={l.id} onClick={() => { setPage(l.id); setMenuOpen(false); }} style={{ display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', padding: '0.75rem 1rem', color: '#F6FFFF', fontSize: '1rem', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>{l.label}</button>
          ))}
          <button onClick={() => { setPage('book'); setMenuOpen(false); }} style={{ display: 'block', width: '100%', textAlign: 'left', background: '#E27B2B', border: 'none', borderRadius: 8, padding: '0.75rem 1rem', color: '#fff', fontSize: '1rem', fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', marginTop: '0.5rem' }}>Book Free Session →</button>
        </div>
      )}
    </nav>
  );
}

// ── Hero ────────────────────────────────────────────────
function Hero({ setPage }) {
  return (
    <section style={{ minHeight: '92vh', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden', paddingTop: 76,
      background: `radial-gradient(ellipse at 50% 0%, rgba(38,83,149,0.45) 0%, transparent 55%), linear-gradient(180deg, #0B1A30 0%, #142540 100%)` }}>
      <div style={{ position: 'absolute', right: '-100px', top: '-60px', width: 540, height: 540, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(38,83,149,0.20) 0%, transparent 70%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', left: '-60px', bottom: '-40px', width: 380, height: 380, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(226,123,43,0.10) 0%, transparent 70%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', left: '35%', top: '25%', width: 320, height: 320, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(106,169,204,0.08) 0%, transparent 70%)', filter: 'blur(40px)', pointerEvents: 'none' }} />

      <div className="hero-grid" style={{ maxWidth: 1200, margin: '0 auto', padding: '5rem 1.5rem 4rem', position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: '3rem', alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6AA9CC', marginBottom: '1.25rem', padding: '0.4rem 0.875rem', background: 'rgba(38,83,149,0.18)', borderRadius: 999, border: '1px solid rgba(106,169,204,0.30)' }}>
            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#E27B2B', flexShrink: 0 }} />
            Executive Coaching &amp; Consulting
          </div>
          <h1 style={{ fontFamily: "'Playfair Display', Georgia, serif", fontSize: 'clamp(2.5rem, 5.5vw, 4.5rem)', fontWeight: 800, lineHeight: 1.05, marginBottom: '1.5rem', color: '#F6FFFF', letterSpacing: '-0.015em' }}>
            Your Business Should Work{' '}
            <em style={{ color: '#6AA9CC', fontWeight: 800 }}>Without</em>{' '}
            You Running It.
          </h1>
          <p style={{ fontFamily: "'Raleway', sans-serif", fontSize: 'clamp(1rem, 1.5vw, 1.15rem)', color: '#B8C5D8', lineHeight: 1.75, marginBottom: '2.25rem', maxWidth: 520 }}>
            Many entrepreneurs feel stuck, burned out, and unable to scale. We install the operating structure, leadership clarity, and growth systems that change that — in 12 months or less.
          </p>
          <div style={{ display: 'flex', gap: '0.875rem', flexWrap: 'wrap', marginBottom: '2.75rem' }}>
            <button onClick={() => setPage('book')} style={{ background: '#E27B2B', color: '#fff', border: 'none', borderRadius: 8, padding: '0.95rem 2.125rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '1rem', cursor: 'pointer', boxShadow: '0 0 28px rgba(226,123,43,0.45)', transition: '180ms' }}
              onMouseEnter={e => { e.currentTarget.style.background = '#F08C3F'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 0 48px rgba(226,123,43,0.75)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#E27B2B'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 0 28px rgba(226,123,43,0.45)'; }}>
              Book My FREE Session →
            </button>
            <button onClick={() => setPage('services')} style={{ background: 'transparent', color: '#6AA9CC', border: '2px solid rgba(106,169,204,0.55)', borderRadius: 8, padding: '0.95rem 1.875rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '1rem', cursor: 'pointer', transition: '180ms' }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(106,169,204,0.12)'; e.currentTarget.style.borderColor = '#6AA9CC'; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(106,169,204,0.55)'; e.currentTarget.style.color = '#6AA9CC'; }}>
              See How It Works
            </button>
          </div>
          <div style={{ display: 'flex', gap: '2.25rem', flexWrap: 'wrap' }}>
            {[['33–150%', 'Revenue growth in 12 mo.'], ['35+', 'Years coaching'], ['20+', 'Years exec leadership']].map(([n, l]) => (
              <div key={n}>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: '2.1rem', fontWeight: 900, color: '#6AA9CC', lineHeight: 1 }}>{n}</div>
                <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.72rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#768C92', marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="hero-image" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div style={{ position: 'relative', width: 'min(440px, 100%)' }}>
            <div style={{ position: 'absolute', inset: -16, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(106,169,204,0.18) 0%, rgba(38,83,149,0.04) 50%, transparent 75%)' }} />
            <img src={LISA_HERO} alt="Lisa Murphy, MBA" style={{ width: '100%', borderRadius: 18, border: '2px solid rgba(106,169,204,0.4)', boxShadow: '0 0 60px rgba(38,83,149,0.4), 0 24px 60px rgba(0,0,0,0.55)', objectFit: 'cover', aspectRatio: '4/5', display: 'block', position: 'relative' }} onError={e => { e.currentTarget.style.display = 'none'; }} />
            <div style={{ position: 'absolute', bottom: -20, left: '50%', transform: 'translateX(-50%)', background: '#15273F', border: '1px solid rgba(106,169,204,0.20)', borderRadius: 12, padding: '0.875rem 1.5rem', whiteSpace: 'nowrap', boxShadow: '0 12px 28px rgba(0,0,0,0.45)' }}>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: '1.05rem', fontWeight: 800, color: '#6AA9CC' }}>Lisa Murphy, MBA</div>
              <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', color: '#768C92', marginTop: 2 }}>Executive Coach · Fractional Leader · Founder</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Featured In Strip ────────────────────────────────────
function FeaturedIn() {
  return (
    <section style={{ borderTop: '1px solid rgba(106,169,204,0.14)', borderBottom: '1px solid rgba(106,169,204,0.14)', padding: '1.75rem 0', background: 'rgba(38,83,149,0.05)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem', display: 'flex', alignItems: 'center', gap: '2.5rem', flexWrap: 'wrap', justifyContent: 'center' }}>
        <span style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#768C92' }}>As Seen In</span>
        {['AI Journal', 'Substack', 'Alignable', 'Gainesville Sun', 'CIED GNV'].map(name => (
          <div key={name} style={{ fontFamily: "'Playfair Display', serif", fontSize: '0.92rem', fontWeight: 700, color: 'rgba(184,197,216,0.55)', letterSpacing: '0.02em', padding: '0 1rem', borderLeft: '1px solid rgba(106,169,204,0.14)' }}>{name}</div>
        ))}
      </div>
    </section>
  );
}

// ── Pain Points ─────────────────────────────────────────
function PainPoints({ setPage }) {
  const [ref, vis] = useInView();
  const pains = [
    { n: '01', title: 'Overwhelmed with Leadership', body: 'Managing too many aspects of your business? Drowning in decisions that shouldn\'t need you? Your business is running you — not the other way around.' },
    { n: '02', title: 'Stagnant Revenue', body: 'Working harder than ever but not scaling? Your team is stuck in a comfort zone and your revenue ceiling feels impossible to break through.' },
    { n: '03', title: 'Inefficient Operations', body: 'Processes that eat time instead of creating it. Teams that wait for your direction. Systems built for a smaller business — never upgraded.' },
  ];
  return (
    <section ref={ref} style={{ padding: '5rem 0', background: '#060A16', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 600, height: 300, background: 'radial-gradient(ellipse at 50% 0%, rgba(38,83,149,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem' }}>
        <div style={{ textAlign: 'center', marginBottom: '3.25rem', opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(16px)', transition: 'all 600ms ease-out' }}>
          <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E27B2B', marginBottom: '0.75rem' }}>Sound Familiar?</div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 800, color: '#F6FFFF', marginBottom: '0.75rem', letterSpacing: '-0.015em' }}>
            These Challenges Are <em style={{ color: '#6AA9CC' }}>Fixable.</em>
          </h2>
          <p style={{ fontFamily: "'Raleway', sans-serif", color: '#768C92', maxWidth: 520, margin: '0 auto', lineHeight: 1.75 }}>Every one of these is a system problem — not a you problem. And every system problem has a structured solution.</p>
        </div>
        <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.5rem' }}>
          {pains.map((p, i) => (
            <div key={p.n} style={{ background: 'linear-gradient(160deg, #0F1A2E 0%, #0A1124 100%)', borderRadius: 16, padding: '2rem', border: '1px solid rgba(106,169,204,0.14)', boxShadow: '0 4px 28px rgba(0,0,0,0.45)', opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(24px)', transition: `all 600ms ease-out ${i * 120}ms` }}>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: '3rem', fontWeight: 900, color: 'rgba(106,169,204,0.18)', lineHeight: 1, marginBottom: '0.875rem', letterSpacing: '-0.02em' }}>{p.n}</div>
              <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: '1.35rem', fontWeight: 800, color: '#F6FFFF', marginBottom: '0.75rem', letterSpacing: '-0.01em' }}>{p.title}</h3>
              <p style={{ fontFamily: "'Raleway', sans-serif", color: '#B8C5D8', fontSize: '0.92rem', lineHeight: 1.7 }}>{p.body}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: '2.5rem', opacity: vis ? 1 : 0, transition: 'all 600ms ease-out 400ms' }}>
          <button onClick={() => setPage('book')} style={{ background: '#E27B2B', color: '#fff', border: 'none', borderRadius: 8, padding: '0.95rem 2.125rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '1rem', cursor: 'pointer', boxShadow: '0 0 28px rgba(226,123,43,0.45)', transition: '180ms' }}
            onMouseEnter={e => { e.currentTarget.style.background = '#F08C3F'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 0 48px rgba(226,123,43,0.75)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#E27B2B'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 0 28px rgba(226,123,43,0.45)'; }}>
            Let's Fix the Root Cause →
          </button>
        </div>
      </div>
    </section>
  );
}

// ── About ───────────────────────────────────────────────
function About({ setPage }) {
  const [ref, vis] = useInView();
  return (
    <section ref={ref} style={{ padding: '5rem 0', background: '#0A1124' }}>
      <div className="two-col" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4rem', alignItems: 'center' }}>
        <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateX(-24px)', transition: 'all 700ms ease-out' }}>
          <div style={{ position: 'relative', display: 'inline-block', maxWidth: 460 }}>
            <img src={LISA_ABOUT} alt="Lisa Murphy" style={{ width: '100%', borderRadius: 18, border: '2px solid rgba(106,169,204,0.3)', boxShadow: '0 0 60px rgba(38,83,149,0.25), 0 18px 50px rgba(0,0,0,0.55)', objectFit: 'cover', display: 'block' }} onError={e => e.currentTarget.style.display = 'none'} />
            <div style={{ position: 'absolute', top: 24, right: -22, background: '#0B1A30', border: '1px solid rgba(106,169,204,0.18)', borderRadius: 10, padding: '0.875rem 1.25rem', boxShadow: '0 12px 28px rgba(0,0,0,0.45)' }}>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: '1.75rem', fontWeight: 900, color: '#E27B2B', lineHeight: 1 }}>20+</div>
              <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.66rem', fontWeight: 700, color: '#768C92', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 3 }}>Yrs Exec Leadership</div>
            </div>
          </div>
        </div>
        <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateX(24px)', transition: 'all 700ms ease-out 200ms' }}>
          <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E27B2B', marginBottom: '0.75rem' }}>The Coach Behind the Method</div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(1.75rem, 3.5vw, 2.75rem)', fontWeight: 800, color: '#F6FFFF', lineHeight: 1.1, marginBottom: '1.25rem', letterSpacing: '-0.015em' }}>
            I've Been Where You Are.<br/>
            <em style={{ color: '#6AA9CC' }}>Here's What Changed.</em>
          </h2>
          <p style={{ fontFamily: "'Raleway', sans-serif", color: '#F6FFFF', lineHeight: 1.8, marginBottom: '1rem', fontSize: '0.95rem' }}>
            I've built and scaled multiple multi-six-figure businesses — but not without the sleepless nights, burnout, and frustration of juggling leadership, growth, and life. I made the mistakes. I learned the lessons. I developed the systems.
          </p>
          <p style={{ fontFamily: "'Raleway', sans-serif", color: '#B8C5D8', lineHeight: 1.8, marginBottom: '1.75rem', fontSize: '0.9rem' }}>
            With 20+ years of executive leadership, 35+ years of coaching, and a background spanning COO roles, insurance, and international competition, I bring a uniquely hands-on, outcome-driven approach — no recycled frameworks, no slide decks. Just structured transformation.
          </p>
          <blockquote style={{ fontFamily: "'Playfair Display', serif", fontStyle: 'italic', fontSize: '1.1rem', color: '#6AA9CC', lineHeight: 1.55, paddingLeft: '1.25rem', borderLeft: '3px solid #E27B2B', marginBottom: '1.75rem', fontWeight: 500 }}>
            "This isn't just about scaling your business. It's about reclaiming your life."
          </blockquote>
          <button onClick={() => setPage('about')} style={{ background: 'transparent', color: '#6AA9CC', border: '2px solid rgba(106,169,204,0.55)', borderRadius: 8, padding: '0.75rem 1.5rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '0.9rem', cursor: 'pointer', transition: '180ms' }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(106,169,204,0.12)'; e.currentTarget.style.borderColor = '#6AA9CC'; e.currentTarget.style.color = '#fff'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(106,169,204,0.55)'; e.currentTarget.style.color = '#6AA9CC'; }}>
            Read Lisa's Full Story →
          </button>
        </div>
      </div>
    </section>
  );
}

// ── Services ────────────────────────────────────────────
function Services({ setPage }) {
  const [ref, vis] = useInView();
  const [active, setActive] = useState(0);
  const services = [
    {
      logo: 'assets/logo-startup-strategies.png',
      tag: 'Executive Coaching',
      name: 'Un-Chain Your Business',
      price: 'From $3,250 / month',
      summary: 'Private 1:1 coaching to break the 3 operational chains holding your business back. Strategy, systems, leadership, and execution — all customized to your situation.',
      outcomes: ['33–150% revenue growth in 12 months', 'Reclaim 10+ hours weekly', 'Aligned, high-performing teams', 'Scalable operating systems'],
      cta: 'Apply for Coaching',
      link: 'https://clarity.video/journey_pages/landing/6c714beb-120a-4767-87bd-47410ac408b7',
    },
    {
      logo: 'assets/logo-startup-strategies.png',
      tag: 'Workshop Series',
      name: 'Revenue Raiser Bootcamp',
      price: 'From $10,000',
      summary: 'A multi-day intensive designed to transform your sales team\'s performance, align strategies with revenue goals, and install systems for consistent, scalable growth.',
      outcomes: ['Custom sales playbooks', 'Real-time hot seat problem solving', '3-month accountability option', 'Guaranteed growth with VIP package'],
      cta: 'Book the Bootcamp',
      link: 'https://mmhub.limitedtolimitless.com/widget/booking/A5Buz53jYY5FLIk80fDE',
    },
    {
      logo: 'assets/logo-monday-mastery-labs.png',
      tag: 'Mastermind Group',
      name: 'Limitless Leadership Collective',
      price: '$500 / month',
      summary: 'A curated small business mastermind — limited to 10 businesses, no industry overlap. Solution-based gatherings, accountability, and peer-powered problem solving.',
      outcomes: ['Monthly 3-hour live workshop', '90-min Q&A/problem-solving session', '90-min hot seats and breakouts', 'Exclusive peer network'],
      cta: 'Apply to Join',
      link: 'https://mmhub.limitedtolimitless.com/widget/booking/A5Buz53jYY5FLIk80fDE',
    },
    {
      logo: 'assets/logo-platinum-qa-workshop.png',
      tag: 'Fractional Services',
      name: 'Fractional COO / CSO',
      price: 'From $50,000 / year',
      summary: 'Lisa embedded in your business as your Fractional COO or CSO — senior-level strategic guidance, operational oversight, and team accountability without the full-time cost.',
      outcomes: ['3+ full-day in-person workshops', 'Monthly strategy meetings', 'Customized templates, SOPs, workbooks', 'Leadership accountability systems'],
      cta: 'Schedule a Consult',
      link: 'https://mmhub.limitedtolimitless.com/widget/booking/A5Buz53jYY5FLIk80fDE',
    },
  ];
  return (
    <section ref={ref} style={{ padding: '5rem 0', background: '#060A16', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', bottom: 0, left: 0, width: 480, height: 480, background: 'radial-gradient(circle, rgba(38,83,149,0.15) 0%, transparent 70%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem', position: 'relative' }}>
        <div style={{ marginBottom: '3rem', opacity: vis ? 1 : 0, transition: 'all 600ms' }}>
          <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E27B2B', marginBottom: '0.625rem' }}>Solutions That Deliver Results</div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 800, color: '#F6FFFF', letterSpacing: '-0.015em' }}>
            Choose Your <em style={{ color: '#6AA9CC' }}>Path to Limitless</em>
          </h2>
        </div>
        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
          {services.map((s, i) => (
            <button key={i} onClick={() => setActive(i)} style={{ background: active === i ? 'rgba(38,83,149,0.45)' : 'rgba(255,255,255,0.04)', border: active === i ? '1px solid rgba(106,169,204,0.55)' : '1px solid rgba(106,169,204,0.14)', borderRadius: 8, padding: '0.6rem 1.125rem', color: active === i ? '#F6FFFF' : '#768C92', fontFamily: "'Raleway', sans-serif", fontWeight: 600, fontSize: '0.82rem', cursor: 'pointer', transition: 'all 200ms' }}>
              {s.tag}
            </button>
          ))}
        </div>
        {services.map((s, i) => i === active && (
          <div key={i} className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '3rem', alignItems: 'start', animation: 'fadeUp 400ms ease-out' }}>
            <div>
              <img src={s.logo} alt={s.name} style={{ height: 76, objectFit: 'contain', marginBottom: '1.5rem', display: 'block', borderRadius: 8 }} onError={e => e.currentTarget.style.display = 'none'} />
              <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#768C92', marginBottom: '0.375rem' }}>{s.tag}</div>
              <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(1.75rem, 3vw, 2.5rem)', fontWeight: 800, color: '#F6FFFF', marginBottom: '0.5rem', letterSpacing: '-0.015em' }}>{s.name}</h3>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: '1.15rem', fontWeight: 700, color: '#E27B2B', marginBottom: '1.25rem' }}>{s.price}</div>
              <p style={{ fontFamily: "'Raleway', sans-serif", color: '#B8C5D8', lineHeight: 1.8, fontSize: '0.95rem', marginBottom: '1.75rem' }}>{s.summary}</p>
              <a href={s.link} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#E27B2B', color: '#fff', border: 'none', borderRadius: 8, padding: '0.875rem 1.875rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '0.95rem', cursor: 'pointer', boxShadow: '0 0 28px rgba(226,123,43,0.45)', textDecoration: 'none', transition: '180ms' }}
                onMouseEnter={e => { e.currentTarget.style.background = '#F08C3F'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 0 48px rgba(226,123,43,0.75)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = '#E27B2B'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 0 28px rgba(226,123,43,0.45)'; }}>
                {s.cta} →
              </a>
            </div>
            <div style={{ background: 'linear-gradient(160deg, #0F1A2E 0%, #0A1124 100%)', borderRadius: 16, padding: '2rem', border: '1px solid rgba(106,169,204,0.14)', boxShadow: '0 4px 28px rgba(0,0,0,0.45)' }}>
              <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#6AA9CC', marginBottom: '1.25rem' }}>What You Get</div>
              <ul style={{ display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
                {s.outcomes.map((o, j) => (
                  <li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.875rem', fontFamily: "'Raleway', sans-serif", color: '#F6FFFF', fontSize: '0.92rem', lineHeight: 1.55 }}>
                    <span style={{ color: '#E27B2B', flexShrink: 0, fontSize: '1.1rem', lineHeight: 1.4 }}>›</span>
                    {o}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
        <div style={{ marginTop: '2.5rem', padding: '1.5rem 1.75rem', background: 'linear-gradient(135deg, rgba(38,83,149,0.15) 0%, rgba(197,176,204,0.08) 100%)', borderRadius: 12, border: '1px solid rgba(197,176,204,0.20)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '1rem' }}>
          <div>
            <div style={{ fontFamily: "'Playfair Display', serif", fontSize: '1.15rem', fontWeight: 800, color: '#F6FFFF' }}>Not sure which is right for you?</div>
            <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.88rem', color: '#768C92', marginTop: 4 }}>Take the free assessment — 10 minutes, immediate insight.</div>
          </div>
          <a href="https://docs.google.com/forms/d/e/1FAIpQLScG2w6KAlO3loRGIhBWRUZidT6Gisr00VDqp7kCp_fF3dyGNw/viewform" target="_blank" rel="noopener noreferrer" style={{ background: 'transparent', color: '#6AA9CC', border: '2px solid rgba(106,169,204,0.55)', borderRadius: 8, padding: '0.75rem 1.5rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '0.9rem', cursor: 'pointer', textDecoration: 'none', transition: '180ms' }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(106,169,204,0.12)'; e.currentTarget.style.borderColor = '#6AA9CC'; e.currentTarget.style.color = '#fff'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(106,169,204,0.55)'; e.currentTarget.style.color = '#6AA9CC'; }}>
            Take the Free Assessment
          </a>
        </div>
      </div>
    </section>
  );
}

// ── How It Works ─────────────────────────────────────────
function HowItWorks({ setPage }) {
  const [ref, vis] = useInView();
  const steps = [
    { n: '1', title: 'Book Your Solutions Session', body: 'A free 60-minute diagnostic. We identify the exact bottleneck — whether it\'s systems, leadership, revenue, or operations.' },
    { n: '2', title: 'Design Your Custom Strategy', body: 'Together we map the operating structure, growth plan, and transformation path that fits your specific business and goals.' },
    { n: '3', title: 'Implement & Scale', body: 'We install the systems, align the team, and track the outcomes. 33–150% growth in 12 months — with your freedom intact.' },
  ];
  return (
    <section ref={ref} style={{ padding: '5rem 0', background: '#0A1124' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem' }}>
        <div style={{ textAlign: 'center', marginBottom: '3.25rem', opacity: vis ? 1 : 0, transition: 'all 600ms' }}>
          <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E27B2B', marginBottom: '0.625rem' }}>The Process</div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 800, color: '#F6FFFF', letterSpacing: '-0.015em' }}>
            How We Go From <em style={{ color: '#6AA9CC' }}>Stuck to Scaled</em>
          </h2>
        </div>
        <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.5rem' }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{ textAlign: 'center', padding: '2.25rem 1.5rem', background: '#0B1A30', borderRadius: 16, border: '1px solid rgba(106,169,204,0.12)', boxShadow: '0 4px 28px rgba(0,0,0,0.45)', opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(20px)', transition: `all 600ms ease-out ${i * 130}ms` }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'linear-gradient(135deg, #2566A3, #6AA9CC)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 1.25rem', fontFamily: "'Playfair Display', serif", fontSize: '1.5rem', fontWeight: 900, color: '#fff', boxShadow: '0 8px 20px rgba(38,83,149,0.4)' }}>{s.n}</div>
              <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: '1.25rem', fontWeight: 800, color: '#F6FFFF', marginBottom: '0.75rem', lineHeight: 1.2, letterSpacing: '-0.01em' }}>{s.title}</h3>
              <p style={{ fontFamily: "'Raleway', sans-serif", color: '#768C92', fontSize: '0.9rem', lineHeight: 1.75 }}>{s.body}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: '2.5rem', opacity: vis ? 1 : 0, transition: 'all 600ms ease-out 500ms' }}>
          <button onClick={() => setPage('book')} style={{ background: '#E27B2B', color: '#fff', border: 'none', borderRadius: 8, padding: '0.95rem 2.125rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '1rem', cursor: 'pointer', boxShadow: '0 0 28px rgba(226,123,43,0.45)', transition: '180ms' }}
            onMouseEnter={e => { e.currentTarget.style.background = '#F08C3F'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 0 48px rgba(226,123,43,0.75)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#E27B2B'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 0 28px rgba(226,123,43,0.45)'; }}>
            Start Step 1 — Book Your Free Session →
          </button>
        </div>
      </div>
    </section>
  );
}

// ── Community / Programs ─────────────────────────────────
function Community({ setPage }) {
  const [ref, vis] = useInView();
  const programs = [
    { logo: 'assets/logo-focol.png', name: 'FOCoL', sub: "Founder's Operations Council", desc: 'A structured peer community for operators serious about scaling — not just talking about it. Accountability-driven. No cheerleaders.', accent: '#6AA9CC' },
    { logo: 'assets/logo-first-friday-fast-pitch.png', name: 'First Friday Fast Pitch', sub: 'Monthly Pitch Event', desc: 'Practice your pitch. Get real feedback. Build your network with operators and investors who show up to participate.', accent: '#E27B2B' },
    { logo: 'assets/logo-monday-mastery-labs.png', name: 'Monday Mastery Labs', sub: 'Weekly Sessions', desc: 'Weekly structured sessions covering the operating skills that compound. Systems, leadership, sales, and strategy.', accent: '#6AA9CC' },
    { logo: 'assets/logo-bbl-summit.png', name: 'BBL Summit', sub: 'Annual Flagship Event', desc: 'Business Built Limitless — the 2-day virtual intensive where operators install the systems that scale businesses.', cta: 'Next Event: 2026 →', accent: '#E27B2B' },
  ];
  return (
    <section ref={ref} style={{ padding: '5rem 0', background: '#060A16', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)', width: 480, height: 480, background: 'radial-gradient(circle, rgba(38,83,149,0.12) 0%, transparent 70%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem', position: 'relative' }}>
        <div style={{ marginBottom: '3rem', opacity: vis ? 1 : 0, transition: 'all 600ms' }}>
          <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E27B2B', marginBottom: '0.625rem' }}>Community &amp; Events</div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 800, color: '#F6FFFF', letterSpacing: '-0.015em' }}>
            Stop Building <em style={{ color: '#6AA9CC' }}>Alone.</em>
          </h2>
          <p style={{ fontFamily: "'Raleway', sans-serif", color: '#768C92', maxWidth: 540, marginTop: '0.625rem', lineHeight: 1.7 }}>Every LtL community is built around one principle: structured progress over feel-good networking.</p>
        </div>
        <div className="four-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1.25rem' }}>
          {programs.map((p, i) => (
            <div key={i} style={{ background: '#0F1A2E', borderRadius: 16, padding: '1.75rem', border: '1px solid rgba(106,169,204,0.12)', boxShadow: '0 4px 28px rgba(0,0,0,0.45)', display: 'flex', flexDirection: 'column', gap: '0.875rem', opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(20px)', transition: `all 600ms ease-out ${i * 100}ms` }}>
              <img src={p.logo} alt={p.name} style={{ height: 68, width: 68, objectFit: 'contain', alignSelf: 'flex-start', borderRadius: 8 }} onError={e => e.currentTarget.style.display = 'none'} />
              <div>
                <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#768C92', marginBottom: '0.25rem' }}>{p.sub}</div>
                <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: '1.2rem', fontWeight: 800, color: '#F6FFFF', letterSpacing: '-0.01em' }}>{p.name}</h3>
              </div>
              <p style={{ fontFamily: "'Raleway', sans-serif", color: '#768C92', fontSize: '0.875rem', lineHeight: 1.65, flex: 1 }}>{p.desc}</p>
              {p.cta && <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.82rem', fontWeight: 700, color: p.accent, cursor: 'pointer' }}>{p.cta}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Testimonials ─────────────────────────────────────────
function Testimonials() {
  const [ref, vis] = useInView();
  const quotes = [
    { q: "I've gotten so much out of this. She helped me identify the fears holding my business back — and gave me a real roadmap.", name: 'Dela', role: 'Mom-preneur & Workshop Attendee' },
    { q: "This coaching is beneficial for the both of us. We launched our dog training business with confidence and a clear plan.", name: 'Eve', role: 'New Business Owner' },
    { q: "The way you deliver the message is your gift, Lisa. I left that session knowing exactly what I needed to do.", name: 'Pepsi', role: 'Entrepreneur' },
    { q: "That has been very helpful to me. I had been in business for years but couldn't figure out how to scale. Now I know.", name: 'Green Architect', role: 'Business Owner, 10+ years' },
  ];
  return (
    <section ref={ref} style={{ padding: '5rem 0', background: '#0A1124' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem' }}>
        <div style={{ textAlign: 'center', marginBottom: '3rem', opacity: vis ? 1 : 0, transition: 'all 600ms' }}>
          <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E27B2B', marginBottom: '0.625rem' }}>Client Results</div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 800, color: '#F6FFFF', letterSpacing: '-0.015em' }}>
            Hear What Our <em style={{ color: '#6AA9CC' }}>Clients Say</em>
          </h2>
        </div>
        <div className="four-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1.25rem' }}>
          {quotes.map((t, i) => (
            <div key={i} style={{ background: '#0B1A30', borderRadius: 16, padding: '1.875rem', border: '1px solid rgba(106,169,204,0.12)', boxShadow: '0 4px 28px rgba(0,0,0,0.45)', display: 'flex', flexDirection: 'column', gap: '1rem', opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(20px)', transition: `all 600ms ease-out ${i * 110}ms` }}>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: '3rem', color: 'rgba(226,123,43,0.4)', lineHeight: 0.4, marginTop: '0.5rem' }}>"</div>
              <p style={{ fontFamily: "'Playfair Display', serif", fontStyle: 'italic', color: '#F6FFFF', fontSize: '0.95rem', lineHeight: 1.7, flex: 1 }}>{t.q}</p>
              <div style={{ borderTop: '1px solid rgba(106,169,204,0.14)', paddingTop: '0.875rem' }}>
                <div style={{ fontFamily: "'Playfair Display', serif", fontWeight: 700, color: '#6AA9CC', fontSize: '0.95rem' }}>{t.name}</div>
                <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.75rem', color: '#768C92' }}>{t.role}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: '2rem', opacity: vis ? 1 : 0, transition: 'all 600ms ease-out 500ms' }}>
          <a href="https://www.limitedtolimitless.com/blog" target="_blank" rel="noopener noreferrer" style={{ fontFamily: "'Raleway', sans-serif", color: '#E27B2B', fontSize: '0.9rem', fontWeight: 700, textDecoration: 'none', borderBottom: '2px solid #E27B2B', paddingBottom: 3 }}>Watch Video Testimonials →</a>
        </div>
      </div>
    </section>
  );
}

// ── L2L Academy ──────────────────────────────────────────
function L2LMission() {
  const [ref, vis] = useInView();
  return (
    <section ref={ref} style={{ padding: '5rem 0', background: 'linear-gradient(180deg, #060A16 0%, #0D1730 100%)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 400, height: 400, background: 'radial-gradient(circle, rgba(139,26,26,0.08) 0%, transparent 70%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
      <div className="two-col" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '3.5rem', alignItems: 'center', position: 'relative' }}>
        <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(16px)', transition: 'all 600ms' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.625rem', marginBottom: '1.25rem', background: 'rgba(139,26,26,0.15)', padding: '0.5rem 1rem', borderRadius: 999, border: '1px solid rgba(139,26,26,0.25)' }}>
            <span style={{ fontSize: '1.25rem' }}>🎖️</span>
            <span style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#8B1A1A' }}>Serving Those Who Served</span>
          </div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(1.75rem, 3.5vw, 2.75rem)', fontWeight: 800, color: '#F6FFFF', lineHeight: 1.1, marginBottom: '1rem', letterSpacing: '-0.015em' }}>
            L2L Academy at <em style={{ color: '#6AA9CC' }}>Leprechaun Lane</em>
          </h2>
          <p style={{ fontFamily: "'Playfair Display', serif", fontStyle: 'italic', color: '#6AA9CC', fontSize: '1.1rem', lineHeight: 1.55, marginBottom: '1rem', fontWeight: 500 }}>
            "Empowering disabled veterans to rebuild their lives through entrepreneurship, community, and purpose."
          </p>
          <p style={{ fontFamily: "'Raleway', sans-serif", color: '#B8C5D8', lineHeight: 1.75, fontSize: '0.92rem' }}>
            Co-founded by Lisa and John Murphy, L2L Academy serves disabled veterans in Marion County, Florida. 50% of all merchandise sales profits go directly to this mission.
          </p>
        </div>
        <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateX(16px)', transition: 'all 600ms ease-out 200ms' }}>
          <div style={{ background: '#0F1A2E', border: '1px solid rgba(106,169,204,0.16)', borderRadius: 18, padding: '2.25rem', textAlign: 'center', boxShadow: '0 12px 36px rgba(0,0,0,0.55)' }}>
            <p style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#768C92', marginBottom: '0.75rem' }}>Total Raised — BBL Summit 2026</p>
            <p style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(3rem, 7vw, 5rem)', fontWeight: 900, color: '#6AA9CC', lineHeight: 1, letterSpacing: '-0.02em' }}>$3,750</p>
            <p style={{ fontFamily: "'Raleway', sans-serif", color: '#768C92', fontSize: '0.78rem', margin: '0.625rem 0 1.5rem' }}>Marion County, Florida · Disabled Veterans Program</p>
            <a href="https://donate.stripe.com/00wbJ2ch94m1bcc6Zwc7u02" target="_blank" rel="noopener noreferrer" style={{ display: 'block', background: '#E27B2B', color: '#fff', borderRadius: 8, padding: '0.95rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '0.95rem', textDecoration: 'none', textAlign: 'center', boxShadow: '0 0 28px rgba(226,123,43,0.45)', transition: '180ms' }}
              onMouseEnter={e => { e.currentTarget.style.background = '#F08C3F'; e.currentTarget.style.boxShadow = '0 0 48px rgba(226,123,43,0.75)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#E27B2B'; e.currentTarget.style.boxShadow = '0 0 28px rgba(226,123,43,0.45)'; }}>
              🎖️ Donate or Shop to Support
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── AI Coaching CTA ──────────────────────────────────────
function AICoaching() {
  const [ref, vis] = useInView();
  return (
    <section ref={ref} style={{ padding: '4.5rem 0', background: '#0A1124' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', padding: '0 1.5rem', textAlign: 'center', opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(16px)', transition: 'all 600ms' }}>
        <div style={{ background: 'linear-gradient(135deg, rgba(38,83,149,0.25) 0%, rgba(197,176,204,0.10) 100%)', border: '1px solid rgba(106,169,204,0.30)', borderRadius: 20, padding: '3rem 2.5rem' }}>
          <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6AA9CC', marginBottom: '0.75rem' }}>New Feature</div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(1.75rem, 3.5vw, 2.5rem)', fontWeight: 800, color: '#F6FFFF', marginBottom: '0.75rem', letterSpacing: '-0.015em' }}>
            Experience Coaching <em style={{ color: '#6AA9CC' }}>In Your Pocket</em>
          </h2>
          <p style={{ fontFamily: "'Raleway', sans-serif", color: '#B8C5D8', lineHeight: 1.75, maxWidth: 540, margin: '0 auto 1.75rem', fontSize: '0.95rem' }}>
            Get instant access to Lisa's coaching methodology — any time, any device. Our AI coaching experience gives you strategic clarity and actionable guidance 24/7.
          </p>
          <a href="https://www.delphi.ai/limitedtolimitless" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#E27B2B', color: '#fff', border: 'none', borderRadius: 10, padding: '0.95rem 2rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '1rem', cursor: 'pointer', textDecoration: 'none', boxShadow: '0 0 28px rgba(226,123,43,0.45)', transition: '180ms' }}
            onMouseEnter={e => { e.currentTarget.style.background = '#F08C3F'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 0 48px rgba(226,123,43,0.75)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#E27B2B'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 0 28px rgba(226,123,43,0.45)'; }}>
            Try It Now — FREE →
          </a>
        </div>
      </div>
    </section>
  );
}

// ── CTA Banner ────────────────────────────────────────────
function CTABanner({ setPage }) {
  const [ref, vis] = useInView();
  return (
    <section ref={ref} style={{ padding: '5rem 0', background: 'linear-gradient(135deg, #142540 0%, #1d3a6a 100%)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: '-80px', top: '-60px', width: 380, height: 380, borderRadius: '50%', background: 'radial-gradient(circle, rgba(226,123,43,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', left: '-80px', bottom: '-60px', width: 320, height: 320, borderRadius: '50%', background: 'radial-gradient(circle, rgba(106,169,204,0.15) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 740, margin: '0 auto', padding: '0 1.5rem', textAlign: 'center', opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(20px)', transition: 'all 600ms', position: 'relative' }}>
        <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(2rem, 5vw, 3.5rem)', fontWeight: 800, color: '#fff', lineHeight: 1.1, marginBottom: '1.25rem', letterSpacing: '-0.015em' }}>
          Your Transformation <em style={{ color: '#E27B2B', fontWeight: 800 }}>Starts Today.</em>
        </h2>
        <p style={{ fontFamily: "'Raleway', sans-serif", color: 'rgba(255,255,255,0.85)', fontSize: '1.05rem', lineHeight: 1.75, maxWidth: 500, margin: '0 auto 2rem' }}>
          One free session. One honest conversation. One clear path forward. That's all it takes to see what's possible.
        </p>
        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '1.25rem' }}>
          <button onClick={() => setPage('book')} style={{ background: '#E27B2B', color: '#fff', border: 'none', borderRadius: 8, padding: '1rem 2.5rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '1.05rem', cursor: 'pointer', boxShadow: '0 0 28px rgba(226,123,43,0.45)', transition: '180ms' }}
            onMouseEnter={e => { e.currentTarget.style.background = '#F08C3F'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 0 48px rgba(226,123,43,0.75)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#E27B2B'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 0 28px rgba(226,123,43,0.45)'; }}>
            Book My Free Session →
          </button>
          <a href="https://docs.google.com/forms/d/e/1FAIpQLScG2w6KAlO3loRGIhBWRUZidT6Gisr00VDqp7kCp_fF3dyGNw/viewform" target="_blank" rel="noopener noreferrer" style={{ background: 'transparent', color: '#fff', border: '2px solid rgba(255,255,255,0.5)', borderRadius: 8, padding: '1rem 2rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '1rem', cursor: 'pointer', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', transition: '180ms' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.9)'; e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)'; e.currentTarget.style.background = 'transparent'; }}>
            Take the Free Assessment
          </a>
        </div>
        <p style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.8rem', color: 'rgba(255,255,255,0.55)' }}>No pitch. No pressure. Just clarity on what's next.</p>
      </div>
    </section>
  );
}

// ── Footer ────────────────────────────────────────────────
function Footer({ setPage }) {
  return (
    <footer style={{ background: '#060E1E', color: 'rgba(255,255,255,0.78)', padding: '3.5rem 0 2rem', borderTop: '1px solid rgba(106,169,204,0.12)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1.5rem' }}>
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: '2.5rem', marginBottom: '3rem' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: '1rem' }}>
              <img src={LOGO} alt="LtL" style={{ height: 44, width: 44, objectFit: 'contain' }} onError={e => e.currentTarget.style.display = 'none'} />
              <div style={{ fontFamily: "'Playfair Display', serif", lineHeight: 1.15 }}>
                <div style={{ fontSize: '1.05rem', fontWeight: 800, color: '#ECF2FA', letterSpacing: '-0.01em' }}>Limited to <em style={{ color: '#E27B2B', fontWeight: 700 }}>Limitless</em></div>
                <div style={{ fontSize: '0.62rem', fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Transformational Consulting</div>
              </div>
            </div>
            <p style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.85rem', color: 'rgba(255,255,255,0.55)', lineHeight: 1.7, maxWidth: 300 }}>We install the systems. You reclaim the freedom. Transformational business consulting and executive coaching.</p>
            <div style={{ marginTop: '1.25rem', fontFamily: "'Raleway', sans-serif", fontSize: '0.8rem', color: 'rgba(255,255,255,0.45)', lineHeight: 1.8 }}>
              <div>Limitless@limitedtolimitless.com</div>
              <div>+1 (814) 933-LLTC (5582)</div>
              <div>www.LimitedtoLimitless.com</div>
            </div>
          </div>
          {[
            { title: 'Programs', links: [['Executive Coaching', 'services'], ['Revenue Raiser Bootcamp', 'services'], ['Leadership Collective', 'services'], ['Fractional COO/CSO', 'services']] },
            { title: 'Community', links: [['FOCoL', 'community'], ['First Friday Fast Pitch', 'community'], ['Monday Mastery Labs', 'community'], ['BBL Summit', 'events']] },
            { title: 'Company', links: [['About Lisa', 'about'], ['L2L Academy', 'l2l'], ['Blog & Vlog', 'blog'], ['Book a Session', 'book']] },
          ].map(col => (
            <div key={col.title}>
              <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: '1rem' }}>{col.title}</div>
              {col.links.map(([label, id]) => (
                <button key={label} onClick={() => setPage(id)} style={{ display: 'block', background: 'none', border: 'none', padding: '0.35rem 0', fontFamily: "'Raleway', sans-serif", fontSize: '0.85rem', color: 'rgba(255,255,255,0.55)', cursor: 'pointer', textAlign: 'left', transition: 'color 150ms' }}
                  onMouseEnter={e => e.target.style.color = '#E27B2B'} onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.55)'}>
                  {label}
                </button>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: '1.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem' }}>
          <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.75rem', color: 'rgba(255,255,255,0.35)' }}>© 2026 Limited To Limitless. All rights reserved.</div>
          <div style={{ fontFamily: "'Raleway', sans-serif", fontSize: '0.75rem', color: 'rgba(255,255,255,0.35)' }}>50% of merchandise profits support <span style={{ color: '#E27B2B', fontWeight: 600 }}>L2L Academy at Leprechaun Lane</span></div>
        </div>
      </div>
    </footer>
  );
}

// ── Floating CTA ─────────────────────────────────────────
function FloatingCTA({ setPage }) {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const fn = () => setShow(window.scrollY > 600);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return show ? (
    <button onClick={() => setPage('book')} style={{ position: 'fixed', bottom: '1.75rem', right: '1.75rem', zIndex: 300, background: '#E27B2B', color: '#fff', border: 'none', borderRadius: 999, padding: '0.95rem 1.75rem', fontFamily: "'Raleway', sans-serif", fontWeight: 700, fontSize: '0.92rem', cursor: 'pointer', boxShadow: '0 0 32px rgba(226,123,43,0.55)', animation: 'fadeUp 400ms ease-out', whiteSpace: 'nowrap', transition: '180ms' }}
      onMouseEnter={e => { e.currentTarget.style.background = '#F08C3F'; e.currentTarget.style.boxShadow = '0 0 48px rgba(226,123,43,0.75)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={e => { e.currentTarget.style.background = '#E27B2B'; e.currentTarget.style.boxShadow = '0 0 32px rgba(226,123,43,0.55)'; e.currentTarget.style.transform = 'none'; }}>
      Book Free Session →
    </button>
  ) : null;
}

// Export to window so index.html can use them
Object.assign(window, {
  Navbar, Hero, FeaturedIn, PainPoints, About, Services,
  HowItWorks, Community, Testimonials, L2LMission,
  AICoaching, CTABanner, Footer, FloatingCTA
});
