/* HomeScreen: recreation of the Schoolhaus homepage. */
const { Eyebrow, Button, Card, StickerNote, Badge, FeatureItem, Logo, Icon } = window.SchoolhausDesignSystem_a5b1bb;
const A = 'assets/';

function HomeScreen() {
  const mobile = window.useIsMobile(760);
  const tablet = window.useIsMobile(1040);
  const wrap = { maxWidth: 1280, margin: '0 auto', padding: mobile ? '0 20px' : '0 40px' };
  const go = (p) => window.shGo && window.shGo(p);
  const [openFaq, setOpenFaq] = React.useState(0);
  const faqs = [
    ['What do you actually build?', 'Curriculum & courses, educational games, learning experiences, and learning software, plus assessment, analytics, and strategy. Four practice areas, one studio.'],
    ['Who do you work with?', 'K–12 schools and districts, higher ed, nonprofits, and edtech companies, anyone serious about designing better learning.'],
    ['How does a project start?', 'With a short discovery conversation about your goals, learners, and constraints. From there we send a tailored proposal with scope, timeline, and budget.'],
    ['How much does it cost?', 'Every engagement is custom. We work across a range of budgets and share pricing once we understand what you’re building. Just reach out.'],
    ['Who owns the work?', 'You do. The curriculum, games, and software we create for you are yours to keep, use, and build on.'],
  ];

  return (
    <div style={{ background: 'var(--haus-cream)' }}>
      {/* HERO */}
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingTop: mobile ? 20 : 36, paddingBottom: mobile ? 20 : 40, display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.05fr 0.95fr', gap: mobile ? 28 : 40, alignItems: 'start' }}>
        <window.Deco src="icons/starburst.svg" w={40} anim="sh-spin" style={{ top: 6, right: '2%' }} />
        <window.Deco src="icons/asterisk.svg" w={26} anim="sh-twinkle" style={{ bottom: 40, left: '30%' }} />
        <div>
          <Eyebrow>We're a learning design studio</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 42 : (tablet ? 60 : 78), lineHeight: 0.9, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: mobile ? '14px 0 16px' : '18px 0 20px', position: 'relative' }}>
            Learning<br />Designed<br /><span style={{ color: 'var(--lavender)' }}>Differently.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'var(--text-secondary)', maxWidth: 440, margin: '0 0 8px' }}>
            We partner with schools, districts, and institutions to design the future of learning.
          </p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'var(--haus-black)', maxWidth: 440, margin: '0 0 26px', fontWeight: 500 }}>
            Curriculum. Games. Experiences. Software.<br />Built for curious minds and the world they'll shape.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', flexDirection: mobile ? 'column' : 'row' }}>
            <Button variant="primary" size="lg" onClick={() => go('Approach')} style={mobile ? { width: '100%' } : undefined}>See how we work</Button>
            <Button variant="secondary" size="lg" onClick={() => go('Contact')} style={mobile ? { width: '100%' } : undefined}>Start a project</Button>
          </div>
        </div>
        <div style={{ position: 'relative', minHeight: mobile ? 'auto' : 420 }}>
          <div style={{ borderRadius: 'var(--radius-md)', overflow: 'hidden', height: mobile ? 240 : 380, background: `center/cover url("${A}photo-binoculars.png")` }} />
          <StickerNote tone="pink" rotate={4} size={mobile ? 118 : 150} style={{ position: 'absolute', top: -14, right: 6 }}>Wonder more.</StickerNote>
          <Card tone="lime" padding={20} style={mobile ? { marginTop: 16, width: '100%' } : { position: 'absolute', bottom: -18, right: -8, width: 230 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 11, letterSpacing: '0.07em', textTransform: 'uppercase', marginBottom: 8 }}>What we build</div>
            {['Curriculum & Courses', 'Learning Experiences', 'Educational Games', 'Learning Software'].map((t) => (
              <div key={t} style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, padding: '4px 0', display: 'flex', gap: 8, alignItems: 'center' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--haus-black)' }} />{t}
              </div>
            ))}
          </Card>
        </div>
      </section>

      {/* APPROACH STRIP */}
      <section className="sh-reveal" style={{ ...wrap, paddingTop: mobile ? 24 : 0 }}>
        <div style={{ position: 'relative', background: 'var(--lavender-soft)', borderRadius: 'var(--radius-lg)', padding: mobile ? '24px 22px' : '32px 36px', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.1fr 2.4fr auto', gap: mobile ? 22 : 32, alignItems: 'center' }}>
          <window.Deco src="motifs/squiggle-green.svg" w={54} anim="sh-float" style={{ top: -22, right: 40 }} />
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, textTransform: 'uppercase', lineHeight: 1 }}>Our Approach</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-secondary)', marginTop: 8 }}>Designing learning that inspires and scales.</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap: 22 }}>
            <FeatureItem icon="eye" title="Curiosity">We ask better questions to spark real learning.</FeatureItem>
            <FeatureItem icon="layout-grid" title="Intention">Pedagogy, play, and technology, aligned.</FeatureItem>
            <FeatureItem icon="smile" title="Impact">Solutions that work in classrooms and beyond.</FeatureItem>
            <FeatureItem icon="globe" title="Change">We create lasting impact with our partners.</FeatureItem>
          </div>
          <Button variant="primary" onClick={() => go('Approach')} style={mobile ? { width: '100%' } : undefined}>Our process</Button>
        </div>
      </section>

      {/* PARTNER LOGO WALL */}
      <section className="sh-reveal" style={{ ...wrap, paddingTop: mobile ? 40 : 52, paddingBottom: mobile ? 32 : 48 }}>
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--grey)', textAlign: 'center', marginBottom: 30 }}>
          Trusted by educators around the world
        </div>
        <div style={{ display: 'flex', gap: mobile ? 28 : 64, alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }}>
          {[
            ['partner-alpha.webp', 'Alpha School', 46],
            ['partner-hisd.png', 'Houston ISD', 38],
            ['partner-lausd.png', 'LAUSD', 44],
            ['partner-ib.png', 'IB World Schools', 46],
          ].map(([file, alt, h]) => (
            <img key={file} src={A + file} alt={alt} style={{ height: mobile ? h * 0.8 : h, width: 'auto', filter: 'grayscale(1)', opacity: 0.55 }} />
          ))}
        </div>
      </section>
      {/* FAQ */}
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingTop: mobile ? 24 : 40, paddingBottom: mobile ? 48 : 72 }}>
        <window.Deco src="icons/asterisk.svg" w={24} anim="sh-twinkle" style={{ top: 8, right: '4%' }} />
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, marginBottom: 20 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 24 : 28, textTransform: 'uppercase' }}>Frequently Asked</div>
          <Button variant="ghost" size="sm" onClick={() => go('FAQs')}>See all FAQs</Button>
        </div>
        <div style={{ maxWidth: 860 }}>
          {faqs.map(([q, a], i) => {
            const isOpen = openFaq === i;
            return (
              <div key={q} style={{ background: 'var(--white)', border: '1.5px solid var(--border-default)', borderRadius: 'var(--radius-md)', marginBottom: 12, overflow: 'hidden' }}>
                <button onClick={() => setOpenFaq(isOpen ? -1 : i)} aria-expanded={isOpen} style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '18px 22px', textAlign: 'left' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 16 : 18, textTransform: 'uppercase', lineHeight: 1.15 }}>{q}</span>
                  <Icon name={isOpen ? 'minus' : 'plus'} size={20} color="var(--haus-black)" />
                </button>
                {isOpen && (
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--text-secondary)', padding: '0 22px 20px' }}>{a}</div>
                )}
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { HomeScreen });