/* global React, useReveal */
/* global AylaRouter */
function Team({ setRoute }) {
  useReveal();
  return (
    <div className="page">
      {/* HERO */}
      <section className="shell about-hero team-hero">
        <div className="team-hero-title">
          <span className="eyebrow">The founders</span>
          <h1>
            Two women, one <span className="it">stubborn</span><br />
            question about <span className="it">female health.</span>
          </h1>
        </div>
        <p className="lede reveal">Ayla is built by               
         Ayesha Hafeez and Tania Tahooni, an AI engineer and a public health researcher who met around the same frustration and decided to do something about it.
        </p>
      </section>

      {/* FOUNDERS DIRECTORY */}
      <section className="section shell">
        <div className="split" style={{ alignItems: 'start' }}>
          
          {/* FOUNDER 1 — AYESHA */}
          <div id="ayesha-hafeez" className="founder-bio">
            <div className="founder-bio-thumb reveal">
              <img src="assets/ayesha-headshot-cropped.png" alt="Ayesha Hafeez" />
            </div>
            <div className="copy reveal" style={{ transitionDelay: '.08s' }}>
              <span className="eyebrow">Co-founder · product &amp; data</span>
              <h2 style={{ marginTop: 18 }}>Ayesha Hafeez</h2>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink)', margin: '18px 0' }}>
                Ayesha holds a Bachelor's in Computer Engineering from the <b>American
                University of Sharjah</b> and a Master's in Analytics from the
                <b> University of Toronto</b>. Her work sits at the intersection of AI
                strategy and product, with a focus on healthcare delivery.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', margin: '0 0 18px' }}>
                Deeply motivated by how poorly the system serves women, she builds data-driven
                tools that are personalised, accessible and quietly powerful. She's convinced
                there is enormous untapped potential in healthcare data to close real gaps
                in care.
              </p>
              <div className="stats" style={{ marginTop: 28 }}>
                <div className="stat">
                  <div className="n">MEng</div>
                  <div className="l">Analytics, UofT</div>
                </div>
                <div className="stat">
                  <div className="n">BSc</div>
                  <div className="l">Computer Engineering, AUS</div>
                </div>
              </div>
            </div>
          </div>

          {/* FOUNDER 2 — TANIA */}
          <div id="tania-tahooni" className="founder-bio">
            <div className="founder-bio-thumb reveal" style={{ transitionDelay: '.15s' }}>
              <img src="assets/tania-headshot-cropped.png" alt="Tania Tahooni" />
            </div>
            <div className="copy reveal" style={{ transitionDelay: '.22s' }}>
              <span className="eyebrow">Co-founder · public health</span>
              <h2 style={{ marginTop: 18 }}>Tania Tahooni</h2>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink)', margin: '18px 0' }}>
                Tania is a public health professional with a Bachelor of Science in Health
                Sciences from <b>Simon Fraser University</b> and a Master of Science in Public
                Health from the <b>London School of Hygiene and Tropical Medicine</b>,
                specialising in environmental and hormonal health.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', margin: '0 0 18px' }}>
                Her MSc thesis examined the environmental determinants of polyendocrine metabolic ovarian
                syndrome (PMOS), looking at how outside factors quietly shape the development
                and management of the condition.
              </p>
              <div className="stats" style={{ marginTop: 28 }}>
                <div className="stat">
                  <div className="n">MSc</div>
                  <div className="l">Public Health, LSHTM</div>
                </div>
                <div className="stat">
                  <div className="n">BSc</div>
                  <div className="l">Health Sciences, SFU</div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </section>

      {/* JOINT QUOTE */}
      <section className="section shell">
        <div className="reveal" style={{
          background: 'var(--ivory)',
          border: '1px solid var(--hair)',
          borderRadius: 28,
          padding: 'clamp(40px, 6vw, 80px)',
          display: 'grid', gridTemplateColumns: '1fr', gap: 28,
          position: 'relative', overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute', right: -60, top: -60, width: 240, height: 240, borderRadius: '50%',
            background: 'radial-gradient(circle, var(--lavender), transparent 70%)', opacity: .4
          }} />
          <span className="eyebrow">A note from the founders</span>
          <p className="serif" style={{
            fontSize: 'clamp(24px, 3vw, 38px)', lineHeight: 1.3, letterSpacing: '-0.012em', margin: 0, maxWidth: 880
          }}>
            "We started Ayla because we both have PMOS, and for years navigated it alone. Often dismissed
            in appointments, or left more overwhelmed than informed. We're building the support we never got,
            so women can understand their bodies and stay attuned to what they need."
          </p>
          {/* <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginTop: 10, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--lavender)' }} />
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>Ayesha Hafeez</div>
                <div style={{ fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--ink-2)' }}>Co-founder</div>
              </div>
            </div>
              <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--rose)' }} />
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>Tania Tahooni</div>
                <div style={{ fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--ink-2)' }}>Co-founder</div>
              </div>
            </div>
          </div> */}
        </div>
      </section>

      {/* CLOSING */}
      <section className="section shell" style={{ paddingBottom: 40 }}>
        <div className="reveal" style={{
          maxWidth: 760, margin: '0 auto', textAlign: 'center'
        }}>
          <span className="eyebrow">Where this is going</span>
          <h2 style={{ marginTop: 18, marginBottom: 22 }}>
            Read the <span className="it">philosophy.</span>
          </h2>
          <p style={{ color: 'var(--ink-2)', fontSize: 17, maxWidth: 520, margin: '0 auto 32px' }}>
            The longer version of why we're building Ayla, and what we refuse to do
            in the name of wellness.
          </p>
          <div style={{ display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
            <a className="btn" href={AylaRouter.pathFor('about')}
            onClick={(e) => {e.preventDefault();setRoute && setRoute('about', { smoothScroll: true });}}>
              Read the philosophy <span className="arr">→</span>
            </a>
            <a className="btn btn-ghost" href={AylaRouter.pathFor('waitlist')}
            onClick={(e) => {e.preventDefault();setRoute && setRoute('waitlist', { smoothScroll: true });}}>
              Get the Cycle Guide
            </a>
          </div>
        </div>
      </section>
    </div>);

}

window.Team = Team;