// Inner pages: Organisations, Professionals, Circle

const ORG_QUESTIONS = [
  { n:'01', q:'Do you know what the tool is doing with your input?', a:'When you type te reo Māori into an AI tool, that input may be stored and used to improve the model. Many widely used AI tools were trained on Māori language content collected without community knowledge or consent. Ask: Does this tool have a clear data policy? Was it trained with Māori community consent?' },
  { n:'02', q:'Is the output correct — or just confident?', a:'AI tools sound certain even when they are wrong. For those reconnecting with their language, a mistranslation can fill gaps left by colonisation with something that feels right but is not grounded in anything real. Always validate with a fluent speaker before using or sharing output.' },
  { n:'03', q:'Is what you are sharing noa, tapu, or rāhui?', a:'Not all Māori data is the same. Noa is publicly available and can be used with care. Tapu is sensitive cultural data that requires proper authority. Rāhui is sacred knowledge — whakapapa, medicines, family-held knowledge — that should never be shared with AI systems. If you are unsure which category something falls into, that uncertainty is a signal to pause.' },
  { n:'04', q:'Are you using AI as a bridge — or letting it become the destination?', a:'AI can make te reo more accessible and reduce the barrier of not knowing where to begin. But it cannot replace the warmth of a person, a marae, or a kaumātua. If it is helping you get to those things, it is working. If it is becoming a substitute for them, that is worth questioning.' },
  { n:'05', q:'Are you informed enough to push back if something feels wrong?', a:'You do not need to be a technologist — but you do need enough understanding to notice when something does not feel right, and to make decisions about what you share. Disengaging from AI entirely is not a safe option. These systems will shape how te reo Māori is encountered whether or not you are involved. Engage with your eyes open.' },
];

const ORG_RECOMMENDED = [
  { name:'Te Aka Māori Dictionary', role:'The most trusted reference for te reo Māori', url:'https://maoridictionary.co.nz' },
  { name:'Kahu Code', role:'Māori-owned AI translation built with community oversight', url:'https://kahuco.de' },
  { name:'Taiuru & Associates', role:'Aotearoa foremost authority on Māori rights in AI and digital environments', url:'https://taiuru.co.nz' },
  { name:'Te Hiku Media', role:'Pioneer of Indigenous-led AI for te reo Māori', url:'https://tehiku.nz' },
  { name:'Te Taura Whiri i te Reo Māori', role:'The Māori Language Commission — language learning with cultural context', url:'https://tetaurawhiri.govt.nz' },
  { name:'Fibre Fale', role:'Creating pathways into technology for Pacific people', url:'https://fibrefale.com' },
  { name:'Te Hapori Matihiko', role:'Global community for Māori working in digital and tech industries', url:'https://matihiko.nz' },
];

const ORG_FRAMEWORKS = {
  organisations: {
    label:'For Organisations',
    intro:'These five principles form an applied governance framework for organisations working with AI and Māori language or cultural knowledge. Each is grounded directly in the research findings — not generic ethics advice.',
    principles:[
      { finding:'02', theme:'Data Sovereignty', principle:'Classify before you build', why:'Every participant returned to data sovereignty as the starting point. The tapu/noa/rāhui classification framework provides a practical mechanism for translating sovereignty principles into governance decisions before any system is built or procured.', quote:'We get brought in at the eighth hour — everything has already happened. The opportunity to influence and co-design has been and gone.', actions:['Apply noa/tapu/rāhui classification to all Māori data before any AI development or procurement begins','Default position: Māori data belongs to the community unless explicit, informed permission for a specific use has been given','Build a data register that maps what you hold, which category it falls into, and who has authority over each type'] },
      { finding:'03', theme:'Tikanga Governance', principle:'Build real authority — not advisory panels', why:'Having Māori present in a process is not the same as having Māori governance. Tokenistic inclusion can actively cause harm by creating the appearance of cultural safety without any real shift in decision-making power.', quote:'It needs someone with the technology, the te reo Māori knowledge, and the knowledge of Te Tiriti. And it is probably not always just one person.', actions:['Require three elements held collectively in your governance: technical AI expertise, te reo Māori and tikanga knowledge, and grounded understanding of Te Tiriti','Stop relying on cultural taxation — expecting one Māori staff member to carry all cultural responsibility is not governance','Fund dedicated roles and fairly compensate external cultural expertise'] },
      { finding:'04', theme:'Community Authority', principle:'Co-design from day one — not day eight', why:'Engagement that happens after design decisions have been made is not co-design. It is consultation. The distinction matters because consultation can be satisfied without changing outcomes.', quote:'We are at a crossroads. The risk is if we do not actually grasp it now.', actions:['Bring Māori governance into the design brief stage, not the review stage','Community is not a stakeholder — it is the source of authority. Structure your process accordingly','Make co-design a governance requirement, not a box to check before launch'] },
      { finding:'05', theme:'The Practice Gap', principle:'Build structures, not statements', why:'Frameworks that exist on paper without enforcement mechanisms produce no change. The primary challenge identified across all research data was not a lack of intent — it was a lack of architecture to act on what is already known.', quote:'There are a lot of silos. We are all out here trying to do something — even though we are working toward the same goal.', actions:['Create a governance rhythm: working group, data classification, playbooks, and review cycles','Include enforcement mechanisms — who has authority to pause or stop an AI system if harm occurs','Implement review cycles every 3–12 months with communities retaining the right to withdraw consent'] },
      { finding:'01', theme:'Crossroads', principle:'Align values before you engage', why:'Many organisations hold values compatible with te ao Māori but have not made this explicit. Disengagement is not safety — choosing not to engage does not remove AI\'s influence, it shifts control elsewhere.', quote:'If we do not grasp it now, we will be recolonised — but in a way that no one can comprehend right now.', actions:['Map existing organisational values alongside manaakitanga and kaitiakitanga before beginning any AI engagement','Make values alignment explicit in governance documentation, not assumed','Audit current AI use for existing gaps before adding new systems'] },
    ]
  },
  government: {
    label:'For Government',
    intro:'These four principles form a policy framework for government agencies. They emerge directly from what participants described as the systemic failures of current governance — and what meaningful change would require.',
    principles:[
      { finding:'03', theme:'Tikanga Governance', principle:'Te Tiriti as foundation — not a footnote', why:'Te reo Māori is a taonga. New Zealand is a UNDRIP signatory — rights affirmed under international law extend into the digital age and apply directly to AI governance. Voluntary compliance frameworks have already demonstrated their limits.', quote:'We can not rely on other people\'s principles. We need to create our own, and we need tino rangatiratanga to do that.', actions:['Mandate Te Tiriti obligations in all AI procurement and policy — not as an add-on, but as a non-negotiable foundation','Treat Indigenous data sovereignty as a legal obligation, not a policy preference','Develop specific policy for generative AI and mātauranga Māori, in genuine partnership with Māori experts'] },
      { finding:'05', theme:'The Practice Gap', principle:'Move from voluntary to enforceable', why:'The Algorithm Charter demonstrated the consequences of voluntarism at scale. Voluntary guidance without enforcement produces compliance theatre. Organisations need requirements with real consequences.', quote:'A lot of people talked about wanting to implement Māori data sovereignty — but they did not know how to operationalise it.', actions:['Develop enforceable standards with audit requirements and independent Māori oversight — not self-reporting','Stop counting consultation as participation — genuine co-design requires decision-making authority','Create accountability pathways for harm caused by AI misrepresentation of Indigenous languages and cultures'] },
      { finding:'01', theme:'Crossroads', principle:'Address the double digital divide first', why:'A double digital divide emerged in the research: not only lack of access to AI tools, but lack of AI literacy to use them safely. Investment in literacy is what makes everything else on this list possible.', quote:'There are so many people whose digital literacy was already low before AI. What AI does is take that gap and turn it into a chasm.', actions:['Fund digital equity and AI literacy programmes specifically for Māori communities','Invest in Māori AI governance infrastructure as essential public infrastructure — not optional','Māori represent less than 1% of the AI workforce in Aotearoa. Sustained multi-year investment is required to change this'] },
      { finding:'03', theme:'Tikanga Governance', principle:'Fund properly — not tokenistically', why:'Cultural taxation — expecting one Māori staff member to carry all cultural responsibility — is not governance. It is extraction. Meaningful change requires proper resourcing.', quote:'We had to work out how to identify someone\'s whakapapa early on — and then who had authority to let iwi data be used, and how we would get that authority.', actions:['Fund dedicated Māori AI roles across government agencies — not absorbed into existing positions','Fairly compensate external Māori cultural expertise — involvement without compensation is extraction','Fund Māori-led AI development and governance initiatives on multi-year terms, not project-by-project'] },
    ]
  },
  iwi: {
    label:'For Iwi & Communities',
    intro:'These four principles form a governance framework for iwi, hapū, and Māori communities engaging with AI — either in evaluating external tools or building their own.',
    principles:[
      { finding:'02', theme:'Data Sovereignty', principle:'Claim sovereignty proactively — do not wait to be asked', why:'Free, prior, and informed consent includes the right to withhold consent. This is a legal right, not just a cultural preference. Waiting to be consulted means arriving at the eighth hour, when decisions have already been made.', quote:'Not one indigenous sovereign AI — we will have multiple, owned 100% by indigenous communities, not organisations.', actions:['Use collective governance structures — hapū, iwi — to own and govern AI systems, not just advise on them','Establish your data classification framework before any external organisation approaches you','Assert the right to withhold consent and make that right explicit in all engagement terms'] },
      { finding:'04', theme:'Community Authority', principle:'Engage from authority — not as a last-minute reviewer', why:'Community is the source of authority — not a stakeholder to be consulted. Engaging after design decisions are made shifts power to the organisation, not the community.', quote:'The technology can help, but it will never replace that feeling of connection.', actions:['Shape the terms of engagement before agreeing to participate','Require decision-making authority, not advisory roles, as a condition of involvement','Engage with external AI tools from a position of informed authority — build internal capability to support this'] },
      { finding:'03', theme:'Tikanga Governance', principle:'Trust knowledge holders as the ultimate governance authority', why:'The most important governance resource is not a framework — it is the people who carry true stories, accurate whakapapa, and tikanga held through generations. Tikanga is the framework.', quote:'An indigenous-led AI development would bring the spiritual aspect — because we are actually spiritual people, and our language is by default spiritual as well.', actions:['Centre kaumātua and language experts in all AI governance decisions — not as validators, but as decision-makers','Document governance processes in ways that preserve the authority of tikanga','Resist pressure to substitute technical expertise for cultural expertise in governance roles'] },
      { finding:'05', theme:'The Practice Gap', principle:'Build connections across the Māori AI ecosystem', why:'Silos are the enemy of change. Many communities are doing this work independently. The diversity of iwi and hapū approaches is a strength — but most powerful when connected through shared learning.', quote:'We are all out here trying to do something — even though we are working toward the same goal of revitalising te reo Māori.', actions:['Build relationships with other iwi and hapū navigating AI governance — share what works','Connect with organisations like Te Hiku Media and Kahu Code who are building Māori-led AI','Develop shared learning frameworks so each community does not have to start from scratch'] },
    ]
  },
  tereo: {
    label:'For Te Reo Users',
    intro:'These four principles are for anyone using AI to engage with te reo Māori or Māori cultural knowledge — whether reconnecting with your language, working in an organisation, or trying to get a translation right.',
    principles:[
      { finding:'02', theme:'Data Sovereignty', principle:'Te reo is a worldview — not a translation task', why:'Te reo Māori carries whakapapa and spiritual meaning that cannot transfer word-for-word from English. AI that treats it as a translation task misses everything that matters. Understanding this changes how you use every tool.', quote:'Our kupu, our stories, and our waiata — all reduced to mere inputs and outputs.', actions:['Before sharing anything with an AI system, identify which category it falls into: noa, tapu, or rāhui','Never share whakapapa, sacred knowledge, or family-held knowledge with any AI system','Treat AI output as a starting point for a conversation with a fluent speaker — not a final answer'] },
      { finding:'01', theme:'Crossroads', principle:'AI sounds certain — even when it is wrong', why:'AI tools produce confident-sounding errors at scale. For those reconnecting with their language, a mistranslation can fill the gaps left by colonisation with something that feels right but is not grounded in anything real. The confidence of the output is not evidence of its accuracy.', quote:'I think there is a risk that the tools do not work. I have seen too much hype around AI and people getting disappointed.', actions:['Validate all AI-generated te reo with a fluent speaker or trusted resource before using or sharing it','Use Te Aka Māori Dictionary as your primary reference — it is the most culturally grounded source','Treat validation with fluent speakers as part of the process, not a safety check added at the end'] },
      { finding:'04', theme:'Community Authority', principle:'Use AI as a bridge — not a destination', why:'AI can make te reo more accessible and reduce the barrier of not knowing where to begin. That is real value. But the research is clear: it cannot replace the warmth of a person, a marae, or a kaumātua. The goal of AI should always be to bring you closer to those things.', quote:'The technology can help, but it will never replace that feeling of connection.', actions:['Use AI to open doors to language learning — then walk through those doors to real community','If AI is replacing time with language speakers rather than leading you toward them, reconsider how you are using it','Seek out Kōhanga Reo, kura, and community language programmes alongside any AI tools you use'] },
      { finding:'05', theme:'The Practice Gap', principle:'Engage with eyes open — not eyes closed', why:'Disengaging from AI entirely is not a safe option — these systems will shape how te reo Māori is encountered whether or not you are involved. But uninformed participation carries its own risks. The most important thing is to engage consciously.', quote:'We are at a crossroads. If we do not grasp it now, we will be recolonised — but in a way that no one can comprehend right now.', actions:['Build enough AI literacy to notice when something does not feel right and to ask the right questions','If you are using te reo for appearance without genuine understanding, be honest about the harm that causes','Resource cultural expertise properly — involving Māori experts without fair compensation is extraction, even when well-intentioned'] },
    ]
  },
};

const ORG_FW_TABS = [
  { id:'organisations', label:'For Organisations' },
  { id:'government', label:'For Government' },
  { id:'iwi', label:'For Iwi & Communities' },
  { id:'tereo', label:'For Te Reo Users' },
];

function OrganisationsPage() {
  const [fwOpen, setFwOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('organisations');
  const [qaOpen, setQaOpen] = useState(null);

  const services = [
    { cat:'Assess & Govern', phase:'01', items:[
      ['AI Risk & Readiness Assessment', 'Map your current AI use against Indigenous data sovereignty principles. Identify what requires governance, what requires consent, and where the urgent gaps are.'],
      ['Indigenous Data Governance Review', 'Classify organisational data using noa, tapu, and rāhui frameworks. Define consent pathways, establish who has authority, and build the structures that protect it.'],
    ]},
    { cat:'Strategy & Capability', phase:'02', items:[
      ['Tikanga-Based Governance Design', 'Build a governance framework grounded in tikanga — not a generic ethics policy. Real authority structures, not advisory panels. Practical enough to actually use.'],
      ['Co-Design & Training', 'Embed community engagement into project governance from the start. Workshops for leadership and technical teams on what responsible AI looks like in practice.'],
    ]},
    { cat:'Embed & Operate', phase:'03', items:[
      ['Interim Ethics Lead', 'An embedded senior lead sitting within your leadership team for 3–6 months. Accountability, momentum, and decisions that stick.'],
      ['Playbooks & Policy', 'Documentation written for the people who will actually use it — not for a compliance shelf. Clear, actionable, and grounded in your specific context.'],
    ]},
  ];

  return (
    <div className="route-enter">

      {/* Hero */}
      <section style={{paddingTop:80, paddingBottom:40}}>
        <div className="container">
          <div className="cols-2-1" style={{gap:48, alignItems:'end', marginBottom:64}}>
            <div>
              <span className="label">For Organisations</span>
              <h1 style={{marginTop:16, maxWidth:'18ch'}}>
                Māori don't get engaged at the end.<br/>
                <em style={{color:'var(--accent)'}}>They lead from the beginning.</em>
              </h1>
            </div>
            <div>
              <p style={{color:'var(--ink-2)', fontSize:'var(--step-lg)', lineHeight:1.7, marginBottom:24}}>
                NRX Auaha takes an ethical approach to AI, grounded in Te Ao Māori practices — helping organisations understand what co-design actually requires, and building the structures to do it properly.
              </p>
              <Link to="contact" className="btn btn-primary">
                Start a kōrero <span className="arrow">→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Three truths */}
      <section style={{background:'var(--ink)', color:'var(--bg)', padding:'80px 0'}}>
        <div className="container">
          <div style={{marginBottom:56}}>
            <div className="label" style={{color:'rgba(239,230,218,0.4)', marginBottom:16}}>What organisations need to understand</div>
            <h2 style={{color:'var(--bg)', maxWidth:'22ch'}}>Three things that change how you approach this work.</h2>
          </div>
          <div style={{display:'flex', flexDirection:'column', borderTop:'1px solid rgba(239,230,218,0.1)'}}>
            {[
              {
                n:'01',
                heading:'Māori need to be engaged from the very beginning — not reviewed at the end.',
                body:'Most organisations bring Māori in at the eighth hour, after design decisions have already been made. That is not co-design — it is consultation, and it changes nothing. Genuine engagement starts at the design brief stage, before the first line of code is written and before any data is collected. The opportunity to influence, shape, and co-govern disappears if Māori are not at the table from day one.',
              },
              {
                n:'02',
                heading:'Governing this properly may require more than one relationship.',
                body:'There is no single Māori authority that speaks for all communities. Different iwi, hapū, and communities have different governance structures, different data, and different rights. Your governance framework may need to involve multiple relationships — and those relationships take time to build. Assuming one conversation or one Māori advisor covers your obligations is one of the most common mistakes organisations make.',
              },
              {
                n:'03',
                heading:'Data does not become available when you ask. It requires co-design.',
                body:'Māori data — language, whakapapa, cultural knowledge — is not sitting in a database waiting to be accessed. It is held within relationships, within authority structures, within tikanga. Before any of it can be used in an AI system, trust must be built, authority must be understood, and consent must be freely and specifically given. Co-design is not a process you run to unlock data. It is the relationship through which data may, eventually, become possible.',
              },
            ].map((t) => (
              <div key={t.n} style={{
                display:'grid', gridTemplateColumns:'64px 1fr',
                gap:40, padding:'40px 0', borderBottom:'1px solid rgba(239,230,218,0.1)',
              }}>
                <span className="display" style={{fontSize:48, fontStyle:'italic', color:'var(--accent)', lineHeight:1}}>{t.n}</span>
                <div>
                  <h3 style={{fontSize:'var(--step-xl)', color:'var(--bg)', marginBottom:16, maxWidth:'52ch'}}>{t.heading}</h3>
                  <p style={{fontSize:15, color:'rgba(239,230,218,0.6)', lineHeight:1.8, maxWidth:'none'}}>{t.body}</p>
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:48}}>
            <Link to="thesis" className="btn" style={{border:'1px solid rgba(239,230,218,0.3)', color:'var(--bg)', background:'none', fontSize:13}}>
              Read the research behind this <span className="arrow">→</span>
            </Link>
          </div>
        </div>
      </section>

      {/* Noa / Tapu / Rāhui */}
      <section style={{background:'var(--bg-2)', padding:'80px 0'}}>
        <div className="container" style={{marginBottom:48}}>
          <span className="label">Free resource · Where every engagement starts</span>
          <h2 style={{marginTop:12, maxWidth:'22ch'}}>Before AI touches any Māori data, this classification must happen.</h2>
          <p style={{marginTop:16, color:'var(--ink-2)', fontSize:15, maxWidth:'56ch', lineHeight:1.8}}>
            Noa, tapu, and rāhui is not a new framework invented for AI — it is tikanga in action, applied to a digital context. It determines what can be used, what requires specific consent, and what must never be digitised. Most organisations have not started this classification. It is the prerequisite for everything else.
          </p>
        </div>
        <div className="ntr-grid">
          {[
            { label:'Noa', sub:'Open / Unrestricted', bg:'#2a5f5f', body:'Data already in the public domain. This can be digitised and used within AI systems. It carries no special restriction — freely accessible and appropriate for open engagement.' },
            { label:'Tapu', sub:'Controlled / Restricted', bg:'var(--ink)', body:'Sensitive cultural data that should be kept within Aotearoa. Requires careful custodianship and clear authority over who may access it and how. Not for open digitisation or global AI training.' },
            { label:'Rāhui', sub:'Sacred / Must Not Be Digitised', bg:'var(--rust)', body:'Whakapapa, sacred knowledge, medicines, and knowledge held within specific families. This should never be digitised or fed into AI systems. Its protection is non-negotiable.' },
          ].map((t) => (
            <div key={t.label} style={{
              background:t.bg, padding:'56px 48px 64px', position:'relative', overflow:'hidden', minHeight:360,
            }}>
              {/* Watermark */}
              <div style={{
                position:'absolute', bottom:-20, right:-16, pointerEvents:'none',
                fontFamily:'var(--f-display)', fontStyle:'italic',
                fontSize:'clamp(6rem,12vw,10rem)', fontWeight:400,
                color:'rgba(255,255,255,0.07)', lineHeight:1, userSelect:'none',
              }}>{t.label}</div>
              <div style={{position:'relative', zIndex:2}}>
                <p style={{fontFamily:'var(--f-display)', fontStyle:'italic', fontSize:'clamp(2.2rem,4vw,3.2rem)', color:'var(--bg)', marginBottom:12, lineHeight:1}}>{t.label}</p>
                <p className="mono" style={{fontSize:10, color:'rgba(239,230,218,0.55)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:32}}>{t.sub}</p>
                <p style={{fontSize:15, color:'rgba(239,230,218,0.82)', lineHeight:1.8, maxWidth:'none'}}>{t.body}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Community Trust Conditions */}
      <section style={{padding:'80px 0', background:'var(--bg)'}}>
        <div className="container">
          <div style={{marginBottom:48}}>
            <span className="label">Research finding · Community trust</span>
            <h2 style={{marginTop:12, maxWidth:'28ch'}}>Six conditions communities identified before genuine trust in AI systems is possible.</h2>
            <p style={{marginTop:16, color:'var(--ink-2)', fontSize:15, maxWidth:'56ch', lineHeight:1.8}}>
              These are not aspirational values — they emerged directly from research participants as the minimum requirements. Every condition must be met. Not most of them.
            </p>
          </div>
          <div className="cols-3" style={{gap:1, background:'var(--hair)'}}>
            {[
              { n:'01', title:'Near-perfect accuracy', body:'Cultural errors carry real harm. A mistranslation does not just mislead — it can fill the gaps left by colonisation with something that feels true but is not.' },
              { n:'02', title:'Māori control and authority', body:'Not advisory. Not consultative. Decision-making power over how AI systems are built, trained, and governed — held by Māori, not delegated to them.' },
              { n:'03', title:'Transparency in plain language', body:'Organisations must be able to explain what the tool does, where data goes, and who benefits — in language that does not require a computer science degree to understand.' },
              { n:'04', title:'Active harm prevention', body:'Systems must be designed to prevent misuse, not just permit reporting of it. Governance structures that can pause or stop a system when harm occurs.' },
              { n:'05', title:'Intergenerational protection', body:'Decisions made today about Māori data will affect communities for generations. Governance must account for people who are not yet born — not just current stakeholders.' },
              { n:'06', title:'Ongoing consent with withdrawal rights', body:'Consent is not a one-time signature. Communities retain the right to withdraw consent at any time, for any reason, without having to justify it.' },
            ].map(c => (
              <div key={c.n} style={{background:'var(--bg)', padding:'32px 28px'}}>
                <div className="mono" style={{fontSize:10, color:'var(--accent)', marginBottom:16}}>{c.n}</div>
                <h4 style={{fontSize:'var(--step-lg)', color:'var(--ink)', marginBottom:12, lineHeight:1.3}}>{c.title}</h4>
                <p style={{fontSize:14, color:'var(--ink-2)', lineHeight:1.75}}>{c.body}</p>
              </div>
            ))}
          </div>
          <div style={{marginTop:24, padding:'20px 24px', background:'var(--bg-2)', borderRadius:8, borderLeft:'3px solid var(--accent)'}}>
            <p style={{fontSize:14, color:'var(--ink-2)', lineHeight:1.8, maxWidth:'none', margin:0}}>
              <strong style={{color:'var(--ink)'}}>From the research:</strong> "Having Māori present is not having Māori governance." Meeting these conditions is the difference between cultural safety and cultural performance.
            </p>
          </div>
        </div>
      </section>

      {/* Five questions */}
      <section style={{paddingTop:80}}>
        <div className="container">
          <div className="cols-1-2" style={{gap:64, marginBottom:80}}>
            <div style={{paddingTop:8}}>
              <span className="label">Free resource</span>
              <h2 style={{marginTop:12, marginBottom:16, maxWidth:'14ch'}}>Before your team uses AI with Māori content.</h2>
              <p style={{color:'var(--ink-2)', fontSize:15, lineHeight:1.8}}>
                Five questions drawn directly from the research. For anyone in your organisation engaging AI with te reo Māori or Māori cultural knowledge.
              </p>
            </div>
            <div style={{display:'flex', flexDirection:'column', borderTop:'1px solid var(--hair)'}}>
              {ORG_QUESTIONS.map((q) => (
                <div key={q.n} style={{borderBottom:'1px solid var(--hair)'}}>
                  <button onClick={() => setQaOpen(qaOpen === q.n ? null : q.n)} style={{
                    width:'100%', textAlign:'left', padding:'24px 0',
                    background:'none', border:'none', cursor:'pointer',
                    display:'flex', alignItems:'baseline', gap:24,
                  }}>
                    <span className="mono" style={{fontSize:11, color:'var(--accent)', minWidth:24}}>{q.n}</span>
                    <span style={{fontSize:'var(--step-lg)', fontFamily:'var(--f-display)', flex:1}}>{q.q}</span>
                    <span className="mono" style={{fontSize:12, color:'var(--muted)'}}>{qaOpen === q.n ? '−' : '+'}</span>
                  </button>
                  {qaOpen === q.n && (
                    <div style={{padding:'0 0 24px 48px'}}>
                      <p style={{fontSize:15, color:'var(--ink-2)', lineHeight:1.8, maxWidth:'none'}}>{q.a}</p>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section style={{background:'var(--bg-2)', paddingTop:80}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="label">Services · Ngā ratonga</span>
              <h2 style={{marginTop:8}}>Three phases. One through-line.</h2>
            </div>
            <p style={{color:'var(--ink-2)', maxWidth:'36ch', fontSize:15}}>
              Every engagement moves from assessment through to embedded practice. The goal is not a report — it is change that holds.
            </p>
          </div>
          {services.map((s) => (
            <div key={s.cat} style={{marginBottom:48}}>
              <div className="cols-fw" style={{gap:48, paddingTop:24, borderTop:'1px solid var(--hair)'}}>
                <div>
                  <div className="mono" style={{fontSize:11, color:'var(--accent)', marginBottom:8}}>PHASE {s.phase}</div>
                  <h3 style={{fontSize:'var(--step-2xl)'}}>{s.cat}</h3>
                </div>
                <div className="cols-1-1" style={{gap:32}}>
                  {s.items.map(([t, d], i) => (
                    <div key={t} style={{paddingTop:8}}>
                      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:10}}>
                        <h4 style={{fontSize:'var(--step-lg)'}}>{t}</h4>
                        <span className="mono" style={{fontSize:10, color:'var(--muted)'}}>0{i+1}</span>
                      </div>
                      <p style={{fontSize:14, color:'var(--ink-2)', lineHeight:1.7}}>{d}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Engagement shapes */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="label">Engagements · Ngā mahi</span>
              <h2 style={{marginTop:8, maxWidth:'20ch'}}>A few shapes an engagement can take.</h2>
            </div>
          </div>
          <div className="cols-3" style={{gap:24}}>
            {[
              { size:'S', title:'Discovery sprint', dur:'2 weeks', desc:'A focused assessment of one system, one policy, or one team. You leave with a clear picture of where the gaps are and what to do first.' },
              { size:'M', title:'Governance programme', dur:'3–6 months', desc:'Stand up a tikanga-based governance rhythm — working group, data classification, playbooks, and team training. Built to last.' },
              { size:'L', title:'Embedded lead', dur:'6–12 months', desc:'A senior ethics lead sitting within your leadership team. Accountability, momentum, and decisions grounded in genuine authority.' },
            ].map(e => (
              <div key={e.title} className="card">
                <div style={{display:'flex', justifyContent:'space-between', marginBottom:24}}>
                  <span className="display" style={{fontSize:56, fontStyle:'italic', color:'var(--accent)', lineHeight:1}}>{e.size}</span>
                  <span className="mono" style={{fontSize:11, color:'var(--muted)'}}>{e.dur}</span>
                </div>
                <h4 style={{fontSize:'var(--step-xl)', marginBottom:12}}>{e.title}</h4>
                <p style={{fontSize:14, color:'var(--ink-2)', lineHeight:1.7}}>{e.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Governance frameworks */}
      <section style={{background:'var(--bg-2)', padding:'80px 0'}}>
        <div className="container">
          <div className="cols-1-1" style={{gap:64, alignItems:'end', marginBottom:48}}>
            <div>
              <span className="label">Research-backed governance frameworks</span>
              <h2 style={{marginTop:12, marginBottom:20, maxWidth:'22ch'}}>Four frameworks. One research foundation.</h2>
              <p style={{color:'var(--ink-2)', fontSize:15, lineHeight:1.8}}>
                Each framework maps the five research findings to named principles and practical actions — for Organisations, Government, Iwi and Communities, and Te Reo users. Built from original research. Not generic advice.
              </p>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:0, borderTop:'1px solid var(--hair)'}}>
              {ORG_FW_TABS.map((t) => (
                <div key={t.id} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'18px 0', borderBottom:'1px solid var(--hair)'}}>
                  <span style={{fontFamily:'var(--f-display)', fontSize:20}}>{t.label}</span>
                  <span className="mono" style={{fontSize:11, color:'var(--muted)'}}>Full framework →</span>
                </div>
              ))}
            </div>
          </div>

          {!fwOpen ? (
            <div style={{background:'var(--ink)', borderRadius:16, overflow:'hidden', position:'relative'}}>
              <div style={{position:'absolute', inset:0, pointerEvents:'none', backgroundImage:'linear-gradient(rgba(239,230,218,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(239,230,218,0.03) 1px, transparent 1px)', backgroundSize:'60px 60px'}} />
              <div style={{position:'relative', zIndex:2, padding:48}}>
                <div className="cols-1-1" style={{gap:64, alignItems:'start'}}>
                  <div>
                    <div className="label" style={{color:'rgba(239,230,218,0.5)', marginBottom:16}}>Full access</div>
                    <h2 style={{color:'var(--bg)', marginBottom:20, maxWidth:'18ch'}}>Four research-backed frameworks in full.</h2>
                    <p style={{color:'rgba(239,230,218,0.65)', fontSize:15, lineHeight:1.8, marginBottom:32}}>
                      Each framework maps the five research findings to named principles and practical actions. Built from original research — ten expert interviews, twenty survey responses, kaupapa Māori analysis. Not generic advice.
                    </p>
                    <div style={{display:'flex', flexDirection:'column', gap:12, marginBottom:32}}>
                      {['5 principles per framework','Research finding for each principle','Direct participant quotes','Practical actions — not aspirations','Community Conditions for Trust','Ethical Tensions analysis'].map(f => (
                        <div key={f} style={{display:'flex', gap:12, alignItems:'center', fontSize:14, color:'rgba(239,230,218,0.8)', borderTop:'1px solid rgba(239,230,218,0.1)', paddingTop:12}}>
                          <span style={{color:'var(--accent)'}}>→</span> {f}
                        </div>
                      ))}
                    </div>
                  </div>
                  <div style={{display:'flex', flexDirection:'column', gap:16, justifyContent:'center'}}>
                    <div style={{border:'1px solid rgba(239,230,218,0.2)', borderRadius:12, padding:40, textAlign:'center'}}>
                      <div className="mono" style={{fontSize:10, color:'var(--accent)', letterSpacing:'0.14em', marginBottom:24}}>COMING SOON</div>
                      <div className="display" style={{fontSize:'clamp(2rem,4vw,3rem)', fontStyle:'italic', color:'var(--bg)', marginBottom:16, lineHeight:1.1}}>
                        Frameworks launching soon.
                      </div>
                      <p style={{fontSize:14, color:'rgba(239,230,218,0.6)', lineHeight:1.7, marginBottom:32, maxWidth:'none'}}>
                        These frameworks are in final preparation. Join the list to be notified when they're available.
                      </p>
                      <Link to="contact" className="btn btn-accent" style={{width:'100%', justifyContent:'center', fontSize:14}}>
                        Get notified <span className="arrow">→</span>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div>
              <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'8px 16px', background:'var(--bg)', border:'1px solid var(--hair)', borderRadius:999, marginBottom:40}}>
                <span style={{color:'var(--accent)'}}>✓</span>
                <span className="mono" style={{fontSize:11, color:'var(--ink-2)'}}>Full access granted — use tabs to navigate frameworks</span>
              </div>
              <div style={{display:'flex', gap:4, marginBottom:48, flexWrap:'wrap'}}>
                {ORG_FW_TABS.map(t => (
                  <button key={t.id} onClick={() => setActiveTab(t.id)} style={{
                    padding:'10px 18px', borderRadius:999, border:'1px solid',
                    borderColor: activeTab === t.id ? 'var(--ink)' : 'var(--hair)',
                    background: activeTab === t.id ? 'var(--ink)' : 'transparent',
                    color: activeTab === t.id ? 'var(--bg)' : 'var(--ink-2)',
                    fontFamily:'var(--f-body)', fontSize:14, cursor:'pointer', transition:'all .2s',
                  }}>{t.label}</button>
                ))}
              </div>
              {(() => {
                const fw = ORG_FRAMEWORKS[activeTab];
                return (
                  <div>
                    <div style={{marginBottom:32}}>
                      <div className="label" style={{marginBottom:12}}>{fw.label} · Framework</div>
                      <p style={{fontSize:'var(--step-lg)', color:'var(--ink-2)', maxWidth:'60ch', lineHeight:1.7}}>{fw.intro}</p>
                    </div>
                    <div style={{display:'flex', flexDirection:'column', borderTop:'1px solid var(--hair)'}}>
                      {fw.principles.map((p, i) => (
                        <div key={i} className="cols-fw" style={{gap:48, padding:'40px 0', borderBottom:'1px solid var(--hair)'}}>
                          <div>
                            <div className="mono" style={{fontSize:10, color:'var(--muted)', marginBottom:8}}>FINDING {p.finding}</div>
                            <div className="mono" style={{fontSize:10, color:'var(--accent)', marginBottom:12}}>{p.theme.toUpperCase()}</div>
                            <span className="display" style={{fontSize:64, fontStyle:'italic', color:'var(--hair)', lineHeight:1}}>0{i+1}</span>
                          </div>
                          <div>
                            <h3 style={{fontSize:'var(--step-2xl)', marginBottom:16}}>{p.principle}</h3>
                            <p style={{fontSize:15, color:'var(--ink-2)', lineHeight:1.8, marginBottom:24, maxWidth:'none'}}>{p.why}</p>
                            <blockquote style={{borderLeft:'2px solid var(--accent)', paddingLeft:20, marginBottom:28, fontFamily:'var(--f-display)', fontSize:18, fontStyle:'italic', color:'var(--ink-2)', lineHeight:1.5}}>"{p.quote}"</blockquote>
                            <div className="label" style={{marginBottom:16}}>Actions</div>
                            <div style={{display:'flex', flexDirection:'column', gap:0}}>
                              {p.actions.map((a, ai) => (
                                <div key={ai} style={{display:'flex', gap:16, alignItems:'baseline', padding:'14px 0', borderTop:'1px solid var(--hair)', fontSize:15}}>
                                  <span className="mono" style={{fontSize:10, color:'var(--accent)', minWidth:20}}>0{ai+1}</span>
                                  <span style={{color:'var(--ink)', lineHeight:1.7}}>{a}</span>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })()}
            </div>
          )}
        </div>
      </section>

      {/* Recommended organisations */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="label">Recommended organisations</span>
              <h2 style={{marginTop:8, maxWidth:'20ch'}}>Organisations doing meaningful, community-led work.</h2>
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', borderTop:'1px solid var(--hair)'}}>
            {ORG_RECOMMENDED.map((r) => (
              <a key={r.name} href={r.url} target="_blank" rel="noopener noreferrer" className="cols-rec" style={{
                padding:'20px 0', borderBottom:'1px solid var(--hair)',
                alignItems:'center', gap:32, textDecoration:'none',
              }}>
                <span style={{fontFamily:'var(--f-display)', fontSize:20}}>{r.name}</span>
                <span style={{fontSize:14, color:'var(--ink-2)'}}>{r.role}</span>
                <span className="mono" style={{fontSize:11, color:'var(--accent)', textAlign:'right'}}>Visit →</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <CTABanner />
    </div>
  );
}

const COURSE_PLATFORM_URL = 'https://learn.nrxauaha.com';

const CIRCLE_MODULES = [
  { n:'01', title:'Your Transformation Starts Here', desc:'Kaupapa, self-audit, and intention-setting. Understand where you are and what you are moving toward.' },
  { n:'02', title:'Designing Your Direction', desc:'Map your skills, values, and the role you actually want. Career architecture from the inside out.' },
  { n:'03', title:'Your Presence Is Your Power', desc:'Personal brand, narrative, and how to show up with confidence in every room — physical and digital.' },
  { n:'04', title:'LinkedIn With Purpose', desc:'Build a profile that does the work for you. Strategic, authentic, and aligned to where you are going.' },
  { n:'05', title:'Building Connections That Open Doors', desc:'Relationships over transactions. How to reach out, follow up, and build a network that supports your career long-term.' },
  { n:'06', title:'Human First, AI Assisted', desc:'Use AI tools to amplify your strengths — not replace your voice. Finish with a complete, job-ready portfolio.' },
];

function ProfessionalsPage() {
  const phases = [
    { n:'01', title:'Locate', body:'Understand where you are, what you have already built, and what is in the way. Honest audit of strengths, skills, and story.' },
    { n:'02', title:'Shape', body:'Define the career you actually want — not the one you are qualified for by accident. Role targeting, narrative, plan.' },
    { n:'03', title:'Build', body:'CV, LinkedIn, portfolio, interview muscle. Job-ready assets that sound like you.' },
    { n:'04', title:'Land', body:'Applications, interviews, negotiation. Weekly accountability until you are in.' },
  ];

  return (
    <div className="route-enter">

      {/* Hero */}
      <section style={{paddingTop: 80, paddingBottom: 40}}>
        <div className="container">
          <div className="cols-2-1" style={{gap:48, alignItems:'end', marginBottom:64}}>
            <div>
              <span className="label">For Professionals</span>
              <h1 style={{marginTop: 16, maxWidth: '15ch'}}>
                Your next career, <em style={{color:'var(--accent)'}}>named and claimed</em>.
              </h1>
            </div>
            <div>
              <p style={{color:'var(--ink-2)', fontSize:'var(--step-lg)', marginBottom: 24}}>
                For people moving into tech, into leadership, or from study into industry — with a plan that is actually yours.
              </p>
              <Link to="circle" className="btn btn-ghost" style={{fontSize: 13}}>
                Explore the Transformation Circle <span className="arrow">→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Phases */}
      <section style={{background:'var(--ink)'}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="label" style={{color:'rgba(239,230,218,0.45)'}}>The path · Te ara</span>
              <h2 style={{marginTop: 8, maxWidth: '18ch', color:'var(--bg)'}}>Four phases. One plan. Your timeline.</h2>
            </div>
          </div>
          <div className="cols-4" style={{gap:0, borderTop:'1px solid rgba(239,230,218,0.2)'}}>
            {phases.map((p, i) => (
              <div key={p.n} style={{
                padding:'32px 24px 64px 0',
                borderRight: i < 3 ? '1px solid rgba(239,230,218,0.1)' : 'none',
                paddingLeft: i === 0 ? 0 : 24,
              }}>
                <div className="display" style={{fontSize: 96, fontStyle:'italic', color:'var(--accent)', lineHeight: 1, marginBottom: 16}}>{p.n}</div>
                <h4 style={{fontSize:'var(--step-xl)', marginBottom: 12, color:'var(--bg)'}}>{p.title}</h4>
                <p style={{fontSize: 14, color:'rgba(239,230,218,0.6)'}}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 1:1 Sessions */}
      <section style={{background:'var(--bg-2)'}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="label">One to one · Kanohi ki te kanohi</span>
              <h2 style={{marginTop: 8, maxWidth:'20ch'}}>Focused 1:1 support. Coming soon.</h2>
            </div>
            <p style={{color:'var(--ink-2)', maxWidth:'32ch', fontSize: 15}}>
              For professionals who want direct, personalised coaching. Join the waitlist and you'll hear first when these open.
            </p>
          </div>
          <div className="cols-1-1" style={{gap:24}}>

            <div style={{
              background:'var(--bg)', border:'1px solid var(--hair)', borderRadius: 12, padding: 32,
              display:'flex', flexDirection:'column', opacity: 0.75,
            }}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom: 24}}>
                <span className="mono" style={{fontSize: 11, color:'var(--muted)'}}>90 min · 1:1</span>
                <span className="mono" style={{fontSize: 11, color:'var(--muted)'}}>Coming soon</span>
              </div>
              <h4 style={{fontSize:'var(--step-2xl)', marginBottom: 16}}>Single Session</h4>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap: 12, marginBottom: 32, flex:1}}>
                {['CV or LinkedIn teardown','Career narrative session','One concrete next step'].map(f => (
                  <li key={f} style={{display:'flex', gap: 12, fontSize: 14, borderTop:'1px solid var(--hair)', paddingTop: 12, color:'var(--ink-2)'}}>
                    <span style={{opacity:0.4}}>→</span> {f}
                  </li>
                ))}
              </ul>
              <Link to="contact" className="btn btn-ghost" style={{justifyContent:'center'}}>
                Join waitlist <span className="arrow">→</span>
              </Link>
            </div>

            <div style={{
              background:'var(--bg)', border:'1px solid var(--hair)', borderRadius: 12, padding: 32,
              display:'flex', flexDirection:'column', opacity: 0.75,
            }}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom: 24}}>
                <span className="mono" style={{fontSize: 11, color:'var(--muted)'}}>8 weeks · 1:1</span>
                <span className="mono" style={{fontSize: 11, color:'var(--muted)'}}>Coming soon</span>
              </div>
              <h4 style={{fontSize:'var(--step-2xl)', marginBottom: 16}}>Career Transition</h4>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap: 12, marginBottom: 32, flex:1}}>
                {['Weekly 1:1 sessions','CV, LinkedIn, portfolio build','Interview preparation','Email support between sessions'].map(f => (
                  <li key={f} style={{display:'flex', gap: 12, fontSize: 14, borderTop:'1px solid var(--hair)', paddingTop: 12, color:'var(--ink-2)'}}>
                    <span style={{opacity:0.4}}>→</span> {f}
                  </li>
                ))}
              </ul>
              <Link to="contact" className="btn btn-ghost" style={{justifyContent:'center'}}>
                Join waitlist <span className="arrow">→</span>
              </Link>
            </div>

          </div>
        </div>
      </section>

      {/* Social proof bar */}
      <section style={{background:'var(--bg-2)', padding:'40px 0'}}>
        <div className="container">
          <div className="cols-3" style={{gap:0, borderTop:'1px solid var(--hair)', borderBottom:'1px solid var(--hair)'}}>
            {[
              { stat:'20+', label:'Years developing leaders', sub:'Across operations, tech, and startups' },
              { stat:'AUCSA', label:'Mentoring programme', sub:'Auckland University Commerce Students Association · 2025 & 2026' },
              { stat:'5★', label:'Mentor reviews', sub:'Consistent 5-star feedback from mentees and clients' },
            ].map((s, i) => (
              <div key={s.stat} style={{
                padding:'32px 0',
                paddingLeft: i === 0 ? 0 : 32,
                borderRight: i < 2 ? '1px solid var(--hair)' : 'none',
                paddingRight: i < 2 ? 32 : 0,
              }}>
                <div className="display" style={{fontSize: 40, fontStyle:'italic', color:'var(--accent)', marginBottom: 8}}>{s.stat}</div>
                <div style={{fontSize: 14, fontWeight: 500, color:'var(--ink)', marginBottom: 4}}>{s.label}</div>
                <div className="mono" style={{fontSize: 11, color:'var(--muted)'}}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section>
        <div className="container">
          <div className="cols-1-2" style={{gap:80, alignItems:'start'}}>
            <div>
              <span className="label">What people say</span>
              <h2 style={{marginTop: 12, maxWidth:'16ch'}}>Real people, real shifts.</h2>
            </div>
            <div>
              <div style={{borderTop:'3px solid var(--accent)', paddingTop: 40}}>
                <div className="display" style={{fontSize:'clamp(1.4rem, 2.5vw, 2rem)', lineHeight: 1.4, marginBottom: 32, maxWidth:'52ch'}}>
                  "She asks the powerful, right questions that enable you to identify your own solutions and determine the next right move with confidence and clarity."
                </div>
                <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap: 20, alignItems:'center', marginBottom: 32}}>
                  <div style={{
                    width: 56, height: 56, borderRadius: '50%',
                    background:'var(--bg-2)', border:'1px solid var(--hair)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    fontFamily:'var(--f-display)', fontSize: 20, color:'var(--accent)', fontStyle:'italic',
                  }}>AE</div>
                  <div>
                    <div style={{fontWeight: 600, fontSize: 15, marginBottom: 2}}>Anita Ese</div>
                    <div className="mono" style={{fontSize: 11, color:'var(--muted)'}}>Founder & COO · Spotyaa</div>
                  </div>
                </div>
                <div style={{background:'var(--bg-2)', borderRadius: 8, padding:'20px 24px', borderLeft:'3px solid var(--accent)'}}>
                  <p style={{fontSize: 14, color:'var(--ink-2)', lineHeight: 1.8, margin: 0}}>
                    "Nadine established a structured framework for success, with transparent expectations and mutual accountability. She held me responsible for my results, with consistent check-ins to track progress and set new, achievable goals. Her approach is a perfect blend of being a respectful straight-shooter, providing insightful feedback, and fostering decisive accountability."
                  </p>
                  <div className="mono" style={{fontSize: 11, color:'var(--muted)', marginTop: 12}}>
                    ★★★★★ · Startup mentorship review
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTABanner />
    </div>
  );
}

function CirclePage() {
  const modules = [
    { n:'01', title:'Your Transformation Starts Here', desc:'Kaupapa, self-audit, and intention-setting. Understand where you are and what you are moving toward.' },
    { n:'02', title:'Designing Your Direction', desc:'Map your skills, values, and the role you actually want. Career architecture from the inside out.' },
    { n:'03', title:'Your Presence Is Your Power', desc:'Personal brand, narrative, and how to show up with confidence in every room — physical and digital.' },
    { n:'04', title:'LinkedIn With Purpose', desc:'Build a profile that does the work for you. Strategic, authentic, and aligned to where you are going.' },
    { n:'05', title:'Building Connections That Open Doors', desc:'Relationships over transactions. How to reach out, follow up, and build a network that supports your career long-term.' },
    { n:'06', title:'Human First, AI Assisted', desc:'Use AI tools to amplify your strengths — not replace your voice. Finish with a complete, job-ready portfolio.' },
  ];

  return (
    <div className="route-enter">

      {/* Hero */}
      <section style={{paddingTop: 80, paddingBottom: 40}}>
        <div className="container">
          {/* Back link */}
          <div style={{marginBottom: 32}}>
            <Link to="home" className="mono" style={{
              fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em',
              textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>← NRX Auaha</Link>
          </div>
          <div style={{marginBottom: 48}}>
            <span className="label">Transformation Circle · Te Huinga Panoni</span>
          </div>
          <div className="cols-3-2" style={{gap:64, alignItems:'end', marginBottom:64}}>
            <div>
              <h1 style={{maxWidth:'18ch'}}>
                Learning that moves in a <em style={{color:'var(--accent)'}}>circle, not a line.</em>
              </h1>
            </div>
            <div>
              <p style={{fontSize:'var(--step-lg)', color:'var(--ink-2)', lineHeight: 1.7, marginBottom: 32}}>
                A growing collection of self-paced programmes. Each circle is a complete learning experience — built around a theme, grounded in community, and designed to open one week at a time.
              </p>
              <a href={COURSE_PLATFORM_URL} className="btn btn-primary">
                Explore the platform <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* How circles work */}
      <section style={{background:'var(--ink)'}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="label" style={{color:'rgba(239,230,218,0.45)'}}>How it works · Te ara</span>
              <h2 style={{marginTop: 8, color:'var(--bg)'}}>Designed for the pace of real life.</h2>
            </div>
          </div>
          <div className="cols-3" style={{gap:0, borderTop:'1px solid rgba(239,230,218,0.2)'}}>
            {[
              { n:'01', title:'One module, one week', body:'A new module unlocks each week so the learning builds deliberately. No racing ahead, no falling behind — everyone moves together.' },
              { n:'02', title:'Self-paced within the week', body:'Each week is yours to work through at your own pace. Complete lessons, exercises, and reflections when it fits your life.' },
              { n:'03', title:'Community throughout', body:'You are not doing this alone. Community access runs the full duration — share questions, get feedback, and celebrate progress with others in the circle.' },
            ].map((s, i) => (
              <div key={s.n} style={{
                padding:'40px 32px 40px 0',
                borderRight: i < 2 ? '1px solid rgba(239,230,218,0.1)' : 'none',
                paddingLeft: i === 0 ? 0 : 32,
              }}>
                <div className="display" style={{fontSize: 80, fontStyle:'italic', color:'var(--accent)', lineHeight: 1, marginBottom: 24}}>{s.n}</div>
                <h4 style={{fontSize:'var(--step-xl)', marginBottom: 12, color:'var(--bg)'}}>{s.title}</h4>
                <p style={{fontSize: 14, color:'rgba(239,230,218,0.6)', lineHeight: 1.75}}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Circles grid */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="label">Available circles · Ngā huinga</span>
              <h2 style={{marginTop: 8}}>Start here. More circles coming.</h2>
            </div>
          </div>
          <div className="cols-3" style={{gap:24}}>

            {/* Transformation Journey — live */}
            <div style={{
              background:'var(--ink)', color:'var(--bg)',
              border:'1px solid var(--ink)', borderRadius: 12, padding: 32,
              display:'flex', flexDirection:'column',
            }}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 32}}>
                <span className="mono" style={{fontSize: 11, color:'rgba(239,230,218,0.5)'}}>6 weeks · self-paced</span>
                <span className="mono" style={{fontSize: 11, color:'var(--accent)', background:'rgba(184,146,42,0.15)', padding:'3px 10px', borderRadius: 99}}>● Available now</span>
              </div>
              <span className="label" style={{color:'rgba(239,230,218,0.4)', marginBottom: 12}}>Circle 01</span>
              <h3 style={{fontSize:'var(--step-2xl)', color:'var(--bg)', marginBottom: 8}}>Transformation Journey</h3>
              <p style={{fontSize: 14, color:'rgba(239,230,218,0.6)', marginBottom: 24, lineHeight: 1.7}}>
                Six modules to locate where you are, design where you are going, and build everything you need to get there — with AI as a tool, not a crutch.
              </p>
              <div className="display" style={{fontSize: 40, color:'var(--bg)', marginBottom: 32}}>NZ$300</div>
              <ul style={{listStyle:'none', padding:0, margin:'0 0 32px 0', display:'flex', flexDirection:'column', gap: 0, flex:1}}>
                {modules.map(m => (
                  <li key={m.n} style={{display:'grid', gridTemplateColumns:'28px 1fr', gap: 12, padding:'12px 0', borderTop:'1px solid rgba(239,230,218,0.1)', fontSize: 13, color:'rgba(239,230,218,0.75)'}}>
                    <span className="mono" style={{fontSize: 10, color:'var(--accent)', paddingTop: 2}}>{m.n}</span>
                    <span>{m.title}</span>
                  </li>
                ))}
              </ul>
              <a href={COURSE_PLATFORM_URL} className="btn btn-accent" style={{textAlign:'center', justifyContent:'center'}}>
                Start your journey <span className="arrow">→</span>
              </a>
            </div>

            {/* Leadership Circle — coming soon */}
            <div style={{
              background:'var(--bg)', color:'var(--ink)',
              border:'1px solid var(--hair)', borderRadius: 12, padding: 32,
              display:'flex', flexDirection:'column', opacity: 0.7,
            }}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 32}}>
                <span className="mono" style={{fontSize: 11, color:'var(--muted)'}}>6 weeks · self-paced</span>
                <span className="mono" style={{fontSize: 11, color:'var(--muted)', background:'var(--bg-2)', padding:'3px 10px', borderRadius: 99}}>Coming soon</span>
              </div>
              <span className="label" style={{color:'var(--muted)', marginBottom: 12}}>Circle 02</span>
              <h3 style={{fontSize:'var(--step-2xl)', marginBottom: 8}}>Leadership Circle</h3>
              <p style={{fontSize: 14, color:'var(--ink-2)', marginBottom: 24, lineHeight: 1.7}}>
                For people stepping into leadership roles — or stepping up in the ones they already hold. Building authority, presence, and the habits that make leadership sustainable.
              </p>
              <div className="display" style={{fontSize: 40, color:'var(--muted)', marginBottom: 32}}>TBA</div>
              <ul style={{listStyle:'none', padding:0, margin:'0 0 32px 0', display:'flex', flexDirection:'column', gap: 0, flex:1}}>
                {['Leading from your values','Communicating with authority','Managing up, across, and down','Feedback and difficult conversations','Decision-making under pressure','Sustaining your leadership energy'].map((t, i) => (
                  <li key={t} style={{display:'grid', gridTemplateColumns:'28px 1fr', gap: 12, padding:'12px 0', borderTop:'1px solid var(--hair)', fontSize: 13, color:'var(--ink-2)'}}>
                    <span className="mono" style={{fontSize: 10, color:'var(--muted)', paddingTop: 2}}>0{i+1}</span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
              <Link to="contact" className="btn btn-ghost" style={{textAlign:'center', justifyContent:'center'}}>
                Join the waitlist <span className="arrow">→</span>
              </Link>
            </div>

            {/* Third circle — TBD */}
            <div style={{
              background:'var(--bg)', color:'var(--ink)',
              border:'1px solid var(--hair)', borderRadius: 12, padding: 32,
              display:'flex', flexDirection:'column', opacity: 0.5,
            }}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 32}}>
                <span className="mono" style={{fontSize: 11, color:'var(--muted)'}}>· · ·</span>
                <span className="mono" style={{fontSize: 11, color:'var(--muted)', background:'var(--bg-2)', padding:'3px 10px', borderRadius: 99}}>Being built</span>
              </div>
              <span className="label" style={{color:'var(--muted)', marginBottom: 12}}>Circle 03</span>
              <h3 style={{fontSize:'var(--step-2xl)', marginBottom: 8}}>Coming Soon</h3>
              <p style={{fontSize: 14, color:'var(--ink-2)', marginBottom: 24, lineHeight: 1.7}}>
                A third circle is in development. If you have a topic you want to see covered — or a gap you keep running into — we want to know.
              </p>
              <div className="display" style={{fontSize: 40, color:'var(--muted)', marginBottom: 32}}>TBA</div>
              <div style={{flex:1}}/>
              <Link to="contact" className="btn btn-ghost" style={{textAlign:'center', justifyContent:'center', opacity: 0.6}}>
                Suggest a topic <span className="arrow">→</span>
              </Link>
            </div>

          </div>
        </div>
      </section>

      {/* Philosophy */}
      <section style={{background:'var(--bg-2)', padding:'80px 0'}}>
        <div className="container">
          <div className="cols-1-1" style={{gap:64, alignItems:'center'}}>
            <div>
              <span className="label">Why circles, not courses</span>
              <h2 style={{marginTop: 16, maxWidth:'18ch', marginBottom: 24}}>
                A circle has no beginning and no end.
              </h2>
              <p style={{color:'var(--ink-2)', fontSize: 15, lineHeight: 1.9}}>
                In te ao Māori, the circle represents continuity — the ongoing relationship between people, knowledge, and land. Our learning model reflects that. You are not here to complete a course and move on. You are here to build something that compounds over time, with a community of people doing the same work.
              </p>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap: 0}}>
              {[
                ['Community is the curriculum', 'The people in the circle are as important as the content. Learning in relationship changes what sticks.'],
                ['Pace is a feature', 'Weekly unlocks mean everyone moves together. No one is three modules ahead while you are still on week one.'],
                ['Human first, AI assisted', 'Every circle uses AI as a practical tool — not to generate your answers, but to accelerate your thinking.'],
                ['Built to last', 'Lifetime access after you complete a circle. Come back when you need to. The work stays yours.'],
              ].map(([t, d]) => (
                <div key={t} style={{padding:'24px 0', borderBottom:'1px solid var(--hair)'}}>
                  <h4 style={{fontSize:'var(--step-lg)', color:'var(--ink)', marginBottom: 8}}>{t}</h4>
                  <p style={{fontSize: 14, color:'var(--ink-2)', lineHeight: 1.7}}>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTABanner />
    </div>
  );
}

Object.assign(window, { OrganisationsPage, ProfessionalsPage, CirclePage });
