/* global React, useReveal */
/* global AylaRouter */

function goToFounder(setRoute, id) {
  return (e) => {
    e.preventDefault();
    AylaRouter.navigate('team', setRoute, { smoothScroll: true, hash: id });
  };
}

function About({ setRoute }){
  useReveal();
  return (
    <div className="page">
      {/* HERO & EDITORIAL IMAGE */}
      <section className="shell about-hero-editorial">
        <div className="about-hero-text">
          <span className="eyebrow">Our philosophy</span>
          <h1 className="about-hero-title">
            What Ayla is for,<br/>
            and how we <span className="it">got here.</span>
          </h1>
          <div className="reveal">
            <p className="about-hero-lede">
              Ayla began as a private frustration before it was a company. 
              We're two friends, a public health researcher and an AI engineer,  who got tired of watching women's health get treated as an afterthought and decided to build the companion we'd been looking for.
            </p>
          </div>
        </div>
        <div className="about-hero-vis reveal" style={{ transitionDelay: '.08s' }}>
          <img 
            src="assets/philosophy-image.png" 
            alt="Philosophy editorial" 
            style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 24, display: 'block' }} 
          />
        </div>
      </section>

      {/* ORIGIN */}
      <section className="section shell">
        <div className="split">
          <div className="copy reveal">
            <span className="eyebrow">How it began</span>
            <h2 style={{marginTop:18}}>A shared <span className="it">frustration,</span> then a plan.</h2>
          </div>
          <div className="reveal" style={{maxWidth: 560, transitionDelay: '.15s'}}>
            <p style={{fontSize: 18, lineHeight: 1.65, color:'var(--ink)', margin:'0 0 22px'}}>
              Ayla was born from a shared passion for women's health and the technology that
              should serve it. Our founders,{' '}
              <a className="text-link" href={`${AylaRouter.pathFor('team')}#ayesha-hafeez`} onClick={goToFounder(setRoute, 'ayesha-hafeez')}>Ayesha</a>
              {' '}and{' '}
              <a className="text-link" href={`${AylaRouter.pathFor('team')}#tania-tahooni`} onClick={goToFounder(setRoute, 'tania-tahooni')}>Tania</a>, met around their
              mutual interest in building better support systems for women navigating PMOS,
              hormonal imbalance and chronic inflammation.
            </p>
            <p style={{fontSize: 18, lineHeight: 1.65, color:'var(--ink-2)', margin:'0 0 22px'}}>
              What they found, again and again, was the same gap: fragmented care, 
              overwhelming information, and wellness tools that rarely reflected 
              the realities of women's hormonal health. Ayla was built to offer something different; 
              science-backed guidance, personalized support, and a calmer way to navigate it all.
            </p>
            <a className="btn btn-ghost" href={AylaRouter.pathFor('team')} style={{marginTop: 8}}
               onClick={(e)=>{e.preventDefault(); setRoute && setRoute('team', { smoothScroll: true });}}>
              Meet the founders <span className="arr">→</span>
            </a>
          </div>
        </div>
      </section>

      {/* VISION — full-bleed statement */}
      <section className="shell">
        <div className="reveal" style={{
          background:'var(--ivory)',
          border:'1px solid var(--hair)',
          borderRadius: 28,
          padding:'clamp(48px, 7vw, 100px)',
          position:'relative', overflow:'hidden',
        }}>
          <div style={{
            position:'absolute', right:-80, top:-80, width: 320, height: 320, borderRadius:'50%',
            background:'radial-gradient(circle, var(--lavender), transparent 70%)', opacity:.45
          }}/>
          <span className="eyebrow" style={{position:'relative'}}>Our vision</span>
          <p className="serif" style={{
            position:'relative',
            fontSize:'clamp(30px, 4.2vw, 56px)',
            lineHeight: 1.15, letterSpacing:'-0.018em',
            margin:'18px 0 0', maxWidth: 980, fontWeight: 500,
          }}>
            A world where every woman feels <span className="it">seen, understood,</span>
            <span> and empowered to take charge of her hormonal health, </span>
            <span className="it">with clarity, compassion and confidence.</span>
          </p>
        </div>
      </section>

      {/* MISSION */}
      <section className="section shell">
        <div className="split">
          <div className="copy reveal">
            <span className="eyebrow">Our mission</span>
            <h2 style={{marginTop:18}}>To close the gap in <span className="it">women's health.</span></h2>
          </div>
          <div className="reveal" style={{maxWidth: 560}}>
            <p style={{fontSize: 18, lineHeight: 1.65, color:'var(--ink)', margin: 0}}>
              Ayla provides personalised, science-backed tools and guidance to help women
              understand and manage <b>hormonal imbalance</b>, <b>cycle irregularity</b>,
              and <b>chronic inflammation</b>. Through technology, education and culturally
              rooted care, we want holistic wellness to feel accessible, informed, and
              genuinely inclusive. Not a luxury, and not a guess.
            </p>
          </div>
        </div>
      </section>

      {/* CORE VALUES */}
      <section className="section shell">
        <div className="section-head reveal" style={{marginBottom: 40}}>
          <h2>Four <span className="it">values</span> we build by.</h2>
          <p>Working principles we return to when a design decision
             is genuinely hard, and they are, often.</p>
        </div>
        <div className="principles reveal">
          <div className="principle">
            <div className="num">i.</div>
            <h3>Personalised empowerment.</h3>
            <p>No two cycles are the same and no two lives are. Ayla adapts to the
               woman in front of it (her phase, her condition, her context) so she
               stays in the driving seat of her own care.</p>
          </div>
          <div className="principle">
            <div className="num">ii.</div>
            <h3>Compassionate technology.</h3>
            <p>The tools should feel human. Calm, intuitive, never clinical or
               alarmist. We design Ayla to be the friend who happens to have read
               the paper, not the dashboard that demands you fill it.</p>
          </div>
          <div className="principle">
            <div className="num">iii.</div>
            <h3>Root-cause thinking.</h3>
            <p>Symptom relief is a start; understanding is the point. We help women
               explore the <em>why</em> behind what they're experiencing, so the
               choices they make hold up beyond a single cycle.</p>
          </div>
          <div className="principle">
            <div className="num">iv.</div>
            <h3>Cultural sensitivity &amp; inclusion.</h3>
            <p>Women's experiences are not monolithic, and neither is care. We
               build Ayla for the diversity of bodies, beliefs and lives it will
               meet, with room for everyone to feel respected and heard.</p>
          </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">If any of this resonates</span>
          <h2 style={{marginTop: 18, marginBottom: 22}}>
            Care that finally <span className="it">listens back.</span>
          </h2>
          <p style={{color:'var(--ink-2)', fontSize: 17, maxWidth: 520, margin:'0 auto 32px'}}>
            We'll write when Ayla opens, and send the occasional note from our
            research desk in the meantime. Nothing more.
          </p>
          <div style={{display:'inline-flex', gap: 12, flexWrap:'wrap', justifyContent:'center'}}>
            <a className="btn" href={AylaRouter.pathFor('waitlist')}
               onClick={(e)=>{e.preventDefault(); setRoute && setRoute('waitlist', { smoothScroll: true });}}>
              Get the Cycle Guide <span className="arr">→</span>
            </a>
            <a className="btn btn-ghost" href={AylaRouter.pathFor('team')}
               onClick={(e)=>{e.preventDefault(); setRoute && setRoute('team', { smoothScroll: true });}}>
              Meet the founders
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.About = About;