// Resources page — free public layer + paid framework (NZ$97 / bundle NZ$99)

const 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 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 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 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 ResourcesPage() {
  const [open, setOpen] = useState(null);
  const [unlocked, setUnlocked] = useState(false);
  const [activeTab, setActiveTab] = useState('organisations');

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

      {/* Hero */}
      <section style={{ paddingTop: 80, paddingBottom: 64 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 48, alignItems: 'end', marginBottom: 64 }}>
            <div>
              <span className="label">Resources · Ngā rauemi</span>
              <h1 style={{ marginTop: 16, maxWidth: '18ch' }}>
                Practical guidance, <em style={{ color: 'var(--accent)' }}>grounded in research.</em>
              </h1>
            </div>
            <p style={{ color: 'var(--ink-2)', fontSize: 'var(--step-lg)', lineHeight: 1.6 }}>
              Free public resources drawn from original research. A deeper framework is available for those who need more.
            </p>
          </div>
          <div className="hair" />
        </div>
      </section>

      {/* Before You Use AI */}
      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, marginBottom: 80 }}>
            <div style={{ paddingTop: 8 }}>
              <span className="label">Free resource</span>
              <h2 style={{ marginTop: 12, marginBottom: 16, maxWidth: '14ch' }}>
                Before you use AI.
              </h2>
              <p style={{ color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.8 }}>
                Five questions for anyone using AI to engage with te reo Māori or Māori cultural knowledge. Drawn directly from the research findings.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', borderTop: '1px solid var(--hair)' }}>
              {QUESTIONS.map((q) => (
                <div key={q.n} style={{ borderBottom: '1px solid var(--hair)' }}>
                  <button
                    onClick={() => setOpen(open === 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)' }}>{open === q.n ? '−' : '+'}</span>
                  </button>
                  {open === 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>

      {/* Noa / Tapu / Rahui */}
      <section style={{ background: 'var(--bg-2)', padding: '80px 0' }}>
        <div className="container">
          <div style={{ marginBottom: 48 }}>
            <span className="label">Free resource · Data classification</span>
            <h2 style={{ marginTop: 12, maxWidth: '20ch' }}>
              Noa, tapu, and rāhui — the framework that comes first.
            </h2>
            <p style={{ marginTop: 16, color: 'var(--ink-2)', fontSize: 15, maxWidth: '56ch', lineHeight: 1.8 }}>
              Before any AI system is built, bought, or used with Māori data, this classification must happen. It is not new — it is tikanga in action, applied to a digital context.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { label: 'Noa', sub: 'Open / Unrestricted', colour: 'var(--ink)', body: "Data already in the public domain. This can be digitised and used within AI systems with appropriate care. It carries no special restriction — freely accessible and appropriate for open engagement. Even noa data should be handled with respect for its origins." },
              { label: 'Tapu', sub: 'Controlled / Restricted', colour: 'var(--accent)', 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. Requires explicit, ongoing consent from appropriate authorities." },
              { label: 'Rāhui', sub: 'Sacred / Must Not Be Digitised', colour: '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. If you are unsure whether something is rāhui, treat it as though it is." },
            ].map((t) => (
              <div key={t.label} style={{
                background: 'var(--bg)', border: '1px solid var(--hair)',
                borderRadius: 12, padding: 32,
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
                  <span className="display" style={{ fontSize: 42, fontStyle: 'italic', color: t.colour }}>{t.label}</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{t.sub}</span>
                </div>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.8, maxWidth: 'none' }}>{t.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Framework overview — teaser */}
      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start', marginBottom: 48 }}>
            <div>
              <span className="label">Research-backed frameworks</span>
              <h2 style={{ marginTop: 12, marginBottom: 20, maxWidth: '20ch' }}>
                Four frameworks. One research foundation.
              </h2>
              <p style={{ color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.8 }}>
                The full frameworks are grounded directly in the five findings from original research — ten expert interviews, twenty survey responses, and kaupapa Māori analysis. Each framework maps findings to principles to practical actions for a specific audience.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid var(--hair)' }}>
              {TABS.map((t) => (
                <div key={t.id} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '20px 0', borderBottom: '1px solid var(--hair)',
                }}>
                  <span style={{ fontFamily: 'var(--f-display)', fontSize: 22 }}>{t.label}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>Full framework →</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Paywall / Framework content */}
      {!unlocked ? (
        <FrameworkPaywall onUnlock={() => setUnlocked(true)} />
      ) : (
        <FrameworkContent activeTab={activeTab} setActiveTab={setActiveTab} />
      )}

      {/* Recommended organisations */}
      <section style={{ background: 'var(--bg-2)', padding: '80px 0' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="label">Free resource · 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)' }}>
            {RECOMMENDED.map((r) => (
              <a key={r.name} href={r.url} target="_blank" rel="noopener noreferrer" style={{
                display: 'grid', gridTemplateColumns: '1fr 2fr 100px',
                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>

    </div>
  );
}

function FrameworkPaywall({ onUnlock }) {
  return (
    <section style={{ padding: '0 0 80px' }}>
      <div className="container">
        <div style={{
          background: 'var(--ink)', color: 'var(--bg)',
          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 style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', 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 — for Organisations, Government, Iwi and Communities, and Te Reo users. Built from original research. 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>
    </section>
  );
}

function FrameworkContent({ activeTab, setActiveTab }) {
  const fw = FRAMEWORKS[activeTab];
  return (
    <section style={{ padding: '0 0 80px' }}>
      <div className="container">
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 16px', background: 'var(--bg-2)', 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</span>
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 4, marginBottom: 48, flexWrap: 'wrap' }}>
          {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>

        <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} style={{
              display: 'grid', gridTemplateColumns: '200px 1fr',
              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>
    </section>
  );
}

Object.assign(window, { ResourcesPage });