/* PressScreen: "Press & Brand Kit": logos, colors, typography, and boilerplate for press + partners. */
const { Eyebrow, Button, Card, StickerNote, Icon, Badge } = window.SchoolhausDesignSystem_a5b1bb;

function PressScreen() {
  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 pressMailto = 'mailto:hello@schoolhaus.xyz?subject=Press%20Inquiry';

  const logos = [
    { file: 'sh-mark', label: 'Mark', dark: false },
    { file: 'sh-mark-cream', label: 'Mark (Cream)', dark: true },
    { file: 'sh-wordmark', label: 'Wordmark', dark: false },
    { file: 'sh-wordmark-cream', label: 'Wordmark (Cream)', dark: true },
    { file: 'sh-lockup-horizontal', label: 'Horizontal Lockup', dark: false },
    { file: 'sh-lockup-horizontal-cream', label: 'Horizontal Lockup (Cream)', dark: true },
    { file: 'sh-lockup-stacked', label: 'Stacked Lockup', dark: false },
    { file: 'sh-lockup-stacked-cream', label: 'Stacked Lockup (Cream)', dark: true },
    { file: 'sh-favicon', label: 'Favicon', dark: false },
  ];

  const colors = [
    ['Haus Cream', '#F7F4EC', '--haus-cream', true],
    ['Haus Black', '#0B0B0B', '--haus-black', false],
    ['Lavender', '#B69CF6', '--lavender', false],
    ['Lime', '#D8E96A', '--lime', true],
    ['Green', '#34C759', '--green', false],
    ['Pink', '#F7B6CE', '--pink', true],
    ['Orange', '#FF5A1F', '--orange', false],
  ];

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

  const downloadLinkStyle = {
    fontFamily: 'var(--font-body)',
    fontWeight: 700,
    fontSize: 12.5,
    letterSpacing: '0.02em',
    color: 'var(--haus-black)',
    textDecoration: 'none',
    borderBottom: '1.5px solid var(--haus-black)',
    paddingBottom: 1,
  };

  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>Press &amp; Brand</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' }}>
            Press &amp; <span style={{ color: 'var(--lavender)' }}>Brand Kit.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', maxWidth: 480, marginBottom: 26 }}>
            Download our logos, colors, and guidelines, and use them well. For interviews, quotes, or anything else, reach our press team directly.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', flexDirection: mobile ? 'column' : 'row' }}>
            <Button as="a" href={pressMailto} variant="primary" size="lg" style={mobile ? { width: '100%' } : undefined}>Email press</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}>Use us well.</StickerNote>
          <StickerNote tone="lime" rotate={5} size={mobile ? 140 : 150}>On brand.</StickerNote>
        </div>
      </section>

      {/* LOGOS */}
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingBottom: mobile ? 40 : 56 }}>
        <div style={sectionLabel}>Logos</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : 34, textTransform: 'uppercase', lineHeight: 1, margin: '0 0 24px' }}>
          Logos
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : (tablet ? 'repeat(2,1fr)' : 'repeat(3,1fr)'), gap: 20 }}>
          {logos.map(({ file, label, dark }) => (
            <Card
              key={file}
              tone={dark ? 'dark' : 'white'}
              bordered={!dark}
              padding={0}
              style={{
                overflow: 'hidden',
                background: dark ? 'var(--haus-black)' : 'var(--white)',
                border: dark ? 'none' : '1.5px solid var(--border-default)',
              }}
            >
              <div style={{ height: 140, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
                <img
                  src={`assets/brand/logos/${file}.svg`}
                  alt={`Schoolhaus ${label} logo`}
                  style={{ maxHeight: 64, maxWidth: '80%' }}
                />
              </div>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: 12,
                padding: '14px 20px',
                borderTop: dark ? '1px solid rgba(247,244,236,0.15)' : '1px solid var(--border-default)',
              }}>
                <span style={{
                  fontFamily: 'var(--font-body)',
                  fontWeight: 600,
                  fontSize: 13.5,
                  color: dark ? 'var(--haus-cream)' : 'var(--haus-black)',
                }}>{label}</span>
                <a
                  href={`assets/brand/logos/${file}.svg`}
                  download
                  style={{
                    ...downloadLinkStyle,
                    color: dark ? 'var(--lavender)' : 'var(--haus-black)',
                    borderBottom: dark ? '1.5px solid var(--lavender)' : '1.5px solid var(--haus-black)',
                  }}
                >
                  Download SVG
                </a>
              </div>
            </Card>
          ))}
        </div>
        <div style={{ marginTop: 28, background: 'var(--white)', border: '1.5px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: mobile ? '20px 22px' : '24px 28px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, textTransform: 'uppercase', lineHeight: 1.1, marginBottom: 8 }}>Usage</div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-secondary)', margin: 0, maxWidth: 720 }}>
            Give the logo clear space to breathe. Don’t stretch, recolor, rotate, or add effects (shadows, outlines, gradients). Use the cream variants on dark backgrounds and the standard variants on light backgrounds.
          </p>
        </div>
      </section>

      {/* COLORS */}
      <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}>Colors</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : 34, textTransform: 'uppercase', lineHeight: 1, margin: '0 0 24px' }}>
          Colors
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2,1fr)' : (tablet ? 'repeat(3,1fr)' : 'repeat(4,1fr)'), gap: 18 }}>
          {colors.map(([name, hex, cssVar, needsBorder]) => (
            <div key={cssVar}>
              <div style={{
                height: 88,
                borderRadius: 'var(--radius-md)',
                background: `var(${cssVar})`,
                border: needsBorder ? '1.5px solid var(--border-default)' : 'none',
                marginBottom: 12,
              }} />
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, textTransform: 'uppercase', lineHeight: 1.1, marginBottom: 4 }}>{name}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-secondary)', marginBottom: 2 }}>{hex}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--grey)' }}>var({cssVar})</div>
            </div>
          ))}
        </div>
      </section>

      {/* TYPOGRAPHY */}
      <section className="sh-reveal" style={{ ...wrap, paddingBottom: mobile ? 44 : 60 }}>
        <div style={sectionLabel}>Typography</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : 34, textTransform: 'uppercase', lineHeight: 1, margin: '0 0 24px' }}>
          Typography
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Card tone="white" bordered padding={mobile ? 22 : 32}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, marginBottom: 18 }}>
              <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Archivo Black</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--grey)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Display</span>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: mobile ? 26 : 40, lineHeight: 1.05 }}>
              Learning Designed Differently.
            </div>
          </Card>
          <Card tone="white" bordered padding={mobile ? 22 : 32}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, marginBottom: 18 }}>
              <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Inter</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--grey)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Text / UI</span>
            </div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: mobile ? 16 : 18, lineHeight: 1.6, color: 'var(--text-secondary)', margin: 0, maxWidth: 640 }}>
              We blend learning science, playful design, and modern technology to create learning that actually works, for real learners, in the real world.
            </p>
          </Card>
        </div>
      </section>

      {/* BOILERPLATE */}
      <section className="sh-reveal" style={{ ...wrap, paddingBottom: mobile ? 56 : 72 }}>
        <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)' }}>Company Boilerplate</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 28 : (tablet ? 36 : 42), lineHeight: 1.05, textTransform: 'uppercase', margin: '0 0 22px', maxWidth: 900 }}>
            Copy &amp; paste this for <span style={{ color: 'var(--lavender)' }}>your story.</span>
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'rgba(247,244,236,0.88)', maxWidth: 720, margin: '0 0 14px' }}>
            Schoolhaus is a learning design studio partnering with schools, districts, and institutions to design the future of learning, across curriculum, educational games, learning experiences, and learning software. Learning Designed Differently.
          </p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.6, color: 'rgba(247,244,236,0.65)', margin: '0 0 30px' }}>
            Founded by Ron Roberts II. Based in Austin, TX.
          </p>
          <Button as="a" href={pressMailto} variant="secondary" size="lg" style={mobile ? { width: '100%' } : undefined}>Email press</Button>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { PressScreen });