/* ServicesScreen: recreation of the Services page. */
const { Eyebrow, Button, Card, StickerNote, Icon } = window.SchoolhausDesignSystem_a5b1bb;
const { LocalIcon } = window;
const AS = 'assets/';

function ServicesScreen() {
  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 services = [
    ['01', 'message-circle', 'orange', 'Strategy & Consulting', 'Big picture thinking. Grounded in real impact.', ['Learning Strategy', 'Product Roadmapping', 'Research & Insights', 'Implementation Support']],
    ['02', 'sparkles', 'lavender', 'Learning Experiences', 'Beyond content. Immersive, interactive, unforgettable.', ['Experiential Learning Design', 'Workshops & Challenges', 'Virtual & In-Person', 'Events & Camps']],
    ['03', 'monitor', 'lime', 'Learning Management Software', 'Custom platforms that make teaching and learning better.', ['LMS Design & Development', 'Student & Teacher Tools', 'Analytics & Reporting', 'Integrations & Support']],
    ['04', 'gamepad-2', 'orange', 'Educational Games', 'Serious learning. Real fun. Built to play and learn.', ['Game Concept & Design', 'Mechanics & Systems', 'Art Direction & UX', 'Prototype & Build']],
    ['05', 'bar-chart-3', 'green', 'Assessment & Analytics', 'Measure what matters. Improve what’s possible.', ['Assessment Strategy', 'Rubrics & Frameworks', 'Data Dashboards', 'Impact Reporting']],
    ['06', 'book-open', 'green', 'Curriculum & Course Design', 'Standards-aligned. Future-ready. Made to engage.', ['K–12, Higher Ed, Workforce', 'Scope & Sequence', 'Lesson Design & Resources', 'Pilot & Iteration']],
  ];
  return (
    <div style={{ background: 'var(--haus-cream)' }}>
      <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/asterisk.svg" w={28} anim="sh-twinkle" style={{ top: 30, left: '48%' }} />
        <div>
          <Eyebrow tone="lime">Our Services</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 40 : (tablet ? 52 : 64), lineHeight: 0.92, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: mobile ? '14px 0 16px' : '16px 0 20px' }}>
            We Design<br />Learning That<br /><span style={{ color: 'var(--lavender)' }}>Works.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'var(--text-secondary)', maxWidth: 460, marginBottom: 26 }}>
            From strategy to execution, we help you imagine, build, and launch learning solutions that inspire and scale.
          </p>
          <Button variant="primary" size="lg" onClick={() => go('Contact')} style={mobile ? { width: '100%' } : undefined}>Let's build together</Button>
        </div>
        <div style={{ position: 'relative', minHeight: mobile ? 'auto' : 320, display: 'flex', gap: 16, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
          <StickerNote tone="lavender" rotate={-4} size={mobile ? 150 : 170} style={mobile ? undefined : { marginTop: 20 }}>Wonder more.</StickerNote>
          <div style={mobile
            ? { background: 'var(--lime)', borderRadius: 'var(--radius-md)', padding: 14 }
            : { position: 'absolute', bottom: 0, right: 0, background: 'var(--lime)', borderRadius: 'var(--radius-md)', padding: 14 }}>
            <img src={AS + 'brand/illustrations/mascot.svg'} alt="Schoolhaus explorer mascot" className="sh-bob" style={{ height: mobile ? 110 : 120, display: 'block' }} />
          </div>
        </div>
      </section>

      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingBottom: 56 }}>
        <window.Deco src="motifs/squiggle-purple.svg" w={70} anim="sh-wiggle" style={{ top: -6, right: 10 }} />
        <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 26 : 30, textTransform: 'uppercase', marginBottom: 24 }}>What We Do</div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : (tablet ? 'repeat(2,1fr)' : 'repeat(3,1fr)'), gap: 20 }}>
          {services.map(([num, icon, tone, title, tag, items]) => (
            <Card key={num} tone="white" bordered padding={22} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ background: 'var(--haus-black)', color: 'var(--haus-cream)', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, borderRadius: 8, padding: '4px 8px' }}>{num}</span>
                {icon === 'bar-chart-3'
                  ? <LocalIcon name="measure-what-matters" size={26} color={`var(--${tone})`} />
                  : <Icon name={icon} size={26} color={`var(--${tone})`} />
                }
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, lineHeight: 1.05, textTransform: 'uppercase' }}>{title}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-secondary)', lineHeight: 1.45 }}>{tag}</div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 5 }}>
                {items.map((it) => (
                  <li key={it} style={{ fontFamily: 'var(--font-body)', fontSize: 13, display: 'flex', gap: 8, alignItems: 'center' }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: `var(--${tone})` }} />{it}
                  </li>
                ))}
              </ul>
            </Card>
          ))}
        </div>
      </section>

      <section className="sh-reveal" style={{ ...wrap, paddingBottom: 64 }}>
        <div style={{ background: 'var(--lavender-soft)', borderRadius: 'var(--radius-lg)', padding: mobile ? '26px 24px' : '36px 40px', display: 'flex', gap: mobile ? 18 : 32, alignItems: mobile ? 'stretch' : 'center', flexWrap: 'wrap', flexDirection: mobile ? 'column' : 'row' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 26 : 30, textTransform: 'uppercase', lineHeight: 1.0 }}>
            Your mission.<br />Our partnership.
          </div>
          <p style={{ flex: 1, minWidth: mobile ? 'auto' : 240, fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.5, color: 'var(--text-secondary)' }}>
            We become an extension of your team to bring bold ideas to life and create lasting impact for learners everywhere.
          </p>
          <Button variant="primary" size="lg" onClick={() => go('Contact')} style={mobile ? { width: '100%' } : undefined}>Start a project</Button>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { ServicesScreen });