// home-hero.jsx — Hero, StatsBar, HowItWorks

const Hero = ({ onSearch, setPage, openBecomeInstructor }) => {
  const isMobile = window.useIsMobile();
  const showPublic = window.FEATURES?.publicInstructors;
  const go = (p) => setPage && setPage(p);
  const goTeacherApply  = () => (openBecomeInstructor ? openBecomeInstructor() : go('become-instructor'));
  const goTeacherLogin  = () => { try { window.__BIV2_INITIAL_VIEW = 'login'; } catch (_) {} goTeacherApply(); };
  const [topic, setTopic] = React.useState('');
  const [location, setLocation] = React.useState('');
  const { categories } = window.SITE_DATA;
  const [suggestions, setSuggestions] = React.useState([]);
  const [showDrop,    setShowDrop]    = React.useState(false);
  const allSubjects = React.useMemo(() => categories.flatMap(c => c.subjects || []), []);
  const onTopicChange = v => {
    setTopic(v);
    if (v.trim().length > 0) {
      const f = allSubjects.filter(s => s.toLowerCase().includes(v.toLowerCase())).slice(0, 7);
      setSuggestions(f); setShowDrop(f.length > 0);
    } else { setSuggestions([]); setShowDrop(false); }
  };

  const handleSearch = () => { setShowDrop(false); onSearch({ topic, location }); };

  const heroBg = {
    minHeight: '100vh', display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center',
    position: 'relative',
    background: 'oklch(18% 0.07 265)',
    padding: isMobile ? '90px 18px 60px' : '120px 24px 80px',
  };

  const dotGrid = {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px)',
    backgroundSize: '36px 36px',
  };

  const glow = {
    position: 'absolute', bottom: '0', left: '50%',
    transform: 'translateX(-50%)',
    width: '80vw', height: '40vh',
    background: 'radial-gradient(ellipse, oklch(38% 0.08 265 / 0.6) 0%, transparent 70%)',
    pointerEvents: 'none',
  };

  const inputStyle = {
    flex: 1, border: 'none', outline: 'none', fontSize: 16,
    color: 'oklch(22% 0.06 265)', background: 'transparent',
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    padding: '14px 16px',
  };

  return (
    <section style={heroBg}>
      <div style={dotGrid} />
      <div style={glow} />

      {/* Eyebrow */}
      <div style={{ position: 'relative', zIndex: 2, textAlign: 'center', maxWidth: 760 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: 'rgba(255,255,255,0.08)', borderRadius: 30,
          padding: '6px 18px', marginBottom: 28,
          border: '1px solid rgba(255,255,255,0.14)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'oklch(72% 0.17 80)', display: 'inline-block' }} />
          <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)', fontWeight: 500, letterSpacing: '0.05em' }}>
            2,400+ certified instructors across the United States
          </span>
        </div>

        {/* Headline */}
        <h1 style={{
          fontFamily: "'Cormorant Garamond', serif",
          fontSize: isMobile ? 'clamp(40px, 12vw, 56px)' : 'clamp(52px, 7.5vw, 88px)',
          fontWeight: 600, color: '#fff',
          lineHeight: 1.05, letterSpacing: '-0.02em',
          marginBottom: isMobile ? 16 : 22,
        }}>
          Learn from the<br />
          <em style={{ color: 'oklch(72% 0.17 80)', fontStyle: 'italic' }}>very best.</em>
        </h1>

        <p style={{
          fontSize: isMobile ? 15 : 'clamp(16px, 2vw, 18px)', color: 'rgba(255,255,255,0.65)',
          lineHeight: 1.65, maxWidth: 520, margin: isMobile ? '0 auto 28px' : '0 auto 40px',
          fontWeight: 400,
        }}>
          Private lessons in music, art, sports, dance, and more. Premium instructors near you — in 85% of American cities.
        </p>

        {/* "Who are you?" chooser — the primary hero CTA. Shown in BOTH
            invite-only and public modes: it fills the otherwise-empty
            invite-only hero, and sits above the search in public mode. Each
            card routes new vs returning students/teachers to the right path. */}
        <div style={{
          display:'flex', flexDirection: isMobile ? 'column' : 'row',
          gap: isMobile ? 12 : 16, maxWidth: 620, margin: '0 auto',
          marginBottom: showPublic ? (isMobile ? 22 : 30) : 0,
          position:'relative', zIndex: 3,
        }}>
          {[
            { label:'For students',
              primary:   { t:"I'm a new student",      on:() => go('student-onboarding') },
              secondary: { t:'I already have an account', on:() => go('student-portal') } },
            { label:'For teachers',
              primary:   { t:'Apply to teach',          on:goTeacherApply },
              secondary: { t:"I'm an existing teacher",  on:goTeacherLogin } },
          ].map(card => (
            <div key={card.label} style={{ flex:1, background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.14)', borderRadius:16, padding: isMobile ? '18px 16px' : '22px 20px', textAlign:'left' }}>
              <div style={{ fontSize:12, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'oklch(72% 0.17 80)', marginBottom:14 }}>{card.label}</div>
              <button onClick={card.primary.on} style={{ width:'100%', background:'oklch(72% 0.17 80)', color:'oklch(22% 0.06 265)', border:'none', borderRadius:10, padding:'12px 14px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", marginBottom:10, minHeight:44 }}>{card.primary.t} →</button>
              <button onClick={card.secondary.on} style={{ width:'100%', background:'rgba(255,255,255,0.08)', color:'#fff', border:'1px solid rgba(255,255,255,0.2)', borderRadius:10, padding:'11px 14px', fontWeight:600, fontSize:13.5, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", minHeight:44 }}>{card.secondary.t}</button>
            </div>
          ))}
        </div>

        {/* Search bar — entire block (search + suggestions + category pills)
            is gated on FEATURES.publicInstructors. Hidden in invite-only mode. */}
        {window.FEATURES?.publicInstructors && (<>
        <div style={{ position: 'relative', maxWidth: 680, margin: '0 auto', zIndex: 10 }}>
        <div style={{
          background: '#fff', borderRadius: isMobile ? 14 : 16,
          boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
          display: 'flex', alignItems: 'stretch',
          overflow: 'hidden',
          flexDirection: isMobile ? 'column' : 'row',
        }}>
          {/* Topic input */}
          <div style={{
            flex: 1, display: 'flex', alignItems: 'center',
            borderRight: isMobile ? 'none' : '1px solid oklch(90% 0.01 265)',
            borderBottom: isMobile ? '1px solid oklch(90% 0.01 265)' : 'none',
          }}>
            <svg style={{ width: 18, height: 18, marginLeft: 18, flexShrink: 0, color: 'oklch(72% 0.17 80)' }} viewBox="0 0 20 20" fill="none">
              <circle cx="9" cy="9" r="6.5" stroke="currentColor" strokeWidth="1.8" />
              <path d="M14 14l3.5 3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            </svg>
            <input
              style={inputStyle}
              placeholder="What do you want to learn?"
              value={topic}
              onChange={e => onTopicChange(e.target.value)}
              onFocus={() => { if (suggestions.length > 0) setShowDrop(true); }}
              onBlur={() => setTimeout(() => setShowDrop(false), 160)}
              onKeyDown={e => { if (e.key === 'Enter') { setShowDrop(false); handleSearch(); } if (e.key === 'Escape') setShowDrop(false); }}
            />
          </div>
          {/* Location input */}
          <div style={{
            flex: 1, display: 'flex', alignItems: 'center',
            borderBottom: isMobile ? '1px solid oklch(90% 0.01 265)' : 'none',
          }}>
            <svg style={{ width: 18, height: 18, marginLeft: 18, flexShrink: 0, color: 'oklch(55% 0.03 265)' }} viewBox="0 0 20 20" fill="none">
              <path d="M10 2a6 6 0 0 1 6 6c0 4-6 10-6 10S4 12 4 8a6 6 0 0 1 6-6z" stroke="currentColor" strokeWidth="1.8" />
              <circle cx="10" cy="8" r="2" stroke="currentColor" strokeWidth="1.8" />
            </svg>
            <input
              style={inputStyle}
              placeholder="City or state"
              value={location}
              onChange={e => setLocation(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && handleSearch()}
            />
          </div>
          <button
            onClick={handleSearch}
            style={{
              background: 'oklch(22% 0.06 265)', color: '#fff',
              border: 'none', cursor: 'pointer',
              padding: isMobile ? '14px 0' : '0 32px',
              fontSize: 15, fontWeight: 600,
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              transition: 'background 0.15s',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'oklch(28% 0.07 265)'}
            onMouseLeave={e => e.currentTarget.style.background = 'oklch(22% 0.06 265)'}
          >
            Search
            <svg style={{ width: 16, height: 16 }} viewBox="0 0 20 20" fill="none">
              <path d="M4 10h12M11 5l5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        </div>
        {showDrop && suggestions.length > 0 && (
          <div style={{ position:'absolute', top:'calc(100% + 8px)', left:0, right:0, background:'#fff', borderRadius:12, boxShadow:'0 16px 48px rgba(0,0,0,0.22)', zIndex:200, overflow:'hidden' }}>
            {suggestions.map((s, i) => (
              <div key={i}
                onMouseDown={() => { setTopic(s); setSuggestions([]); setShowDrop(false); }}
                style={{ padding:'12px 18px', fontSize:14, color:'oklch(26% 0.05 265)', cursor:'pointer', borderBottom:i<suggestions.length-1?'1px solid oklch(94% 0.005 60)':'none', display:'flex', alignItems:'center', gap:10, background:'transparent' }}
                onMouseEnter={e => e.currentTarget.style.background='oklch(96.5% 0.01 265)'}
                onMouseLeave={e => e.currentTarget.style.background='transparent'}
              >
                <svg style={{ width:13, height:13, opacity:0.35, flexShrink:0 }} viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="6" stroke="currentColor" strokeWidth="1.8"/><path d="M14 14l3 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
                {s}
              </div>
            ))}
          </div>
        )}
        </div>

        {/* Category pills */}
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginTop: 24 }}>
          {categories.map(cat => (
            <button
              key={cat.id}
              onClick={() => onSearch({ topic: cat.name, location })}
              style={{
                background: 'rgba(255,255,255,0.09)', color: 'rgba(255,255,255,0.78)',
                border: '1px solid rgba(255,255,255,0.16)', borderRadius: 30,
                padding: isMobile ? '12px 18px' : '7px 18px',
                fontSize: 13, fontWeight: 500,
                cursor: 'pointer', transition: 'all 0.18s',
                fontFamily: "'Plus Jakarta Sans', sans-serif",
                minHeight: isMobile ? 44 : 'auto',
              }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.16)'; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.09)'; e.currentTarget.style.color = 'rgba(255,255,255,0.78)'; }}
            >
              {cat.name}
            </button>
          ))}
        </div>

        {/* Social proof strip — instructor faces + student count */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginTop: 28 }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {[
              'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=faces',
              'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=faces',
              'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=faces',
              'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=faces',
            ].map((src, i) => (
              <div key={i} style={{ width: 34, height: 34, borderRadius: '50%', border: '2px solid oklch(22% 0.06 265)', overflow: 'hidden', marginLeft: i > 0 ? -10 : 0, background: 'oklch(55% 0.06 265)' }}>
                <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
              </div>
            ))}
          </div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.72)' }}>
            <strong style={{ color: '#fff', fontWeight: 700 }}>150,000+</strong> students already learning
          </div>
        </div>
        </>)}
      </div>
    </section>
  );
};

// ── Stats Bar ──────────────────────────────────────────────────────────────────
const StatsBar = () => {
  const { stats } = window.SITE_DATA;
  const isMobile = window.useIsMobile();
  return (
    <div style={{
      background: '#fff',
      borderBottom: '1px solid oklch(92% 0.01 265)',
      padding: isMobile ? '0 14px' : '0 80px',
    }}>
      <div style={{
        display: isMobile ? 'grid' : 'flex',
        gridTemplateColumns: isMobile ? '1fr 1fr' : undefined,
        justifyContent: 'center', gap: 0,
      }}>
        {stats.map((s, i) => (
          <div key={i} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            padding: isMobile ? '20px 10px' : '32px 60px',
            borderRight: !isMobile && i < stats.length - 1 ? '1px solid oklch(92% 0.01 265)' : 'none',
            borderBottom: isMobile && i < stats.length - 2 ? '1px solid oklch(94% 0.01 265)' : 'none',
          }}>
            <span style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: isMobile ? 28 : 38, fontWeight: 700, color: 'oklch(22% 0.06 265)',
              lineHeight: 1,
            }}>{s.value}</span>
            <span style={{ fontSize: 12, color: 'oklch(55% 0.03 265)', marginTop: 4, fontWeight: 500, textAlign: 'center' }}>{s.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ── How It Works ───────────────────────────────────────────────────────────────
const HowItWorks = () => {
  const { howItWorks } = window.SITE_DATA;
  const isMobile = window.useIsMobile();
  return (
    <section style={{ background: '#fff', padding: isMobile ? '64px 22px' : '100px 80px' }}>
      <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 64 }}>
        <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', color: 'oklch(72% 0.17 80)', textTransform: 'uppercase', marginBottom: 12 }}>The Process</p>
        <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 'clamp(28px, 8vw, 38px)' : 'clamp(36px, 4vw, 52px)', fontWeight: 600, color: 'oklch(22% 0.06 265)', lineHeight: 1.15 }}>
          From search to first lesson{isMobile ? ' ' : <br />}in minutes
        </h2>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
        gap: isMobile ? 24 : 40,
        maxWidth: 1100, margin: '0 auto', position: 'relative',
      }}>
        {/* Connector line — only on desktop where steps are in one row */}
        {!isMobile && <div style={{ position: 'absolute', top: 28, left: '12%', right: '12%', height: 1, background: 'oklch(90% 0.01 265)', zIndex: 0 }} />}
        {howItWorks.map((step, i) => (
          <div key={i} style={{ textAlign: 'center', position: 'relative', zIndex: 1 }}>
            <div style={{
              width: isMobile ? 44 : 56, height: isMobile ? 44 : 56, borderRadius: '50%',
              background: i === 0 ? 'oklch(22% 0.06 265)' : '#fff',
              border: `2px solid ${i === 0 ? 'oklch(22% 0.06 265)' : 'oklch(88% 0.01 265)'}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              margin: isMobile ? '0 auto 12px' : '0 auto 20px',
            }}>
              <span style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontSize: isMobile ? 15 : 18, fontWeight: 700,
                color: i === 0 ? '#fff' : 'oklch(55% 0.03 265)',
              }}>{step.step}</span>
            </div>
            <h3 style={{ fontSize: isMobile ? 14 : 16, fontWeight: 700, color: 'oklch(22% 0.06 265)', marginBottom: 8, lineHeight: 1.3 }}>{step.title}</h3>
            <p style={{ fontSize: isMobile ? 13 : 14, color: 'oklch(52% 0.03 265)', lineHeight: 1.6 }}>{step.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

Object.assign(window, { Hero, StatsBar, HowItWorks });