// Crease marketing website — split into sections, all in one component file
// so each section can share the `audience` state (players ↔ clubs toggle).
// Animations and demo phones reuse the existing motion + mobile components.

const { useState: useWSt, useEffect: useWEff, useRef: useWRef } = React;

const SITE_FONT = "'Inter', system-ui, sans-serif";
const SITE = {
  bg: '#06080F',
  surface: '#0B1220',
  surfaceAlt: '#0F1828',
  border: '#1B2433',
  borderStrong: '#2A3548',
  text: '#FFFFFF',
  textDim: '#94A3B8',
  textMuted: '#64748B',
  accent: '#22C55E',
  accentInk: '#052E16',
  player: '#38BDF8',
  admin: '#F59E0B',
};

// Inject site-only styles (animations + scroll snapping + smooth nav highlight)
if (typeof document !== 'undefined' && !document.getElementById('crease-site')) {
  const s = document.createElement('style');
  s.id = 'crease-site';
  s.textContent = `
@keyframes site-fadeUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform:none; } }
@keyframes site-blink { 50% { opacity: 0; } }
@keyframes site-pop { 0% { transform: scale(0.92); opacity:0; } 100% { transform: scale(1); opacity:1; } }
@keyframes site-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes site-orb-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.1); } }
@keyframes site-orb-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,60px) scale(0.95); } }
.site-card-hover { transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, background .2s; }
.site-card-hover:hover { transform: translateY(-3px); border-color: rgba(34,197,94,0.4); }
.site-link { color: ${SITE.textDim}; text-decoration: none; transition: color .15s; cursor: pointer; }
.site-link:hover { color: ${SITE.text}; }
.site-tabbtn { transition: color .2s, background .2s; cursor: pointer; }
.site-blink { animation: site-blink 1.1s steps(2,start) infinite; }
html { scroll-behavior: smooth; }
@media (max-width:768px){
  .site-nav-links{display:none!important;}
  .site-hero-grid{grid-template-columns:1fr!important;gap:0!important;}
  .site-hero-left{text-align:center!important;}
  .site-hero-phone{display:none!important;}
  .site-hero-cta{justify-content:center!important;}
  .site-hero-trust{justify-content:center!important;flex-wrap:wrap!important;}
  .site-h1{font-size:38px!important;letter-spacing:-1px!important;}
  .site-h2{font-size:28px!important;letter-spacing:-0.4px!important;line-height:1.2!important;}
  .site-final-h2{font-size:34px!important;letter-spacing:-0.8px!important;}
  .site-section-pad{padding:60px 20px!important;}
  .site-2col{grid-template-columns:1fr!important;gap:20px!important;}
  .site-3col{grid-template-columns:1fr!important;gap:16px!important;}
  .site-scoring-grid{grid-template-columns:1fr!important;gap:32px!important;}
  .site-footer-grid{grid-template-columns:1fr 1fr!important;gap:24px!important;}
  .site-footer-brand{grid-column:1/-1!important;}
  .site-cta-btns{flex-wrap:wrap!important;}
  .site-logo-strip{display:none!important;}
  .site-nav-row{padding:14px 20px!important;gap:16px!important;}
}
`;
  document.head.appendChild(s);
}

// ─────────────────────────────────────────────────────────────
// Iconography (reuses existing Icon set; aliases for clarity)
// ─────────────────────────────────────────────────────────────
const SiteIcon = Icon; // shorthand

// ─────────────────────────────────────────────────────────────
// Nav bar — sticky, hides scrolled section context
// ─────────────────────────────────────────────────────────────
const SiteNav = ({ audience, setAudience }) => {
  const [scrolled, setScrolled] = useWSt(false);
  useWEff(() => {
    const handler = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(6,8,15,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: scrolled ? `1px solid ${SITE.border}` : '1px solid transparent',
      transition: 'background .25s, border-color .25s',
    }}>
      <div className="site-nav-row" style={{ maxWidth: 1200, margin: '0 auto', padding: '16px 28px', display: 'flex', alignItems: 'center', gap: 32 }}>
        {/* Brand */}
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <div style={{ position: 'relative', width: 92, height: 28 }}>
            <CreaseLogo height={28} mode="static" />
          </div>
          <div style={{ color: 'white', fontSize: 18, fontWeight: 800, letterSpacing: -0.4 }}>Crease</div>
        </a>

        <div className="site-nav-links" style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          <a href="#features" className="site-link" style={{ fontSize: 14, fontWeight: 500 }}>Features</a>
          <a href="#signature" className="site-link" style={{ fontSize: 14, fontWeight: 500 }}>@crease &amp; reports</a>
          <a href="#pricing" className="site-link" style={{ fontSize: 14, fontWeight: 500 }}>Pricing</a>
          <a href="#faq" className="site-link" style={{ fontSize: 14, fontWeight: 500 }}>FAQ</a>
        </div>

        <div style={{ flex: 1 }} />

        {/* Audience pill — main interactive shaper of the whole site */}
        <AudiencePill audience={audience} setAudience={setAudience} compact />

        <button onClick={() => window.open('https://cricket-5ee0d-admin.web.app', '_blank')} style={{
          background: SITE.accent, color: SITE.accentInk, border: 'none',
          borderRadius: 10, padding: '10px 16px', fontWeight: 700, fontSize: 14,
          fontFamily: SITE_FONT, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          Get Crease <SiteIcon name="arrow" size={14} stroke={2.5} />
        </button>
      </div>
    </div>
  );
};

const AudiencePill = ({ audience, setAudience, compact = false }) => {
  const opts = [
    { id: 'players', label: 'Players', icon: 'users', color: SITE.player },
    { id: 'clubs',   label: 'Clubs',   icon: 'trophy', color: SITE.admin },
  ];
  return (
    <div style={{
      display: 'inline-flex', background: SITE.surface,
      border: `1px solid ${SITE.border}`,
      borderRadius: 999, padding: 4, position: 'relative',
    }}>
      {/* Sliding pill */}
      <div style={{
        position: 'absolute', top: 4, bottom: 4,
        width: `calc(50% - 4px)`,
        left: audience === 'players' ? 4 : 'calc(50% + 0px)',
        background: audience === 'players' ? `rgba(56,189,248,0.18)` : `rgba(245,158,11,0.18)`,
        border: `1px solid ${audience === 'players' ? 'rgba(56,189,248,0.45)' : 'rgba(245,158,11,0.45)'}`,
        borderRadius: 999,
        transition: 'left .35s cubic-bezier(.34,1.3,.64,1), background .25s, border-color .25s',
      }} />
      {opts.map(o => {
        const active = audience === o.id;
        return (
          <div key={o.id} onClick={() => setAudience(o.id)} className="site-tabbtn" style={{
            position: 'relative', zIndex: 1,
            padding: compact ? '6px 14px' : '10px 18px',
            display: 'inline-flex', alignItems: 'center', gap: 6,
            color: active ? o.color : SITE.textDim,
            fontSize: compact ? 13 : 14, fontWeight: 700,
          }}>
            <SiteIcon name={o.icon} size={compact ? 14 : 16} stroke={active ? 2.5 : 2} />
            {o.label}
          </div>
        );
      })}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// HERO — split layout, animated wordmark, live mini-phone, big toggle
// ─────────────────────────────────────────────────────────────
const Hero = ({ audience, setAudience }) => {
  const isPlayers = audience === 'players';
  return (
    <section id="top" className="site-section-pad" style={{ position: 'relative', overflow: 'hidden', padding: '60px 28px 80px' }}>
      {/* Decorative orbs */}
      <div style={{
        position: 'absolute', top: '-120px', left: '-120px', width: 380, height: 380,
        borderRadius: '50%', background: 'radial-gradient(circle, rgba(56,189,248,0.18) 0%, transparent 70%)',
        filter: 'blur(20px)',
        animation: 'site-orb-1 12s ease-in-out infinite',
      }} />
      <div style={{
        position: 'absolute', bottom: '-120px', right: '-120px', width: 460, height: 460,
        borderRadius: '50%', background: 'radial-gradient(circle, rgba(34,197,94,0.18) 0%, transparent 70%)',
        filter: 'blur(20px)',
        animation: 'site-orb-2 14s ease-in-out infinite',
      }} />

      <div className="site-hero-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center', position: 'relative' }}>
        {/* Left — copy */}
        <div>
          {/* Eyebrow */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', background: SITE.surface, border: `1px solid ${SITE.border}`, borderRadius: 999, marginBottom: 24 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: SITE.accent, boxShadow: '0 0 8px rgba(34,197,94,0.6)' }} />
            <span style={{ color: SITE.textDim, fontSize: 12, fontWeight: 600 }}>Now in beta · iOS & Android</span>
          </div>

          {/* Headline — partly audience-switching */}
          <h1 className="site-h1" style={{
            margin: 0, color: 'white', fontSize: 64, fontWeight: 900, lineHeight: 1.04,
            letterSpacing: -2,
          }}>
            The cricket app{' '}
            <span style={{
              background: isPlayers
                ? 'linear-gradient(135deg, #38BDF8, #0EA5E9)'
                : 'linear-gradient(135deg, #F59E0B, #FCD34D)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text',
              color: 'transparent', transition: 'background .4s',
            }}>
              {isPlayers ? 'your team' : 'your club'}
            </span>
            <br />
            actually wants to open.
          </h1>

          <p style={{ color: SITE.textDim, fontSize: 18, lineHeight: 1.6, margin: '24px 0 32px', maxWidth: 540 }}>
            {isPlayers
              ? 'Set your availability in two taps, follow live scores ball by ball, vote for the player of the match. No more WhatsApp threads at 11pm.'
              : 'Run fixtures, training, selection, scoring, and comms from one app. Your committee will thank you. Your captains will love you.'}
          </p>

          {/* CTA row */}
          <div className="site-hero-cta" style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 36 }}>
            <button onClick={() => window.open('https://cricket-5ee0d-admin.web.app', '_blank')} style={{
              background: SITE.accent, color: SITE.accentInk, border: 'none',
              borderRadius: 12, padding: '14px 22px', fontWeight: 800, fontSize: 15,
              fontFamily: SITE_FONT, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              boxShadow: '0 6px 24px rgba(34,197,94,0.28)',
            }}>
              {isPlayers ? 'Get the app' : 'Set up your club'} <SiteIcon name="arrow" size={14} stroke={2.5} />
            </button>
            <button onClick={() => document.getElementById('features').scrollIntoView({ behavior: 'smooth' })} style={{
              background: 'transparent', color: 'white', border: `1px solid ${SITE.border}`,
              borderRadius: 12, padding: '14px 22px', fontWeight: 600, fontSize: 15,
              fontFamily: SITE_FONT, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <SiteIcon name="bat" size={16} /> Watch the 60s tour
            </button>
          </div>

          {/* Trust row */}
          <div className="site-hero-trust" style={{ display: 'flex', gap: 28, color: SITE.textMuted, fontSize: 13 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <SiteIcon name="check" size={14} stroke={3} style={{ color: SITE.accent }} />
              Free for clubs &lt; 25 members
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <SiteIcon name="check" size={14} stroke={3} style={{ color: SITE.accent }} />
              5 min setup
            </div>
          </div>
        </div>

        {/* Right — phone with live interactive demo */}
        <div className="site-hero-phone" style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <div style={{ position: 'relative', filter: 'drop-shadow(0 30px 80px rgba(56,189,248,0.25))' }}>
            <IOSDevice width={320} height={680} dark={true}>
              <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                <LiveMobileDemo platform="ios" />
              </div>
            </IOSDevice>
          </div>
        </div>
      </div>
    </section>
  );
};

// Marquee of (made-up but plausible) club categories
const LogoStrip = () => {
  const items = ['Village leagues', 'School cricket', 'Sunday XIs', 'University clubs', 'Junior coaching', 'Indoor leagues', 'Tape ball', 'Corporate teams'];
  return (
    <div className="site-logo-strip" style={{ marginTop: 80, paddingTop: 32, borderTop: `1px solid ${SITE.border}`, maxWidth: 1200, margin: '80px auto 0' }}>
      <div style={{ textAlign: 'center', color: SITE.textMuted, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 20 }}>
        Built for every kind of cricket
      </div>
      <div style={{ overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, black 12%, black 88%, transparent)' }}>
        <div style={{ display: 'flex', gap: 48, animation: 'site-ticker 30s linear infinite', width: 'max-content' }}>
          {[...items, ...items, ...items].map((it, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, color: SITE.textDim, fontSize: 18, fontWeight: 600, whiteSpace: 'nowrap' }}>
              <SiteIcon name="bat" size={18} style={{ color: SITE.textMuted }} />
              {it}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SiteNav, AudiencePill, Hero, SITE, SITE_FONT });