// Sections3.jsx — Primary offer, secondary offer, final close, footer

function PrimaryOffer({ tweaks, onBook }) {
  const w = useWindowWidth();
  const isMobile = w < 640;
  const items = [
    'A focused review of your current portfolio challenges',
    'Identification of gaps across strategy, planning, and execution',
    'Clear, actionable next steps',
    'A practical path forward — whether you work with us or not',
  ];
  return (
    <Section tone="dark" style={{ padding: isMobile ? '80px 20px' : '140px 32px' }}>
      {/* subtle pattern */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 20% 0%, rgba(118,176,65,.14), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(51,130,176,.14), transparent 55%)',
        pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative' }}>
        <Reveal tweaks={tweaks}>
          <div style={{ textAlign: 'center', maxWidth: 780, margin: '0 auto 56px' }}>
            <Eyebrow color="var(--brand-fern)">Start Here</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)',
              fontSize: 'clamp(32px, 4vw, 52px)',
              lineHeight: 1.08,
              letterSpacing: '-0.02em',
              fontWeight: 700,
              color: '#fff',
              margin: '0 0 14px',
              textWrap: 'balance',
            }}>
              Start with clarity.
            </h2>
            <p style={{
              fontSize: 20,
              color: 'rgba(255,255,255,.7)',
              margin: 0,
              fontWeight: 400,
            }}>
              60-Minute Portfolio Clarity Session
            </p>
          </div>
        </Reveal>
        <Reveal tweaks={tweaks} delay={100}>
          <div style={{
            background: 'rgba(255,255,255,.04)',
            border: '1px solid rgba(255,255,255,.12)',
            borderRadius: 20,
            padding: isMobile ? 24 : 48,
            maxWidth: 760,
            margin: '0 auto',
            backdropFilter: 'blur(10px)',
          }}>
            <div style={{
              fontSize: 12, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'var(--brand-fern)', marginBottom: 20,
            }}>
              What You Get
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 40px', display: 'grid', gap: 14 }}>
              {items.map((it, i) => (
                <li key={i} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 14,
                  fontSize: 17, lineHeight: 1.5, color: 'rgba(255,255,255,.9)',
                }}>
                  <svg width="20" height="20" viewBox="0 0 20 20" style={{ flexShrink: 0, marginTop: 3 }}>
                    <circle cx="10" cy="10" r="9" fill="var(--brand-fern)" opacity=".2"/>
                    <path d="M5.5 10.2 L8.6 13 L14.5 7" stroke="var(--brand-fern)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
            <div style={{ textAlign: 'center' }}>
              <PrimaryButton size="lg" onClick={onBook}>Book Your Session</PrimaryButton>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,.55)', marginTop: 14 }}>
                No obligation. No generic advice.
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function SecondaryOffer({ tweaks }) {
  const w = useWindowWidth();
  const isMobile = w < 640;
  return (
    <Section tone="light" narrow>
      <Reveal tweaks={tweaks}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) auto',
          gap: isMobile ? 24 : 48,
          alignItems: 'center',
          padding: isMobile ? '28px 24px' : '44px 48px',
          background: '#fff',
          border: '1px solid rgba(27,38,79,.1)',
          borderRadius: 18,
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 2 }}>
              <Eyebrow color="var(--brand-ocean)">PPM4Agile Course</Eyebrow>
              <img
                src="assets/ppm4agile-icon.png"
                alt="PPM4Agile"
                style={{
                  height: 40,
                  width: 40,
                  borderRadius: 8,
                  display: 'block',
                  marginTop: -18,
                }}
              />
            </div>
            <h3 style={{
              fontFamily: 'var(--font-heading)',
              fontSize: 'clamp(22px, 2.4vw, 30px)',
              lineHeight: 1.18,
              letterSpacing: '-0.015em',
              fontWeight: 700,
              color: 'var(--brand-indigo)',
              margin: '0 0 10px',
            }}>
              Prefer to start on your own?
            </h3>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 0 }}>
              The PPM4Agile course gives you a step-by-step system to apply these
              concepts inside your organization.
            </p>
          </div>
          <CourseLinkButton style={isMobile ? { width: 'fit-content' } : {}}/>
        </div>
      </Reveal>
    </Section>
  );
}

function CourseLinkButton({ style }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? 'var(--brand-indigo)' : '#fff',
        color: hover ? '#fff' : 'var(--brand-indigo)',
        border: '1.5px solid var(--brand-indigo)',
        borderRadius: 10,
        padding: '14px 26px',
        fontFamily: 'inherit',
        fontSize: 15,
        fontWeight: 600,
        cursor: 'pointer',
        whiteSpace: 'nowrap',
        transition: 'all .18s',
        ...style,
      }}
    >
      Explore the Course →
    </button>
  );
}

function FinalClose({ tweaks, onBook }) {
  const w = useWindowWidth();
  const isMobile = w < 640;
  return (
    <Section tone="accent" style={{ padding: isMobile ? '64px 20px' : '120px 32px' }}>
      <div style={{ position: 'relative', textAlign: 'center', maxWidth: 860, margin: '0 auto' }}>
        <Reveal tweaks={tweaks}>
          <h2 style={{
            fontFamily: 'var(--font-heading)',
            fontSize: 'clamp(36px, 4.8vw, 64px)',
            lineHeight: 1.06,
            letterSpacing: '-0.025em',
            fontWeight: 700,
            color: '#fff',
            margin: '0 0 36px',
            textWrap: 'balance',
          }}>
            You don't need more projects.<br/>
            You need <em style={{ fontStyle: 'normal', color: 'var(--brand-fern)' }}>better decisions</em>.
          </h2>
        </Reveal>
        <Reveal tweaks={tweaks} delay={120}>
          <PrimaryButton size="lg" onClick={onBook}>Book a 60-Minute Clarity Session</PrimaryButton>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,.65)', marginTop: 16 }}>
            One conversation can change how you operate.
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function Footer() {
  const w = useWindowWidth();
  const isMobile = w < 640;
  return (
    <footer style={{
      background: '#0f1530',
      color: 'rgba(255,255,255,.7)',
      padding: isMobile ? '40px 20px 32px' : '48px 32px 40px',
      borderTop: '1px solid rgba(255,255,255,.06)',
    }}>
      <div style={{
        maxWidth: 1200,
        margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr)',
        gap: isMobile ? 32 : 48,
        alignItems: 'start',
      }}>
        <div>
          <img src="assets/studiobe-logo.png" alt="StudioBE"
               style={{ height: 36, filter: 'brightness(0) invert(1)', marginBottom: 16, opacity: .9 }}/>
          <div style={{ fontSize: 13, lineHeight: 1.5, color: 'rgba(255,255,255,.5)', maxWidth: 320 }}>
            Agile Consulting &amp; Training. A practical operating system for portfolio,
            planning, and delivery.
          </div>
        </div>
        <div>
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,.4)', marginBottom: 14,
          }}>Sitemap</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
            {[
              ['The Problem', '#problem'],
              ['The Shift', '#shift'],
              ['The System (PPM4Agile)', '#system'],
              ['Why StudioBE', '#differentiation'],
              ['Book a Session', '#offer'],
              ['The Course', '#course'],
            ].map(([label, href]) => (
              <li key={label}>
                <a href={href} style={{ color: 'rgba(255,255,255,.7)', textDecoration: 'none', fontSize: 14 }}>
                  {label}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,.4)', marginBottom: 14,
          }}>Contact</div>
          <a href="mailto:hello@studiobeconsulting.com" style={{ color: '#fff', textDecoration: 'none', fontSize: 15, fontWeight: 500 }}>
            hello@studiobeconsulting.com
          </a>
          <div style={{ marginTop: 16 }}>
            <a href="https://scheduler.zoom.us/b-eric-fullerton/" target="_blank" rel="noreferrer"
               style={{ color: 'var(--brand-fern)', textDecoration: 'none', fontSize: 14, fontWeight: 500 }}>
              Book a clarity session →
            </a>
          </div>
        </div>
      </div>
      <div style={{
        maxWidth: 1200, margin: '40px auto 0', paddingTop: 24,
        borderTop: '1px solid rgba(255,255,255,.08)',
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: isMobile ? 'flex-start' : 'space-between',
        alignItems: isMobile ? 'flex-start' : 'center',
        gap: isMobile ? 4 : 0,
        fontSize: 12, color: 'rgba(255,255,255,.4)',
      }}>
        <div>© {new Date().getFullYear()} StudioBE, LLC. All rights reserved.</div>
        <div>Agile Consulting &amp; Training</div>
      </div>
    </footer>
  );
}

window.PrimaryOffer = PrimaryOffer;
window.SecondaryOffer = SecondaryOffer;
window.FinalClose = FinalClose;
window.Footer = Footer;