/* ApproachScreen: "Our Approach": why we exist, principles, process, differentiators, impact. */
const { Eyebrow, Button, Card, StickerNote, FeatureItem, Icon, Badge } = window.SchoolhausDesignSystem_a5b1bb;
const { LocalIcon } = window;

function ApproachScreen() {
  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 principles = [
    ['users', 'Learner-first, always', 'Every decision starts with the people who’ll actually learn, not the org chart.'],
    ['sparkles', 'Evidence + imagination', 'Grounded in learning science, elevated by bold, playful design.'],
    ['monitor', 'Built to be used', 'Beautiful is table stakes. We design for real classrooms and real constraints.'],
    ['bar-chart-3', 'Measure what matters', 'We define success up front and track the outcomes that count.'],
    ['heart-handshake', 'Partnership over handoff', 'We embed with your team: no black boxes, no disappearing acts.'],
  ];

  const steps = [
    ['01', 'search', 'green', 'Discover', 'We dig into your learners, goals, and constraints: research, interviews, and an honest audit of what’s working and what isn’t.'],
    ['02', 'pen-tool', 'lavender', 'Design', 'We shape the concept, pedagogy, and experience, and prove it with prototypes, not just documents.'],
    ['03', 'hammer', 'orange', 'Build', 'We produce the real thing (curriculum, game, platform, or experience) with studio-level craft.'],
    ['04', 'refresh-cw', 'pink', 'Pilot & Iterate', 'We put it in front of real learners, watch closely, and refine based on evidence.'],
    ['05', 'rocket', 'lime', 'Launch & Scale', 'We roll out, train your team, support the transition, and measure impact over time.'],
  ];

  const diffs = [
    ['puzzle', 'Pedagogy · Play · Technology', 'Most partners do one. We align all three so learning is rigorous, joyful, and modern.'],
    ['microscope', 'Research-backed, learner-tested', 'Decisions are informed by learning science and validated with the people who use it.'],
    ['layers', 'End-to-end, not piecemeal', 'From strategy to build to scale: one team, one vision, no handoffs lost in translation.'],
    ['palette', 'A design studio at the core', 'We bring taste and craft to a category that too often settles for clip-art and compliance.'],
  ];

  const stats = [
    ['4', 'Practice areas, one studio', 'Curriculum, games, experiences & software, designed to work together.'],
    ['K–16', 'Learners we design for', 'From early grades through higher ed and workforce learning.'],
    ['End-to-end', 'Strategy → build → scale', 'A single partner across the entire lifecycle of a learning product.'],
  ];

  const sectionLabel = { fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--grey)', marginBottom: 18 };

  return (
    <div style={{ background: 'var(--haus-cream)' }}>
      {/* HERO */}
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingTop: mobile ? 24 : 40, paddingBottom: mobile ? 28 : 44, display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.1fr 0.9fr', gap: mobile ? 26 : 40, alignItems: 'center' }}>
        <window.Deco src="icons/starburst.svg" w={40} anim="sh-spin" style={{ top: 4, right: '3%' }} />
        <window.Deco src="icons/asterisk.svg" w={24} anim="sh-twinkle" style={{ bottom: 30, left: '42%' }} />
        <div>
          <Eyebrow>Our Approach</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 44 : (tablet ? 58 : 74), lineHeight: 0.9, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: mobile ? '14px 0 16px' : '16px 0 20px' }}>
            Curiosity In.<br /><span style={{ color: 'var(--lavender)' }}>Impact Out.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', maxWidth: 480, marginBottom: 12 }}>
            We blend learning science, playful design, and modern technology to create learning that actually works, for real learners, in the real world.
          </p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'var(--haus-black)', maxWidth: 480, marginBottom: 26, fontWeight: 500 }}>
            Bold. Playful. Clear. Built to last.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', flexDirection: mobile ? 'column' : 'row' }}>
            <Button variant="primary" size="lg" onClick={() => go('Contact')} style={mobile ? { width: '100%' } : undefined}>Start a project</Button>
            <Button variant="outline" size="lg" onClick={() => go('Services')} style={mobile ? { width: '100%' } : undefined}>Explore services</Button>
          </div>
        </div>
        <div style={{ position: 'relative', minHeight: mobile ? 'auto' : 300, display: 'flex', gap: 16, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
          <StickerNote tone="lavender" rotate={-4} size={mobile ? 150 : 172}>Build what matters.</StickerNote>
          <StickerNote tone="lime" rotate={5} size={mobile ? 140 : 150}>Wonder more.</StickerNote>
        </div>
      </section>

      {/* WHY WE EXIST */}
      <section className="sh-reveal" style={{ ...wrap, paddingTop: mobile ? 8 : 12, paddingBottom: mobile ? 40 : 56 }}>
        <div style={{ position: 'relative', background: 'var(--haus-black)', color: 'var(--haus-cream)', borderRadius: 'var(--radius-lg)', padding: mobile ? '30px 24px' : '52px 56px', overflow: 'hidden' }}>
          <window.Deco src="motifs/squiggle-purple.svg" w={90} anim="sh-wiggle" style={{ top: 24, right: 32 }} />
          <div style={{ ...sectionLabel, color: 'rgba(247,244,236,0.6)' }}>Why We Exist</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 30 : (tablet ? 40 : 48), lineHeight: 0.98, textTransform: 'uppercase', margin: '0 0 22px', maxWidth: 900 }}>
            Too much learning is designed for an <span style={{ color: 'var(--lavender)' }}>average student</span> who doesn’t exist.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 16 : 44, maxWidth: 980 }}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'rgba(247,244,236,0.82)', margin: 0 }}>
              One-size-fits-all content. Tools built for compliance instead of curiosity. Learning that feels like a worksheet instead of an adventure. We started Schoolhaus because the people designing the future deserve better.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'var(--haus-cream)', margin: 0, fontWeight: 500 }}>
              We exist to design learning that sparks curiosity, builds confidence, and creates lasting impact, where curiosity leads, imagination is protected, and the world itself becomes the classroom.
            </p>
          </div>
        </div>
      </section>

      {/* GUIDING PRINCIPLES */}
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingBottom: mobile ? 40 : 56 }}>
        <window.Deco src="motifs/squiggle-green.svg" w={52} anim="sh-float" style={{ top: -8, right: 6 }} />
        <div style={sectionLabel}>The Principles Behind Every Project</div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2,1fr)' : (tablet ? 'repeat(3,1fr)' : 'repeat(5,1fr)'), gap: 24 }}>
          {principles.map(([icon, title, body]) =>
            title === 'Measure what matters'
              ? <div key={title} style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
                  <LocalIcon name="measure-what-matters" size={30} color="var(--lavender)" />
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, lineHeight: 1.1, letterSpacing: '-0.01em', textTransform: 'uppercase', color: 'var(--haus-black)', marginBottom: 6 }}>{title}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{body}</div>
                  </div>
                </div>
              : <FeatureItem key={title} icon={icon} iconColor="var(--lavender)" title={title}>{body}</FeatureItem>
          )}
        </div>
      </section>

      {/* OUR PROCESS */}
      <section className="sh-reveal" style={{ ...wrap, paddingBottom: mobile ? 44 : 60 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, marginBottom: 24 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : 34, textTransform: 'uppercase', lineHeight: 1 }}>How We Work</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--text-secondary)', maxWidth: 440 }}>A clear, collaborative path from first conversation to lasting impact.</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : (tablet ? 'repeat(2,1fr)' : 'repeat(5,1fr)'), gap: 16 }}>
          {steps.map(([num, icon, tone, title, body]) => (
            <Card key={num} tone="white" bordered padding={22} style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: mobile ? 'auto' : 220 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: `var(--${tone})`, lineHeight: 1 }}>{num}</span>
                <span style={{ width: 40, height: 40, borderRadius: '50%', background: `var(--${tone})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={icon} size={20} color="var(--haus-black)" />
                </span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, textTransform: 'uppercase', lineHeight: 1.05 }}>{title}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{body}</div>
            </Card>
          ))}
        </div>
      </section>

      {/* WHAT MAKES US DIFFERENT */}
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingBottom: mobile ? 44 : 60 }}>
        <div style={{ background: 'var(--lavender-soft)', borderRadius: 'var(--radius-lg)', padding: mobile ? '30px 24px' : '44px 48px' }}>
          <div style={{ ...sectionLabel, color: 'var(--grey)' }}>Why Schoolhaus</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : 38, textTransform: 'uppercase', lineHeight: 1, margin: '0 0 28px' }}>
            The difference is in <span style={{ color: 'var(--lavender)' }}>how</span> we build.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(2,1fr)', gap: mobile ? 20 : 28 }}>
            {diffs.map(([icon, title, body]) => (
              <div key={title} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <span style={{ flex: '0 0 auto', width: 48, height: 48, borderRadius: '50%', background: 'var(--haus-cream)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={icon} size={24} color="var(--haus-black)" />
                </span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, textTransform: 'uppercase', lineHeight: 1.05, marginBottom: 6 }}>{title}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* IMPACT / WHAT PARTNERSHIP LOOKS LIKE */}
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingBottom: mobile ? 44 : 60 }}>
        <window.Deco src="icons/asterisk.svg" w={26} anim="sh-twinkle" style={{ top: -6, left: '46%' }} />
        <div style={sectionLabel}>What Partnership Looks Like</div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3,1fr)', gap: 18 }}>
          {stats.map(([big, title, body]) => (
            <div key={title} style={{ background: 'var(--white)', border: '1.5px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: mobile ? '24px 22px' : '28px 26px' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 40 : 46, color: 'var(--lavender)', lineHeight: 1, marginBottom: 10 }}>{big}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, textTransform: 'uppercase', lineHeight: 1.05, marginBottom: 8 }}>{title}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{body}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="sh-reveal" style={{ ...wrap, paddingBottom: mobile ? 56 : 72 }}>
        <div style={{ background: 'var(--lime)', borderRadius: 'var(--radius-lg)', padding: mobile ? '32px 24px' : '44px 48px', display: 'flex', gap: mobile ? 18 : 32, alignItems: mobile ? 'stretch' : 'center', flexWrap: 'wrap', flexDirection: mobile ? 'column' : 'row' }}>
          <div style={{ flex: 1, minWidth: mobile ? 'auto' : 260 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : 36, textTransform: 'uppercase', lineHeight: 1 }}>Your mission.<br />Our partnership.</div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.5, color: 'var(--haus-black)', margin: '12px 0 0', maxWidth: 520 }}>
              Tell us what you’re dreaming up. We’ll help you imagine, build, and launch learning that inspires and scales.
            </p>
          </div>
          <Button variant="primary" size="lg" onClick={() => go('Contact')} style={mobile ? { width: '100%' } : undefined}>Start a project</Button>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { ApproachScreen });