/* ContactScreen: inquiry form for prospective partners. */
const { Eyebrow, Button, Card, Input, Select, Checkbox, StickerNote, Icon } = window.SchoolhausDesignSystem_a5b1bb;

function ContactScreen() {
  const mobile = window.useIsMobile(760);
  const wrap = { maxWidth: 1280, margin: '0 auto', padding: mobile ? '0 20px' : '0 40px' };
  const [sent, setSent] = React.useState(false);
  const label = { fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, color: 'var(--haus-black)', marginBottom: 8, display: 'block' };
  const field = {
    fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--haus-black)',
    width: '100%', padding: '12px 16px', borderRadius: 'var(--radius-sm)',
    border: '1.5px solid var(--border-default)', background: 'var(--white)', outline: 'none',
  };
  const pairGrid = { display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 18, marginBottom: 18 };
  const trust = [
    ['shield-check', 'Privacy by design', 'Student-data privacy (FERPA & COPPA) considered from day one.'],
    ['accessibility', 'Accessible to all', 'Designed to meet WCAG 2.1 AA for every learner.'],
    ['lock', 'Secure by default', 'Modern security practices across everything we ship.'],
    ['badge-check', 'You own it', 'The content, code, and IP we create for you is yours.'],
  ];

  return (
    <div style={{ background: 'var(--haus-cream)' }}>
      <section className="sh-reveal" style={{ ...wrap, position: 'relative', paddingTop: mobile ? 24 : 40, paddingBottom: mobile ? 40 : 60, display: 'grid', gridTemplateColumns: mobile ? '1fr' : '0.9fr 1.1fr', gap: mobile ? 28 : 48, alignItems: 'start' }}>
        <window.Deco src="icons/starburst.svg" w={34} anim="sh-spin" style={{ top: 6, right: '46%' }} />
        {/* LEFT: pitch */}
        <div>
          <Eyebrow>Let's Build</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 40 : 58, lineHeight: 0.9, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: mobile ? '14px 0 16px' : '16px 0 20px' }}>
            Start a<br /><span style={{ color: 'var(--lavender)' }}>Conversation.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'var(--text-secondary)', maxWidth: 420, marginBottom: 28 }}>
            Tell us about your learners, your goals, and what you're dreaming up. We'll get back to you within two business days.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 28 }}>
            {[['mail', 'hello@schoolhaus.xyz'], ['map-pin', 'Austin, TX'], ['clock', 'Mon–Fri · 9am–6pm CT']].map(([icon, text]) => (
              <div key={text} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--lavender-soft)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                  <Icon name={icon} size={18} color="var(--haus-black)" />
                </span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 500 }}>{text}</span>
              </div>
            ))}
          </div>
          <div style={{ marginBottom: 28 }}>
            <Button as="a" href="https://calendly.com/imagoslabs/30min" target="_blank" rel="noopener noreferrer" variant="secondary" size="lg" style={{ width: mobile ? '100%' : 'auto' }}>Book a discovery call</Button>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', marginTop: 8 }}>Prefer to talk it through first? Grab a 30-minute intro call.</div>
          </div>
          <StickerNote tone="lime" rotate={-4} size={160}>Wonder more.</StickerNote>
        </div>

        {/* RIGHT: form */}
        <Card tone="white" bordered padding={mobile ? 20 : 32} shadow="sm" style={{ borderRadius: 'var(--radius-lg)' }}>
          {sent ? (
            <div style={{ textAlign: 'center', padding: '48px 12px' }}>
              <span style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--lime)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                <Icon name="check" size={32} color="var(--haus-black)" />
              </span>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 28, textTransform: 'uppercase', margin: '0 0 10px' }}>Message sent!</h2>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-secondary)', margin: '0 0 24px' }}>Thanks for reaching out. We'll be in touch within two business days.</p>
              <Button variant="outline" onClick={() => setSent(false)}>Send another</Button>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); window.scrollTo(0, 0); }}>
              <div style={pairGrid}>
                <Input label="First name" placeholder="Jane" required />
                <Input label="Last name" placeholder="Doe" required />
              </div>
              <div style={pairGrid}>
                <Input label="Work email" type="email" placeholder="jane@school.edu" required />
                <Input label="Organization" placeholder="Lincoln High School" />
              </div>
              <div style={pairGrid}>
                <Select label="I represent a…" options={['K–12 School', 'District', 'Higher Ed', 'Nonprofit', 'EdTech Company', 'Other']} placeholder="Select one" />
                <Select label="Estimated budget" options={['Under $25k', '$25k–$75k', '$75k–$150k', '$150k+', 'Not sure yet']} placeholder="Select range" />
              </div>
              <label style={{ display: 'block', marginBottom: 18 }}>
                <span style={label}>What can we help you build?</span>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 4 }}>
                  {['Curriculum', 'Games', 'Experiences', 'Software', 'Assessment', 'Strategy'].map((t) => (
                    <span key={t} style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.04em', textTransform: 'uppercase', padding: '8px 14px', borderRadius: 'var(--radius-pill)', border: '1.5px solid var(--border-default)', cursor: 'pointer', background: 'transparent' }}>{t}</span>
                  ))}
                </div>
              </label>
              <label style={{ display: 'block', marginBottom: 20 }}>
                <span style={label}>Tell us about your project</span>
                <textarea rows={4} placeholder="What are you dreaming up? Who are your learners?" style={{ ...field, resize: 'vertical', fontFamily: 'var(--font-body)' }} />
              </label>
              <div style={{ marginBottom: 24 }}>
                <Checkbox label="Send me occasional studio updates and Insights." />
              </div>
              <Button as="button" type="submit" variant="primary" size="lg" style={{ width: '100%' }}>Send inquiry</Button>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)', textAlign: 'center', margin: '14px 0 0' }}>We'll never share your information. Read our privacy policy.</p>
            </form>
          )}
        </Card>
      </section>

      {/* TRUST & COMPLIANCE */}
      <section className="sh-reveal" style={{ ...wrap, paddingBottom: mobile ? 48 : 64 }}>
        <div style={{ background: 'var(--lavender-soft)', borderRadius: 'var(--radius-lg)', padding: mobile ? '26px 24px' : '32px 40px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: mobile ? 22 : 24, textTransform: 'uppercase', marginBottom: 20 }}>Built On Trust</div>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap: mobile ? 18 : 24 }}>
            {trust.map(([icon, title, body]) => (
              <div key={title} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--haus-cream)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={icon} size={22} color="var(--haus-black)" />
                </span>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, textTransform: 'uppercase', lineHeight: 1.1 }}>{title}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.45, color: 'var(--text-secondary)' }}>{body}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { ContactScreen });