/* CareersScreen: "Careers": join the studio, culture, and open roles. */
const { Eyebrow, Button, Card, StickerNote, FeatureItem, Icon, Badge } = window.SchoolhausDesignSystem_a5b1bb;

function CareersScreen() {
  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 scrollToRoles = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const el = document.getElementById('roles');
    if (el && el.scrollIntoView) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const culture = [
    ['rocket', 'Ownership', 'You drive your work end-to-end, no waiting for permission to make it great.'],
    ['sparkles', 'Craft', 'We sweat the details most teams skip. Good enough isn’t good enough.'],
    ['search', 'Curiosity', 'We ask why, try the weird idea, and learn from what breaks.'],
    ['bar-chart-3', 'Impact', 'Every project ships to real learners. We measure what actually changes.'],
  ];

  const roles = [
    {
      title: 'Forward Deployed Engineer',
      tags: ['Hybrid', 'Austin, TX', 'Part-time'],
      summary: 'You’ll work shoulder-to-shoulder with school and district partners to deploy, customize, and integrate Schoolhaus learning software in the real world, part builder, part consultant.',
      about: 'About the role: you sit at the intersection of engineering and partnership, turning real classroom constraints into working software, fast.',
      doTitle: 'What you’ll do',
      duties: [
        'Ship and configure learning software for partners',
        'Integrate with existing tools, LMS, and SIS platforms',
        'Translate classroom needs into product improvements',
        'Occasionally travel to partner sites',
        'Be the technical face of Schoolhaus in the field',
      ],
      lookingTitle: 'What we’re looking for',
      looking: [
        'A strong full-stack engineer (TypeScript/React/Node or similar)',
        'Comfort talking directly to non-technical customers',
        'Bias for action and ownership',
        'Genuine excitement about education',
        'Willingness to travel occasionally',
      ],
      tone: 'lavender',
      icon: 'code',
    },
    {
      title: 'Junior Game Designer',
      tags: ['Hybrid', 'Austin, TX', 'Part-time · Early Career'],
      summary: 'You’ll design and prototype educational games where serious learning meets real fun.',
      about: 'About the role: you’ll help shape game concepts and systems from a blank page through playtest and iteration, alongside learning designers and artists.',
      doTitle: 'What you’ll do',
      duties: [
        'Help design game concepts, mechanics, and systems',
        'Build quick prototypes to test ideas',
        'Run and learn from playtests',
        'Collaborate with learning designers and artists',
        'Sweat the details that make play meaningful',
      ],
      lookingTitle: 'What we’re looking for',
      looking: [
        'A portfolio or projects that show game design instinct',
        'Some experience designing or prototyping games (school, jams, or personal projects count)',
        'An understanding of what makes learning stick',
        'A collaborative, curious mindset',
        'A genuine love of play',
      ],
      tone: 'lime',
      icon: 'gamepad-2',
    },
  ];

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

  const bulletList = (items, tone) => (
    <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 7 }}>
      {items.map((it) => (
        <li key={it} style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.45, color: 'var(--text-secondary)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <span style={{ flex: '0 0 auto', marginTop: 7, width: 5, height: 5, borderRadius: '50%', background: `var(--${tone})` }} />
          <span>{it}</span>
        </li>
      ))}
    </ul>
  );

  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>Careers</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' }}>
            Build The Future<br /><span style={{ color: 'var(--lavender)' }}>Of Learning.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', maxWidth: 480, marginBottom: 26 }}>
            We’re a small, ambitious learning design studio building curriculum, games, experiences, and software for learners who deserve better. Join us, and help build what’s next.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', flexDirection: mobile ? 'column' : 'row' }}>
            <Button as="a" href="#roles" onClick={scrollToRoles} variant="primary" size="lg" style={mobile ? { width: '100%' } : undefined}>See open roles</Button>
            <Button variant="outline" size="lg" onClick={() => go('Contact')} style={mobile ? { width: '100%' } : undefined}>Get in touch</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>

      {/* CULTURE STRIP */}
      <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}>How We Work Together</div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap: 24 }}>
          {culture.map(([icon, title, body]) => (
            <FeatureItem key={title} icon={icon} iconColor="var(--lavender)" title={title}>{body}</FeatureItem>
          ))}
        </div>
      </section>

      {/* OPEN ROLES */}
      <div id="roles">
        <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingBottom: mobile ? 44 : 60 }}>
          <window.Deco src="motifs/squiggle-purple.svg" w={70} anim="sh-wiggle" style={{ top: -8, right: 10 }} />
          <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : 34, textTransform: 'uppercase', lineHeight: 1, marginBottom: 24 }}>Open Roles</div>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : (tablet ? '1fr' : 'repeat(2,1fr)'), gap: 20 }}>
            {roles.map((r) => (
              <Card key={r.title} tone="white" bordered padding={26} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ flex: '0 0 auto', width: 46, height: 46, borderRadius: '50%', background: `var(--${r.tone})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name={r.icon} size={22} color="var(--haus-black)" />
                  </span>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 20 : 22, textTransform: 'uppercase', lineHeight: 1.05 }}>{r.title}</div>
                </div>

                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {r.tags.map((t) => (
                    <Badge key={t} tone="outline">{t}</Badge>
                  ))}
                </div>

                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-secondary)', margin: 0 }}>{r.summary}</p>

                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--haus-black)', margin: 0, fontWeight: 500 }}>{r.about}</p>

                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.02em', marginBottom: 10 }}>{r.doTitle}</div>
                  {bulletList(r.duties, r.tone)}
                </div>

                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.02em', marginBottom: 10 }}>{r.lookingTitle}</div>
                  {bulletList(r.looking, r.tone)}
                </div>

                <Button
                  as="a"
                  href={`mailto:hello@schoolhaus.xyz?subject=Application%3A%20${encodeURIComponent(r.title)}`}
                  variant="primary"
                  size="lg"
                  style={mobile ? { width: '100%', marginTop: 4 } : { alignSelf: 'flex-start', marginTop: 4 }}
                >
                  Apply
                </Button>
              </Card>
            ))}
          </div>
        </section>
      </div>

      {/* DON'T SEE YOUR ROLE */}
      <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 }}>Don’t see<br />your role?</div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.5, color: 'var(--haus-black)', margin: '12px 0 0', maxWidth: 520 }}>
              We’re always looking for people who care about building learning that matters. Send us a note and tell us what you’d bring to the studio.
            </p>
          </div>
          <Button as="a" href="mailto:hello@schoolhaus.xyz?subject=Application%3A%20General" variant="primary" size="lg" style={mobile ? { width: '100%' } : undefined}>Email us</Button>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { CareersScreen });