// home-page.jsx — Categories, Featured, Mission, Testimonials, Coverage, CTA, HomePage

// ── Categories ─────────────────────────────────────────────────────────────────
const CategoriesSection = ({ onSearch }) => {
  const { categories } = window.SITE_DATA;
  const isMobile = window.useIsMobile();
  const colors = [
    { bg: 'oklch(96% 0.04 265)', accent: 'oklch(38% 0.1 265)' },
    { bg: 'oklch(97% 0.04 80)',  accent: 'oklch(52% 0.14 80)' },
    { bg: 'oklch(96% 0.04 158)', accent: 'oklch(38% 0.1 155)' },
    { bg: 'oklch(96% 0.04 30)',  accent: 'oklch(45% 0.12 30)' },
    { bg: 'oklch(96% 0.04 310)', accent: 'oklch(40% 0.1 308)' },
  ];
  return (
    <section style={{ background: 'oklch(97% 0.008 60)', padding: isMobile ? '60px 18px' : '96px 80px' }}>
      <div style={{ textAlign: 'center', marginBottom: isMobile ? 36 : 56 }}>
        <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', color: 'oklch(72% 0.17 80)', textTransform: 'uppercase', marginBottom: 12 }}>Explore</p>
        <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 'clamp(28px, 8vw, 36px)' : 'clamp(34px, 4vw, 50px)', fontWeight: 600, color: 'oklch(22% 0.06 265)', lineHeight: 1.15 }}>
          Every discipline,{isMobile ? ' ' : <br />}one platform
        </h2>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(5, 1fr)',
        gap: isMobile ? 12 : 16,
        maxWidth: 1200, margin: '0 auto',
      }}>
        {categories.map((cat, i) => {
          const [hov, setHov] = React.useState(false);
          return (
            <button
              key={cat.id}
              onClick={() => onSearch({ topic: cat.name, location: '' })}
              onMouseEnter={() => setHov(true)}
              onMouseLeave={() => setHov(false)}
              style={{
                background: hov ? colors[i].bg : '#fff',
                border: `1.5px solid ${hov ? colors[i].accent + '44' : 'oklch(90% 0.01 265)'}`,
                borderRadius: 16, padding: '32px 20px',
                cursor: 'pointer', textAlign: 'left',
                transition: 'all 0.22s ease',
                transform: hov ? 'translateY(-4px)' : 'none',
                boxShadow: hov ? `0 12px 32px ${colors[i].accent}22` : '0 2px 8px rgba(0,0,0,0.05)',
              }}
            >
              <div style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontSize: 42, fontWeight: 700, lineHeight: 1,
                color: hov ? colors[i].accent : 'oklch(88% 0.01 265)',
                marginBottom: 16, transition: 'color 0.22s',
              }}>0{i + 1}</div>
              <div style={{ fontWeight: 700, fontSize: 16, color: 'oklch(22% 0.06 265)', marginBottom: 6 }}>{cat.name}</div>
              <div style={{ fontSize: 13, color: 'oklch(58% 0.03 265)', lineHeight: 1.5 }}>{cat.desc}</div>
              <div style={{ marginTop: 16, fontSize: 12, fontWeight: 600, color: colors[i].accent }}>
                {cat.count.toLocaleString()} instructors →
              </div>
            </button>
          );
        })}
      </div>
    </section>
  );
};

// ── Featured Instructors ───────────────────────────────────────────────────────
const FeaturedInstructors = ({ onViewAll, onSelectInstructor }) => {
  const data = window.useSiteData();
  const isMobile = window.useIsMobile();
  const { instructors } = data;
  const featured = instructors.filter(i => i.badges.includes('Top Rated') && i.badges.includes('Super Instructor')).slice(0, 3)
    .concat(instructors.filter(i => i.badges.includes('Top Rated') && !i.badges.includes('Super Instructor')).slice(0, 3));
  const display = featured.slice(0, 6);

  return (
    <section style={{ background: '#fff', padding: isMobile ? '60px 18px' : '96px 80px' }}>
      <div style={{
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'space-between',
        alignItems: isMobile ? 'flex-start' : 'flex-end',
        gap: isMobile ? 18 : 0,
        marginBottom: isMobile ? 28 : 48, maxWidth: 1200, margin: isMobile ? '0 auto 28px' : '0 auto 48px',
      }}>
        <div>
          <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', color: 'oklch(72% 0.17 80)', textTransform: 'uppercase', marginBottom: 12 }}>Our Best</p>
          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 'clamp(26px, 8vw, 34px)' : 'clamp(34px, 4vw, 50px)', fontWeight: 600, color: 'oklch(22% 0.06 265)', lineHeight: 1.15 }}>
            Top-rated instructors{isMobile ? ' ' : <br />}this week
          </h2>
        </div>
        <button
          onClick={onViewAll}
          style={{
            background: 'none', border: '1.5px solid oklch(82% 0.04 265)',
            borderRadius: 10, padding: '11px 24px',
            fontWeight: 600, fontSize: 14, color: 'oklch(22% 0.06 265)',
            cursor: 'pointer', fontFamily: "'Plus Jakarta Sans', sans-serif",
            transition: 'all 0.15s',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'oklch(22% 0.06 265)'; e.currentTarget.style.color = '#fff'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.color = 'oklch(22% 0.06 265)'; }}
        >View All Instructors →</button>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: isMobile ? 14 : 24,
        maxWidth: 1200, margin: '0 auto',
      }}>
        {(isMobile ? display.slice(0, 3) : display).map(ins => (
          <window.InstructorCard key={ins.id} instructor={ins} viewMode="grid" onSelect={() => onSelectInstructor && onSelectInstructor(ins.id)} />
        ))}
      </div>
    </section>
  );
};

// ── Mission ───────────────────────────────────────────────────────────────────
const MissionSection = () => {
  const pillars = [
    { n: '01', title: 'Rigorously Vetted', body: 'Every instructor on Coaching passes a multi-stage review — credentials, teaching history, reference checks, and a live demo lesson before they teach a single student.' },
    { n: '02', title: 'Truly Personal', body: 'We don\'t believe in one-size-fits-all curricula. Every lesson plan is built around your goals, your schedule, and the way you learn best.' },
    { n: '03', title: 'Nationwide Coverage', body: 'With instructors in 85% of US cities, you\'ll never have to settle for "whoever is nearby." Premium instruction, wherever you live.' },
    { n: '04', title: 'Guaranteed Quality', body: 'Your first lesson is fully guaranteed. If it\'s not the right fit, we\'ll match you with a new instructor at no charge — no questions asked.' },
  ];
  const isMobile = window.useIsMobile();
  return (
    <section style={{ background: 'oklch(20% 0.065 265)', padding: isMobile ? '60px 18px' : '100px 80px' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 36 : 80,
        alignItems: 'center',
      }}>
        <div>
          <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', color: 'oklch(72% 0.17 80)', textTransform: 'uppercase', marginBottom: 16 }}>Our Mission</p>
          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 'clamp(28px, 8vw, 38px)' : 'clamp(36px, 4vw, 54px)', fontWeight: 600, color: '#fff', lineHeight: 1.1, marginBottom: 20 }}>
            We believe everyone deserves access to a truly <em style={{ color: 'oklch(72% 0.17 80)', fontStyle: 'italic' }}>great</em> teacher.
          </h2>
          <p style={{ fontSize: isMobile ? 14 : 16, color: 'rgba(255,255,255,0.62)', lineHeight: 1.75, marginBottom: 28 }}>
            Most people settle — for whoever is available, affordable, or nearby. At Coaching, we've spent years building a network of exceptional private instructors so you never have to compromise. Excellence isn't a luxury. It's the standard.
          </p>
          <button style={{
            background: 'oklch(72% 0.17 80)', color: 'oklch(22% 0.06 265)',
            border: 'none', borderRadius: 10, padding: '14px 30px',
            fontWeight: 700, fontSize: 14, cursor: 'pointer',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
          }}>Our Story →</button>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 12 : 20,
        }}>
          {pillars.map(p => (
            <div key={p.n} style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 16, padding: isMobile ? 18 : 24 }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 22 : 28, fontWeight: 700, color: 'oklch(72% 0.17 80)', marginBottom: 10 }}>{p.n}</div>
              <div style={{ fontWeight: 700, color: '#fff', fontSize: 15, marginBottom: 8 }}>{p.title}</div>
              <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.58)', lineHeight: 1.6 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Testimonials ──────────────────────────────────────────────────────────────
const TestimonialsSection = () => {
  const { testimonials } = window.SITE_DATA;
  const isMobile = window.useIsMobile();
  const [active, setActive] = React.useState(0);

  return (
    <section style={{ background: 'oklch(97% 0.008 60)', padding: isMobile ? '60px 18px' : '96px 80px' }}>
      <div style={{ textAlign: 'center', marginBottom: isMobile ? 32 : 56 }}>
        <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', color: 'oklch(72% 0.17 80)', textTransform: 'uppercase', marginBottom: 12 }}>Stories</p>
        <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 'clamp(26px, 8vw, 34px)' : 'clamp(34px, 4vw, 50px)', fontWeight: 600, color: 'oklch(22% 0.06 265)', lineHeight: 1.15 }}>
          Life-changing lessons,{isMobile ? ' ' : <br />}real students
        </h2>
      </div>
      {/* Featured testimonial */}
      <div style={{ maxWidth: 760, margin: '0 auto 48px', position: 'relative' }}>
        <div style={{ fontSize: 100, color: 'oklch(72% 0.17 80)', lineHeight: 0.6, fontFamily: 'Georgia, serif', marginBottom: 24, opacity: 0.4 }}>"</div>
        <blockquote style={{
          fontFamily: "'Cormorant Garamond', serif",
          fontSize: 'clamp(20px, 2.5vw, 26px)', fontWeight: 400,
          color: 'oklch(28% 0.05 265)', lineHeight: 1.65,
          fontStyle: 'italic', marginBottom: 32,
        }}>
          {testimonials[active].text}
        </blockquote>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 48, height: 48, borderRadius: '50%',
            background: `oklch(72% 0.12 ${testimonials[active].hue})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: "'Cormorant Garamond', serif", fontSize: 18, fontWeight: 700, color: '#fff',
          }}>{testimonials[active].initials}</div>
          <div>
            <div style={{ fontWeight: 700, color: 'oklch(22% 0.06 265)', fontSize: 15 }}>{testimonials[active].name}</div>
            <div style={{ fontSize: 13, color: 'oklch(55% 0.03 265)' }}>{testimonials[active].subject} · {testimonials[active].city}</div>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
            {[1,2,3,4,5].map(s => (
              <svg key={s} style={{ width: 16, height: 16 }} viewBox="0 0 16 16" fill="oklch(72% 0.17 80)">
                <path d="M8 1.5l1.8 3.7 4.1.6-3 2.9.7 4.1L8 10.8l-3.6 1.9.7-4.1-3-2.9 4.1-.6z" />
              </svg>
            ))}
          </div>
        </div>
      </div>
      {/* Dots */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 8 }}>
        {testimonials.map((_, i) => (
          <button key={i} onClick={() => setActive(i)} style={{
            width: i === active ? 28 : 8, height: 8, borderRadius: 4,
            background: i === active ? 'oklch(22% 0.06 265)' : 'oklch(82% 0.03 265)',
            border: 'none', cursor: 'pointer', padding: 0, transition: 'all 0.25s',
          }} />
        ))}
      </div>
      {/* Mini testimonial cards — 3 cols on desktop, 1 col on mobile */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: isMobile ? 12 : 20,
        maxWidth: 1100, margin: isMobile ? '32px auto 0' : '48px auto 0',
      }}>
        {testimonials.slice(0, 3).map((t, i) => (
          <button key={t.id} onClick={() => setActive(i)}
            style={{
              background: active === i ? '#fff' : 'oklch(97% 0.008 60)',
              border: `1px solid ${active === i ? 'oklch(78% 0.06 265)' : 'oklch(90% 0.01 265)'}`,
              borderRadius: 14, padding: '20px 22px', cursor: 'pointer', textAlign: 'left',
              boxShadow: active === i ? '0 4px 20px oklch(15% 0.06 265 / 0.1)' : 'none',
              transition: 'all 0.2s', fontFamily: "'Plus Jakarta Sans', sans-serif",
            }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{ width: 36, height: 36, borderRadius: '50%', background: `oklch(72% 0.12 ${t.hue})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, color: '#fff', fontFamily: "'Cormorant Garamond', serif" }}>{t.initials}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 13, color: 'oklch(22% 0.06 265)' }}>{t.name}</div>
                <div style={{ fontSize: 11, color: 'oklch(58% 0.03 265)' }}>{t.subject}</div>
              </div>
            </div>
            <p style={{ fontSize: 12, color: 'oklch(45% 0.03 265)', lineHeight: 1.6, display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{t.text}</p>
          </button>
        ))}
      </div>
    </section>
  );
};

// ── Coverage ──────────────────────────────────────────────────────────────────
const CoverageSection = () => {
  const regions = [
    { name: 'Northeast', cities: ['New York, NY', 'Boston, MA', 'Philadelphia, PA', 'Washington, DC', 'Baltimore, MD'] },
    { name: 'Southeast', cities: ['Miami, FL', 'Atlanta, GA', 'Nashville, TN', 'Charlotte, NC', 'Orlando, FL'] },
    { name: 'Midwest',   cities: ['Chicago, IL', 'Columbus, OH', 'Detroit, MI', 'Indianapolis, IN', 'Minneapolis, MN'] },
    { name: 'Southwest', cities: ['Houston, TX', 'Dallas, TX', 'Austin, TX', 'Phoenix, AZ', 'San Antonio, TX'] },
    { name: 'West',      cities: ['Los Angeles, CA', 'San Francisco, CA', 'Seattle, WA', 'Denver, CO', 'San Diego, CA'] },
  ];
  const isMobile = window.useIsMobile();
  return (
    <section style={{ background: '#fff', padding: isMobile ? '60px 18px' : '96px 80px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 36 : 80,
          alignItems: 'start',
        }}>
          <div>
            <p style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', color: 'oklch(72% 0.17 80)', textTransform: 'uppercase', marginBottom: 16 }}>Coverage</p>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 'clamp(26px, 8vw, 34px)' : 'clamp(34px, 4vw, 50px)', fontWeight: 600, color: 'oklch(22% 0.06 265)', lineHeight: 1.15, marginBottom: 18 }}>
              Instructors in{isMobile ? ' ' : <br />}<em style={{ color: 'oklch(72% 0.17 80)', fontStyle: 'italic' }}>your neighborhood</em>
            </h2>
            <p style={{ fontSize: isMobile ? 14 : 15, color: 'oklch(52% 0.03 265)', lineHeight: 1.7, marginBottom: 24 }}>
              We've spent years building a nationwide network so no matter where you live, a premium instructor is within a short drive. We operate in 85% of American cities — and growing every week.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: isMobile ? 10 : 16 }}>
              {[['850+','Cities covered'],['48','States active'],['2,400+','Instructors'],['98%','Would recommend']].map(([v, l]) => (
                <div key={l} style={{ background: 'oklch(97% 0.008 60)', borderRadius: 12, padding: isMobile ? '14px 16px' : '18px 20px' }}>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 22 : 28, fontWeight: 700, color: 'oklch(22% 0.06 265)' }}>{v}</div>
                  <div style={{ fontSize: 12, color: 'oklch(55% 0.03 265)', marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {regions.map(r => (
              <div key={r.name} style={{ background: 'oklch(97% 0.008 60)', borderRadius: 14, padding: isMobile ? '14px 16px' : '18px 22px' }}>
                <div style={{ fontWeight: 700, fontSize: 14, color: 'oklch(22% 0.06 265)', marginBottom: 8 }}>{r.name}</div>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {r.cities.map(c => (
                    <span key={c} style={{ fontSize: 12, color: 'oklch(52% 0.03 265)', background: '#fff', padding: '4px 10px', borderRadius: 20, border: '1px solid oklch(90% 0.01 265)' }}>{c}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Become Instructor CTA ─────────────────────────────────────────────────────
const BecomeInstructorCTA = ({ openBecomeInstructor }) => {
  const isMobile = window.useIsMobile();
  return (
    <section style={{ background: 'oklch(72% 0.17 80)', padding: isMobile ? '54px 22px' : '80px' }}>
      <div style={{
        maxWidth: 900, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr auto',
        alignItems: isMobile ? 'flex-start' : 'center',
        gap: isMobile ? 24 : 48,
      }}>
        <div>
          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: isMobile ? 'clamp(26px, 8vw, 34px)' : 'clamp(32px, 4vw, 48px)', fontWeight: 600, color: 'oklch(18% 0.06 265)', lineHeight: 1.15, marginBottom: 12 }}>
            Are you an exceptional instructor?
          </h2>
          <p style={{ fontSize: isMobile ? 14 : 16, color: 'oklch(28% 0.06 265)', lineHeight: 1.65 }}>
            Join our vetted network and build a thriving private practice. Set your own rates, own your schedule, and teach the students who are right for you.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 18, flexWrap: 'wrap' }}>
            {['Avg. $4,200/mo earnings','Keep 85% of every lesson','Full scheduling control'].map(b => (
              <span key={b} style={{ fontSize: 13, fontWeight: 600, color: 'oklch(22% 0.06 265)', display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'oklch(22% 0.06 265)', display: 'inline-block' }} />{b}
              </span>
            ))}
          </div>
        </div>
        <button onClick={() => openBecomeInstructor && openBecomeInstructor()} style={{
          background: 'oklch(22% 0.06 265)', color: '#fff',
          border: 'none', borderRadius: 12, padding: isMobile ? '15px 0' : '18px 36px',
          fontWeight: 700, fontSize: 15, cursor: 'pointer', whiteSpace: 'nowrap',
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          width: isMobile ? '100%' : 'auto',
        }}>Apply to Teach →</button>
      </div>
    </section>
  );
};

// ── HomePage ──────────────────────────────────────────────────────────────────
// Sections gated on FEATURES.publicInstructors are hidden in invite-only mode
// (the search/browse story isn't open to the public yet).
const HomePage = ({ onSearch, setPage, onSelectInstructor, openBecomeInstructor }) => {
  const showPublic = window.FEATURES?.publicInstructors;
  return (
    <div>
      <window.Hero onSearch={onSearch} setPage={setPage} openBecomeInstructor={openBecomeInstructor} />
      <window.StatsBar />
      {showPublic && <CategoriesSection onSearch={onSearch} />}
      <window.HowItWorks />
      {showPublic && <FeaturedInstructors onViewAll={() => setPage('instructors')} onSelectInstructor={onSelectInstructor} />}
      <MissionSection />
      <TestimonialsSection />
      <CoverageSection />
      <BecomeInstructorCTA openBecomeInstructor={openBecomeInstructor} />
    </div>
  );
};

Object.assign(window, { CategoriesSection, FeaturedInstructors, MissionSection, TestimonialsSection, CoverageSection, BecomeInstructorCTA, HomePage });