/* AboutScreen: recreation of the About page. */
const { Eyebrow, Button, FeatureItem, Icon } = window.SchoolhausDesignSystem_a5b1bb;
const AA = 'assets/';

function AboutScreen() {
  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 beliefs = [
    ['eye', 'Curiosity drives us', 'We start with wonder and follow it anywhere.'],
    ['pen-tool', 'Design with intention', 'Every detail is built with purpose.'],
    ['trending-up', 'Impact > output', 'We care about real change, not just delivering more.'],
    ['smile', 'Better together', 'Collaboration makes our work, and learning, stronger.'],
    ['flag', 'Future focused', "We're building for the learners of today and tomorrow."],
  ];
  return (
    <div style={{ background: 'var(--haus-cream)' }}>
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingTop: mobile ? 24 : 40, paddingBottom: mobile ? 28 : 40, display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.05fr 0.95fr', gap: mobile ? 24 : 40, alignItems: 'center' }}>
        <window.Deco src="icons/asterisk.svg" w={26} anim="sh-twinkle" style={{ top: 20, right: '46%' }} />
        <div>
          <Eyebrow>About Schoolhaus</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 38 : (tablet ? 50 : 60), lineHeight: 0.92, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: mobile ? '14px 0 16px' : '16px 0 20px' }}>
            We're Here <span style={{ color: 'var(--lavender)' }}>To Reimagine</span> Learning.
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.5, color: 'var(--text-secondary)', maxWidth: 460, marginBottom: 12 }}>
            Schoolhaus is a learning design studio. We partner with schools, districts, and institutions to design the future of learning.
          </p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.5, fontWeight: 500, maxWidth: 460, marginBottom: 26 }}>
            Curriculum. Games. Experiences. Software. Built for curious minds and the world they'll shape.
          </p>
          <Button variant="primary" size="lg" onClick={() => go('Contact')} style={mobile ? { width: '100%' } : undefined}>Let's build the future</Button>
        </div>
        <div style={{ borderRadius: 'var(--radius-md)', overflow: 'hidden', height: mobile ? 260 : 360, background: `center/cover url("${AA}photo-binoculars.png")` }} />
      </section>

      {/* MISSION */}
      <section className="sh-reveal" style={wrap}>
        <div style={{ background: 'var(--lavender-soft)', borderRadius: 'var(--radius-lg)', padding: mobile ? '26px 24px' : '36px 40px', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '0.8fr 1.6fr', gap: mobile ? 16 : 32, alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : 34, textTransform: 'uppercase' }}>
            Our Mission
            <div style={{ height: 4, width: 120, background: 'var(--lavender)', borderRadius: 2, marginTop: 10 }} />
          </div>
          <div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.5, marginTop: 0, marginBottom: 12 }}>To design learning that sparks curiosity, builds confidence, and creates lasting impact.</p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.5, color: 'var(--text-secondary)', margin: 0 }}>We believe learning should feel alive: meaningful, joyful, and made for today.</p>
          </div>
        </div>
      </section>

      {/* BELIEFS */}
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingTop: 48, paddingBottom: 8 }}>
        <window.Deco src="motifs/squiggle-green.svg" w={52} anim="sh-float" style={{ top: 20, right: 8 }} />
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--grey)', marginBottom: 24 }}>What We Believe</div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2,1fr)' : (tablet ? 'repeat(3,1fr)' : 'repeat(5,1fr)'), gap: 24 }}>
          {beliefs.map(([icon, title, body]) => (
            <FeatureItem key={title} icon={icon} iconColor="var(--lavender)" title={title}>{body}</FeatureItem>
          ))}
        </div>
      </section>

      {/* TEAM */}
      <section className="sh-reveal" style={{ ...wrap, paddingTop: 52, paddingBottom: 60 }}>
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--grey)', marginBottom: 24 }}>The Person Behind the Work</div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '0.85fr 1.15fr', gap: mobile ? 28 : 44, alignItems: 'start' }}>
          <div>
            <div style={{ height: mobile ? 380 : 420, borderRadius: 'var(--radius-md)', background: 'var(--lavender)', overflow: 'hidden', marginBottom: 16 }}>
              <img src={AA + 'founder-ron.jpg'} alt="Ron Roberts II" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '42% 50%', display: 'block' }} />
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, textTransform: 'uppercase', lineHeight: 1 }}>Ron Roberts II</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-secondary)', marginTop: 4 }}>Founder &amp; Creative Director</div>
          </div>
          <div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 30 : 40, lineHeight: 0.95, textTransform: 'uppercase', margin: '0 0 22px' }}>
              Trust young<br />people. <span style={{ color: 'var(--lavender)' }}>Watch what<br />they build.</span>
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'var(--text-secondary)', margin: '0 0 16px' }}>
              Before he was old enough to vote, Ron Roberts was advising institutions, earning national recognition for his work in education, and proving that age is never the limit of human potential.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'var(--text-secondary)', margin: '0 0 16px' }}>
              Those experiences shaped a simple conviction: when young people are trusted, challenged, and inspired, they build remarkable things.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'var(--haus-black)', fontWeight: 500, margin: '0 0 28px' }}>
              Schoolhaus exists to help schools and ecosystems of learning create those conditions, designing learning experiences where curiosity leads, imagination is protected, and the world itself becomes the classroom.
            </p>
            <Button variant="outline" size="sm" onClick={() => go('Contact')}>Get in touch</Button>
          </div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { AboutScreen });