/* OnSumn v2 — Glass CTA, Featured, Footer */

function CTASection({ darkMode, radius }) {
  return (
    <section style={{
      padding: '100px 32px', textAlign: 'center', position: 'relative', overflow: 'hidden',
      background: darkMode
        ? 'radial-gradient(ellipse at 50% 50%, rgba(255,79,0,0.06) 0%, transparent 60%), var(--surface-dim)'
        : 'radial-gradient(ellipse at 50% 50%, rgba(255,79,0,0.04) 0%, transparent 60%), #F0F0F0',
    }}>
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 600, margin: '0 auto' }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 5vw, 48px)',
          fontWeight: 700, color: darkMode ? 'var(--on-surface)' : '#1a1a1a',
          marginBottom: 16, lineHeight: 1.1,
        }}>
          You OnSumn?{' '}
          <span style={{
            fontStyle: 'italic', color: 'var(--international-orange)',
            textShadow: darkMode ? '0 0 30px rgba(255,79,0,0.25)' : 'none',
          }}>Post It.</span>
        </h2>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: '26px',
          color: darkMode ? 'rgba(255,255,255,0.45)' : '#666',
          maxWidth: 480, margin: '0 auto 36px',
        }}>
          Got a pop-up, show, gallery, card show, or party worth pulling up to? Put the Bay on. Join the network of local creators shaping the culture.
        </p>
        <button style={{
          background: 'var(--international-orange)', color: '#fff',
          fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 700,
          letterSpacing: '0.03em', padding: '16px 36px',
          border: '1.5px solid var(--international-orange)',
          borderRadius: radius, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 8,
          transition: 'transform 0.2s, box-shadow 0.2s',
        }}
        onMouseEnter={e => { e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.boxShadow='0 12px 32px rgba(255,79,0,0.3)'; }}
        onMouseLeave={e => { e.currentTarget.style.transform='none'; e.currentTarget.style.boxShadow='none'; }}
        ><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>Slide Don't Hide</button>
      </div>
    </section>
  );
}
window.CTASection = CTASection;

function FeaturedSection({ darkMode, radius }) {
  const [hov, setHov] = React.useState(false);
  return (
    <section style={{ padding: '80px 32px', maxWidth: 1280, margin: '0 auto' }}>
      <div className="featured-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
        ...glassStyle(darkMode, 'panel'),
        border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.06)',
        borderRadius: radius, overflow: 'hidden',
      }}>
        {/* Text */}
        <div style={{ padding: '48px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{
            display: 'inline-block', background: 'var(--international-orange)', color: '#fff',
            fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 700,
            letterSpacing: '0.1em', textTransform: 'uppercase',
            padding: '5px 12px', marginBottom: 20, alignSelf: 'flex-start',
            borderRadius: 100,
          }}>FEATURED</div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700,
            fontStyle: 'italic', color: darkMode ? 'var(--on-surface)' : '#1a1a1a',
            marginBottom: 12, lineHeight: 1.2,
          }}>Sponsored Spotlight</h3>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: '22px',
            color: darkMode ? 'rgba(255,255,255,0.45)' : '#777', marginBottom: 28,
          }}>We highlight the movers and shakers keeping the energy high from Oakland to San Jose. Featured local brands and events every week.</p>
          <div style={{ display: 'flex', gap: 10 }}>
            <button
              onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
              style={{
                background: darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.85)',
                color: '#fff',
                fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700,
                letterSpacing: '0.05em', textTransform: 'uppercase',
                padding: '12px 20px', border: 'none', cursor: 'pointer',
                borderRadius: radius,
                ...glassStyle(darkMode, 'btn'),
                transition: 'transform 0.2s, box-shadow 0.2s',
                transform: hov ? 'translateY(-1px)' : 'none',
                boxShadow: hov ? '0 8px 24px rgba(0,0,0,0.2)' : glassStyle(darkMode, 'btn').boxShadow,
              }}>EXPLORE FEATURE</button>
            <button style={{
              background: 'transparent',
              color: darkMode ? 'rgba(255,255,255,0.45)' : '#999',
              fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 500,
              padding: '12px 20px', borderRadius: radius,
              border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.08)',
              cursor: 'pointer',
            }}>LEARN MORE</button>
          </div>
        </div>
        {/* Image */}
        <div style={{
          background: `oklch(${darkMode ? 0.3 : 0.5} 0.06 30)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 300,
        }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(255,255,255,0.35)' }}>Sponsor Image</span>
        </div>
      </div>
    </section>
  );
}
window.FeaturedSection = FeaturedSection;

function Footer({ darkMode, radius }) {
  const textColor = darkMode ? 'var(--on-surface)' : '#1a1a1a';
  const mutedColor = darkMode ? 'rgba(255,255,255,0.3)' : '#999';

  return (
    <footer style={{
      padding: '56px 32px 28px',
      background: darkMode ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.5)',
      borderTop: darkMode ? '1px solid rgba(255,255,255,0.05)' : '1px solid rgba(0,0,0,0.05)',
    }}>
      <div className="footer-grid" style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48,
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 900,
            color: textColor, textTransform: 'uppercase', marginBottom: 12,
          }}>OnSumn</div>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: '20px',
            color: mutedColor, marginBottom: 16,
          }}>Born in the Bay. Built for the Bay. We stay OnSumn.</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: mutedColor }}>
            Oakland · SF · San Jose · Daly City · Vallejo · Richmond
          </div>
        </div>
        {[
          { title: 'EXPLORE', links: ['Oakland', 'San Francisco', 'San Jose', 'The Town'] },
          { title: 'CATEGORIES', links: ['Music', 'Art', 'Food', 'Nightlife'] },
          { title: 'COMPANY', links: ['About', 'Privacy', 'Terms', 'Contact'] },
        ].map(col => (
          <div key={col.title}>
            <div style={{
              fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: mutedColor, marginBottom: 16,
            }}>{col.title}</div>
            {col.links.map(l => (
              <div key={l} style={{
                fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 500,
                color: textColor, padding: '6px 0', cursor: 'pointer', transition: 'color 0.15s',
              }}
              onMouseEnter={e => e.target.style.color = 'var(--international-orange)'}
              onMouseLeave={e => e.target.style.color = textColor}
              >{l}</div>
            ))}
          </div>
        ))}
      </div>
      <div style={{
        maxWidth: 1280, margin: '40px auto 0', paddingTop: 20,
        borderTop: darkMode ? '1px solid rgba(255,255,255,0.05)' : '1px solid rgba(0,0,0,0.05)',
        fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 500,
        letterSpacing: '0.05em', textTransform: 'uppercase', color: mutedColor,
      }}>BORN IN THE BAY. © 2025 ONSUMN</div>
    </footer>
  );
}
window.Footer = Footer;