// Home page
function HomePage() {
  return (
    <div className="route-enter">
      <Hero />
      <ValuesMarquee />
      <DualPaths />
      <WhyNRX />
      <ResearchTeaser />
      <LearningTeaser />
      <OutcomesSection />
      <ApproachSection />
      <CTABanner />
    </div>
  );
}

function Hero() {
  return (
    <section style={{
      minHeight: '100vh', background: 'var(--bg)', color: 'var(--ink)',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      textAlign: 'center', padding: '7rem 40px 5rem',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Grid overlay — subtle teal lines on warm background */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: 'linear-gradient(rgba(4,78,82,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(4,78,82,0.04) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
      }}/>
      {/* Watermark logo — shows as dark teal on warm bg */}
      <img src="assets/logo.png" alt="" aria-hidden="true" style={{
        position: 'absolute', bottom: '-4%', right: '-4%', width: '42%',
        opacity: 0.06, pointerEvents: 'none',
      }}/>

      <div style={{position: 'relative', zIndex: 2, maxWidth: 900}}>
        {/* Eyebrow */}
        <div className="label" style={{
          justifyContent: 'center', color: 'var(--muted)', marginBottom: '2.5rem',
        }}>
          Est. 2024 · Tāmaki Makaurau / Aotearoa
        </div>

        {/* Headline */}
        <h1 className="display" style={{
          fontSize: 'clamp(2.2rem, 7vw, 7rem)', color: 'var(--ink)',
          lineHeight: 1.0, letterSpacing: '-0.02em', marginBottom: '2rem',
        }}>
          Ethical AI,{' '}
          <em style={{color: 'var(--accent)'}}>grounded in</em>
          {' '}research and practice.
        </h1>

        <p style={{
          fontSize: 'clamp(1rem, 1.5vw, 1.15rem)', color: 'var(--ink-2)',
          lineHeight: 1.8, maxWidth: 560, margin: '0 auto 3.5rem',
        }}>
          Research-backed advisory for organisations building AI with genuine integrity — and mentoring for the people stepping into purpose-driven tech careers.
        </p>

        <div style={{display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap'}}>
          <Link to="organisations" className="btn btn-primary">For Organisations <span className="arrow">→</span></Link>
          <Link to="professionals" className="btn btn-ghost">For Professionals <span className="arrow">→</span></Link>
        </div>

        {/* Stats */}
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 0, marginTop: '4rem',
          borderTop: '1px solid var(--hair)', paddingTop: '2.5rem',
        }}>
          {[
            ['20+', 'Years in ops & change'],
            ['MTF', 'Master of Technological Futures'],
            ['10', 'Expert interviews · thesis 2026'],
            ['21%', 'Of Māori report conversational te reo proficiency'],
            ['4', 'Countries · Aotearoa, Australia, South Africa, Brazil'],
          ].map(([n, label], i) => (
            <div key={n} style={{
              padding: '0 clamp(1rem, 3vw, 2.5rem)', textAlign: 'center',
              borderRight: i < 4 ? '1px solid var(--hair)' : 'none',
            }}>
              <span className="display" style={{
                fontSize: '2.8rem', color: 'var(--ink)',
                display: 'block', fontStyle: 'italic',
              }}>{n}</span>
              <p className="mono" style={{
                fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--muted)', marginTop: 6, maxWidth: 'none',
              }}>{label}</p>
            </div>
          ))}
        </div>
      </div>


    </section>
  );
}

function DualPaths() {
  const [hover, setHover] = useState(null);
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">Dual pathways · Ngā ara e rua</span>
            <h2 style={{marginTop: 8, maxWidth: '16ch'}}>Choose the path that fits where you are.</h2>
          </div>
          <p style={{maxWidth: '36ch', color:'var(--ink-2)'}}>
            The work moves between boardrooms and one-to-one mentoring. Same values, different rooms.
          </p>
        </div>

        <div className="path-cards">
          <PathCard
            side="A"
            kicker="For Organisations"
            title="Move from awareness to implementation."
            bullets={[
              'Map AI risk against Indigenous data sovereignty principles',
              'Build tikanga-based governance — real authority, not advisory panels',
              'Distinguish co-design from consultation, and embed the real thing',
              'Create structures that turn principles into practice that holds',
            ]}
            to="organisations"
            hovered={hover === 'A'}
            onEnter={() => setHover('A')}
            onLeave={() => setHover(null)}
          />
          <PathCard
            side="B"
            kicker="For Professionals"
            title="Step into tech and leadership with clarity."
            bullets={[
              'Navigate career transitions with a focused plan',
              'Build job-ready assets — CV, LinkedIn, portfolio',
              'Develop leadership skills that stick',
              'Move from study to industry impact',
            ]}
            to="professionals"
            accent="accent"
            hovered={hover === 'B'}
            onEnter={() => setHover('B')}
            onLeave={() => setHover(null)}
          />
        </div>
      </div>
    </section>
  );
}

function PathCard({ side, kicker, title, bullets, to, accent, hovered, onEnter, onLeave }) {
  const color = accent === 'accent' ? 'var(--accent)' : 'var(--primary)';
  return (
    <div
      onMouseEnter={onEnter} onMouseLeave={onLeave}
      style={{
        padding: 48,
        borderRight: side === 'A' ? '1px solid var(--hair)' : 'none',
        background: hovered ? 'var(--bg-2)' : 'var(--bg)',
        transition: 'background .3s',
        position: 'relative',
        minHeight: 520,
        display:'flex', flexDirection:'column',
      }}
    >
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 40}}>
        <span className="label" style={{color}}>{side} — {kicker}</span>
        <span className="mono" style={{fontSize: 10, color:'var(--muted)'}}>0{side === 'A' ? 1 : 2} / 02</span>
      </div>
      <h3 style={{fontSize: 'var(--step-3xl)', maxWidth: '14ch', marginBottom: 40, color}}>{title}</h3>
      <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 12, marginBottom: 40, flex: 1}}>
        {bullets.map((b, i) => (
          <li key={i} style={{display:'flex', gap: 16, alignItems:'baseline', borderTop:'1px solid var(--hair)', paddingTop: 12}}>
            <span className="mono" style={{fontSize: 10, color:'var(--muted)'}}>0{i+1}</span>
            <span style={{fontSize: 15}}>{b}</span>
          </li>
        ))}
      </ul>
      <Link to={to} className="btn btn-ghost" style={{alignSelf:'flex-start'}}>
        Explore {kicker.toLowerCase()} <span className="arrow">→</span>
      </Link>
    </div>
  );
}

function WhyNRX() {
  const pillars = [
    { label: '01', title: 'Thesis-backed', body: 'Founded on a Master\'s thesis: ten expert interviews, kaupapa Māori analysis, five interconnected findings.' },
    { label: '02', title: 'Tikanga-grounded', body: 'Governance built on tikanga — not a generic ethics framework adapted from somewhere else.' },
    { label: '03', title: 'Practice-focused', body: 'The gap is not awareness. Every engagement builds structures, not just recommendations.' },
    { label: '04', title: 'Māori-led authority', body: 'Co-design embedded from the start. Community authority that carries real weight over decisions.' },
  ];
  return (
    <section style={{background:'var(--bg-2)'}}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">Why NRX Auaha</span>
            <h2 style={{marginTop: 8, maxWidth: '18ch'}}>
              Culture-centred. <em style={{color:'var(--accent)'}}>Evidence-based.</em> Action-oriented.
            </h2>
          </div>
        </div>

        <div className="r-grid-4">
          {pillars.map((p, i) => (
            <div key={p.label} style={{
              padding: '32px 24px 40px 0',
              borderRight: i < 3 ? '1px solid var(--hair)' : 'none',
              paddingLeft: i === 0 ? 0 : 24,
            }}>
              <div className="mono" style={{fontSize: 11, color:'var(--muted)', letterSpacing:'0.14em', marginBottom: 40}}>{p.label}</div>
              <h4 style={{fontSize: 'var(--step-xl)', color:'var(--ink)', marginBottom: 12}}>{p.title}</h4>
              <p style={{fontSize: 14, color:'var(--ink-2)'}}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ResearchTeaser() {
  const themes = [
    { n:'01', t:'AI as a crossroads of risk and opportunity', sub:'For te reo Māori, the stakes are different — and less understood.' },
    { n:'02', t:'Data sovereignty is a legal obligation, not a preference', sub:'Māori data requires classification before any AI system touches it.' },
    { n:'03', t:'The gap between principle and practice', sub:'Most organisations know what they should do. The challenge is implementation.' },
    { n:'04', t:'The double digital divide', sub:'Māori communities face two simultaneous barriers — access to technology, and the risk that the technology itself perpetuates harm.' },
  ];
  return (
    <section>
      <div className="container">
        <div className="research-grid">
          <div style={{paddingTop: 8}}>
            <div style={{
              aspectRatio: '4/5', borderRadius: 4,
              background: 'url("assets/thesis-writing.jpg") center/cover no-repeat',
              display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
              padding: 40, position: 'relative', overflow: 'hidden',
            }}>
              {/* Dark gradient at the bottom only — keeps text readable without a colour cast */}
              <div style={{
                position: 'absolute', inset: 0, pointerEvents: 'none',
                background: 'linear-gradient(to bottom, transparent 30%, rgba(4,22,24,0.82) 100%)',
              }}/>
              <div style={{position: 'relative', zIndex: 1}}>
                <div className="mono" style={{fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em', marginBottom: 24}}>MASTER OF TECHNOLOGICAL FUTURES · 2026</div>
                <div className="display" style={{fontSize: 'clamp(1.6rem, 3vw, 2.4rem)', color: 'var(--bg)', lineHeight: 1.15, marginBottom: 24, fontStyle: 'italic'}}>
                  Ethical AI and Indigenous Storytelling
                </div>
                <div style={{height: 1, background: 'rgba(239,230,218,0.15)', marginBottom: 20}}/>
                <div className="mono" style={{fontSize: 11, color: 'rgba(239,230,218,0.45)'}}>Nadine Young · AcademyEX · Submitted April 2026</div>
              </div>
            </div>
            <div style={{
              marginTop: 24, padding: 24,
              background:'var(--bg-2)', border:'1px solid var(--hair)', borderRadius: 10,
            }}>
              <div className="mono" style={{fontSize: 10, color:'var(--muted)', marginBottom: 8}}>SUBMITTED APRIL 2026</div>
              <div style={{fontFamily:'var(--f-display)', fontSize: 18, lineHeight: 1.3, marginBottom: 12}}>
                Ethical AI and Indigenous Storytelling
              </div>
              <div className="mono" style={{fontSize: 11, color:'var(--muted)'}}>
                Master of Technological Futures · AcademyEX · Nadine Young
              </div>
            </div>
          </div>
          <div>
            <span className="label">Research · Rangahau</span>
            <h2 style={{marginTop: 12, marginBottom: 24, maxWidth: '20ch'}}>
              The research is done. <em>Now comes the work.</em>
            </h2>
            <p style={{fontSize: 'var(--step-lg)', color:'var(--ink-2)', marginBottom: 28, lineHeight: 1.6}}>
              A completed Master's thesis on ethical AI and Indigenous data sovereignty — ten expert interviews, twenty survey responses, five interconnected findings. The consultancy is the practical implementation of what the research found was missing.
            </p>
            <div style={{display:'flex', flexDirection:'column', gap: 0, borderTop:'1px solid var(--hair)', marginBottom: 32}}>
              {themes.map(e => (
                <div key={e.n} style={{
                  display:'grid', gridTemplateColumns:'48px 1fr',
                  padding:'20px 0', borderBottom:'1px solid var(--hair)',
                  alignItems:'start', gap: 20,
                }}>
                  <span className="mono" style={{fontSize: 11, color:'var(--accent)', paddingTop: 3}}>{e.n}</span>
                  <div>
                    <div style={{fontSize: 17, fontFamily:'var(--f-display)', marginBottom: 4}}>{e.t}</div>
                    <div style={{fontSize: 13, color:'var(--muted)'}}>{e.sub}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{display:'flex', gap: 12, flexWrap:'wrap'}}>
              <Link to="thesis" className="btn btn-primary">
                Read the research <span className="arrow">→</span>
              </Link>
              <Link to="organisations" className="btn btn-ghost">
                See how this informs our work <span className="arrow">→</span>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function LearningTeaser() {
  const circles = [
    { n:'01', title:'Transformation Journey', length:'6 weeks · self-paced', price:'NZ$300', status:'Available now', live: true },
    { n:'02', title:'Leadership Circle', length:'6 weeks · self-paced', price:'TBA', status:'Coming soon', live: false },
    { n:'03', title:'Circle 03', length:'In development', price:'TBA', status:'Being built', live: false },
  ];
  return (
    <section style={{background:'var(--bg-2)'}}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">Te Huinga Panoni · Transformation Circle</span>
            <h2 style={{marginTop: 8, maxWidth: '18ch'}}>Self-paced programmes, <em>built around community</em>.</h2>
          </div>
          <Link to="circle" className="btn btn-ghost">See all circles <span className="arrow">→</span></Link>
        </div>

        <div className="r-grid-3" style={{gap:24}}>
          {circles.map(c => (
            <Link to="circle" key={c.n} style={{
              background: 'var(--bg)',
              color: 'var(--ink)',
              border: c.live ? '2px solid var(--ink)' : '1px solid var(--hair)',
              borderRadius: 12, overflow:'hidden',
              display:'flex', flexDirection:'column',
              opacity: c.live ? 1 : 0.65,
              textDecoration: 'none',
            }}>
              <div style={{padding: 28}}>
                <div style={{display:'flex', justifyContent:'space-between', marginBottom: 20}}>
                  <span className="mono" style={{fontSize: 10, color: 'var(--muted)'}}>{c.n} · {c.length}</span>
                  <span className="mono" style={{fontSize: 10, color: c.live ? 'var(--accent)' : 'var(--muted)'}}>{c.status}</span>
                </div>
                <h4 style={{fontSize:'var(--step-xl)', marginBottom: 20, color: 'var(--ink)'}}>{c.title}</h4>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop: 16, borderTop: '1px solid var(--hair)'}}>
                  <span style={{fontFamily:'var(--f-display)', fontSize: 26, color: c.live ? 'var(--ink)' : 'var(--muted)'}}>{c.price}</span>
                  <span className="mono" style={{fontSize: 11, color: c.live ? 'var(--accent)' : 'var(--muted)'}}>Explore →</span>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function OutcomesSection() {
  const outcomes = [
    'Stronger leadership capability — practical skills for leading teams and managing change',
    'Career transformation with clarity and confidence — job-ready assets and a clear roadmap',
    'Smooth study-to-industry transitions — tailored support into tech and digital careers',
    'Teams confident in ethical AI — awareness, governance, and trust',
    'Better business outcomes — faster, fairer, more inclusive customer and employee experiences',
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="label">Outcomes · Ngā hua</span>
            <h2 style={{marginTop: 8, maxWidth: '18ch'}}>
              What we leave behind.
            </h2>
          </div>
          <p style={{maxWidth: '34ch', color:'var(--ink-2)'}}>
            Every engagement includes a plan, milestones, and measurable reporting on impact. No vibes-based consulting.
          </p>
        </div>
        <ol style={{listStyle:'none', padding:0, margin:0, counterReset:'o', borderTop:'1px solid var(--hair)'}}>
          {outcomes.map((o, i) => (
            <li key={i} className="outcome-row">
              <span className="mono" style={{fontSize: 12, color:'var(--accent)'}}>→ 0{i+1}</span>
              <h4 style={{fontSize:'var(--step-xl)', fontFamily:'var(--f-display)'}}>{o.split(' — ')[0]}</h4>
              <p style={{fontSize: 15, color:'var(--ink-2)'}}>{o.split(' — ')[1]}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function ApproachSection() {
  return (
    <section>
      <div className="container approach-grid">
        <div>
          <span className="label">Approach · Ā mātou tikanga</span>
          <h2 style={{marginTop: 12, marginBottom: 24}}>
            Tradition <em>and</em> technology, in the same sentence.
          </h2>
          <p style={{fontSize:'var(--step-lg)', color:'var(--ink-2)', marginBottom: 20}}>
            The mahi is guided by whakapapa (connection), tika (integrity), manaakitanga (care), and mana (respect).
          </p>
          <p style={{color:'var(--ink-2)'}}>
            We step into every collaboration with aroha and purpose — listening first, honouring every story, and creating change that empowers people to grow, lead, and thrive.
          </p>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap: 0, borderTop:'1px solid var(--hair)'}}>
          {[
            ['Whakapapa', 'Connection', 'Every system has lineage. We map it.'],
            ['Tika', 'Integrity', 'The right thing, especially when it\'s slower.'],
            ['Manaakitanga', 'Care', 'For data, for people, for the future users who aren\'t in the room.'],
            ['Mana', 'Respect', 'Authority held without asserting itself. The aim.'],
          ].map(([mi, en, note], i) => (
            <div key={mi} className="values-row">
              <div className="display" style={{fontSize: 28, fontStyle:'italic', color:'var(--accent)'}}>{mi}</div>
              <div className="display" style={{fontSize: 22}}>{en}</div>
              <div style={{fontSize: 14, color:'var(--ink-2)'}}>{note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTABanner() {
  return (
    <section style={{background:'var(--bg-2)', padding: '120px 0'}}>
      <div className="container cta-grid">
        <div>
          <span className="label">Haere mai · Start here</span>
          <h2 style={{marginTop: 16, fontSize:'var(--step-4xl)', maxWidth: '14ch'}}>
            Ready for a first kōrero?
          </h2>
        </div>
        <div>
          <p style={{color:'var(--ink-2)', marginBottom: 24}}>
            A 30-minute intro call. No pitch. We'll talk about what you're building, or where you'd like to take your career, and see if there's a fit.
          </p>
          <Link to="contact" className="btn btn-primary">
            Book an intro call <span className="arrow">→</span>
          </Link>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage, CTABanner });