// Section landing pages, Get Involved, About

function InvolvedPage({ navigate }) {
  const [amount, setAmount] = React.useState(75);
  const [frequency, setFrequency] = React.useState('monthly');
  const presets = frequency === 'monthly' ? [25, 50, 75, 150] : [100, 250, 500, 1000];
  return (
    <div data-screen-label="Get Involved">
 <PageHero
        eyebrow="Get Involved"
        title="Stand with Australian SCN2A and DEE families."
        body="Donate, fundraise, volunteer, or partner. Every action funds research partnerships, advocacy work, and the family-navigation team."
        image={PHOTO.advocacy}
        accent="coral"
        ledger={["100% AUSTRALIAN · NOT-FOR-PROFIT", "REGISTERED CHARITY · ACNC", "TAX-DEDUCTIBLE · DGR ENDORSED"]}
        navigate={navigate} />
      
 <Breadcrumbs items={[{ label: 'Get Involved' }]} navigate={navigate} />

 {/* Donate widget */}
 <section style={{ background: '#fff', padding: '88px 0' }}>
 <div className="container">
 <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 56, alignItems: 'start' }} className="stack-mobile">
 <div style={{ background: '#F7F4F0', padding: '32px 32px 28px', border: '1px solid #D5CFBF' }}>
 <div className="eyebrow" style={{ color: '#8E3B5E' }}>Make a donation</div>
 <div style={{ marginTop: 14, display: 'flex', gap: 4, background: '#fff', padding: 4, border: '1px solid #D5CFBF' }}>
 {['monthly', 'one-time'].map((f) =>
                <button key={f} onClick={() => setFrequency(f)}
                style={{
                  flex: 1, padding: '12px 14px', fontSize: 14, fontWeight: 700,
                  background: frequency === f ? '#0D1B2A' : 'transparent',
                  color: frequency === f ? '#fff' : '#0D1B2A',
                  border: 'none', cursor: 'pointer', fontFamily: 'inherit',
                  textTransform: 'capitalize'
                }}>
 {f === 'monthly' ? 'Monthly' : 'One-time'}
 </button>
                )}
 </div>
 <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
 {presets.map((p) =>
                <button key={p} onClick={() => setAmount(p)}
                style={{
                  padding: '16px 0', fontSize: 18, fontWeight: 700,
                  background: amount === p ? '#0D1B2A' : '#fff',
                  color: amount === p ? '#fff' : '#0D1B2A',
                  border: '1.5px solid ' + (amount === p ? '#0D1B2A' : '#D5CFBF'),
                  cursor: 'pointer', fontFamily: 'inherit'
                }}>
 ${p}
 </button>
                )}
 </div>
 <label style={{ display: 'block', marginTop: 16 }}>
 <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 6 }}>Or enter an amount (AUD)</div>
 <div style={{ display: 'flex', alignItems: 'center', border: '1.5px solid #D5CFBF', background: '#fff', padding: '0 16px' }}>
 <span style={{ color: '#6B6659', fontSize: 18 }}>$</span>
 <input value={amount} onChange={(e) => setAmount(Number(e.target.value.replace(/[^0-9]/g, '')) || 0)}
                  style={{ flex: 1, border: 0, padding: '14px 8px', fontSize: 18, fontWeight: 700, outline: 'none', fontFamily: 'inherit', color: '#0D1B2A' }} />
 <span style={{ color: '#6B6659', fontSize: 13 }}>{frequency === 'monthly' ? '/month' : 'one-time'}</span>
 </div>
 </label>
 <div style={{ marginTop: 18, padding: '14px 18px', background: '#fff', borderLeft: '4px solid #0D1B2A', fontSize: 13, lineHeight: 1.5 }}>
 <strong style={{ display: 'block', marginBottom: 2 }}>Your ${amount} {frequency === 'monthly' ? 'a month' : ''} could:</strong>
 {amount >= 100 ? 'Fund a family-navigator follow-up for one newly-diagnosed family.' :
                amount >= 50 ? 'Cover hosting and moderation of the Connect map for two weeks.' :
                'Support production of two plain-English fact sheets.'}
 </div>
 <div style={{ marginTop: 18 }}>
 <Button variant="coral" full size="lg">Donate ${amount} {frequency === 'monthly' ? '/ month' : ''} →</Button>
 </div>
 <div style={{ marginTop: 12, fontSize: 12, color: '#6B6659', textAlign: 'center' }}>Secure payment · Tax-deductible · DGR endorsed</div>
 </div>
 </div>
 </div>
 </section>

 <SubsectionGrid
        eyebrow="Other ways to help"
        title="More than one way to stand with us."
        items={[
        { icon: 'footprints', title: 'Walk Around Australia', body: 'Join our virtual challenge: log your kilometres and help the community walk the whole coastline, about 35,000 km, together.', cta: 'Join the walk', coral: true, to: 'walk' },
        { icon: 'megaphone', title: 'Fundraise', body: 'Create your own event, sponsor a fundraiser, school or workplace giving. We provide the toolkit.', cta: 'Start a fundraiser', coral: true },
        { icon: 'hand-helping', title: 'Volunteer', body: 'Family advisory, event support, ambassador program, skills-based volunteering (legal, comms, research).', cta: 'See open roles', coral: true },
        { icon: 'gift', title: 'Workplace giving', body: 'Set up regular giving through your payroll. Many employers match.', cta: 'How it works', coral: true },
        { icon: 'scroll', title: 'A gift in your will', body: 'Leave a lasting contribution to Australian SCN2A and DEE families. We can talk you through it.', cta: 'Learn more', coral: true },
        { icon: 'building', title: 'Corporate partners', body: 'Cause partnerships, sponsorship, employee engagement, in-kind support.', cta: 'Talk to us', coral: true },
        { icon: 'users', title: 'Support a family', body: 'Earmark your donation to a specific family\'s costs, moderated, with the family\'s consent.', cta: 'Learn more', coral: true }]
        }
        navigate={navigate}
        accent="coral" />
      

 <CTABlock
        eyebrow="Annual & impact report"
        title="See where every dollar goes."
        body="Audited financials, program outcomes, family stories, and board governance, brought together in our Annual and Impact Report."
        ctaLabel="Annual / Impact Report, coming soon"
        onCta={() => navigate('about')}
        tone="coral" />
      
 </div>);

}

function AboutPage({ navigate }) {
  const board = [
  {
    name: 'Kris Pierce', initials: 'KP', role: 'Founder & Director',
    sub: 'Mother of Will',
    photo: 'assets/team/ursula-delaney.jpg',
    bio: 'After a 14-year diagnostic odyssey, Kris\'s son Will was diagnosed with SCN2A. A Consumer & Patient Engagement Specialist, she has built SCN2A Australia into a nationally recognised advocacy organisation. Appointments include the MSAC Evaluation Sub-Committee, the HTA Consumer Consultative Committee (Deputy Chair), and the Genomics Australia Advisory Council. Victorian Women\'s Honour Roll 2022 inductee.'
  },
  {
    name: 'Dr David Cunnington', initials: 'DC', role: 'Treasurer',
    sub: 'Father of Will',
    photo: 'assets/team/david-cunnington.webp',
    bio: 'Parent of Will, a young adult with a gain-of-function SCN2A mutation. Experienced sleep physician and co-founder of SleepHub. Holds Master\'s degrees in healthcare management, clinical epidemiology, and drug development, bringing clinical-trials and healthcare-systems expertise to the Board.'
  },
  {
    name: 'Ursula Delaney', initials: 'UD', role: 'Secretary',
    sub: 'Mother of Eva',
    photo: 'assets/team/kris-pierce.jpg',
    bio: 'Director of a property management company with a career in residential investment portfolio management. Joined the Board after her daughter Eva was diagnosed with SCN2A encephalopathy, bringing operational rigour and the perspective of a parent navigating the Australian health and disability system.'
  }];

  const sab = [
  {
    name: 'Professor Ingrid Scheffer AO', initials: 'IS',
    role: 'Scientific & Medical Advisory Board',
    sub: 'University of Melbourne · Florey Institute',
    bio: 'One of the world\'s foremost authorities on epilepsy genetics. Laureate Professor; NHMRC Practitioner Fellow. Foundational research on Dravet syndrome and SCN1A transformed understanding of genetic epilepsies and directly informs the diagnostic and therapeutic landscape for SCN2A families.'
  },
  {
    name: 'A/Prof Katherine Howell', initials: 'KH',
    role: 'Scientific & Medical Advisory Board',
    sub: 'RCH Melbourne · MCRI',
    bio: 'Paediatric neurologist and epileptologist focused on the genetics of childhood epilepsy, including SCN2A-related conditions. Contributor to research on genotype-phenotype correlations in SCN2A.'
  },
  {
    name: 'A/Prof Emma Palmer', initials: 'EP',
    role: 'Scientific & Medical Advisory Board',
    sub: 'UNSW · Sydney Children\'s Hospital',
    bio: 'Clinical geneticist and paediatric neurologist. Co-investigator on multiple SCN2A-related research projects within our network and co-author on the Angel Aid wellbeing evaluation (Orphanet Journal of Rare Diseases, 2025).'
  },
  {
    name: 'A/Prof Jenny Downs', initials: 'JD',
    role: 'Scientific & Medical Advisory Board',
    sub: 'Telethon Kids Institute · Perth',
    bio: 'Head of the Development and Disability Research Program. Leader in outcome measures and quality-of-life assessments for children with intellectual disability, directly informing how we approach what matters most to families.'
  },
  {
    name: 'A/Prof Snezana Maljevic', initials: 'SM',
    role: 'Scientific & Medical Advisory Board',
    sub: 'Florey Institute · Epilepsy Division',
    bio: 'Research Group Head investigating molecular and cellular mechanisms underlying genetic epilepsies, including DEE. Uses patient-derived iPSC "brain in a dish" models to evaluate potential therapeutic interventions.'
  },
  {
    name: 'Amy Schneider', initials: 'AS',
    role: 'Scientific & Medical Advisory Board',
    sub: 'University of Melbourne · Austin Health',
    bio: 'Head of the Genetic Epilepsy Natural History and DEE Research Program. Master of Genetic Counselling. Works at the intersection of deep phenotyping, genetic diagnosis, and direct family engagement.'
  }];


  return (
    <div data-screen-label="About">
 <PageHero
        eyebrow="About us"
        title="Families who became experts. The peak Australian voice for SCN2A and DEE."
        body="Founded by Kris Pierce after her son Will's 14-year diagnostic odyssey. Now leading advocacy across the broader DEE community, with SCN2A expertise as the foundation."
        image={PHOTO.teamIndoor}
        ledger={["FAMILY-LED · CLINICIAN-ADVISED", "REGISTERED CHARITY · ACNC", "AUDITED ANNUALLY"]}
        primaryCta={{ label: 'See our impact', to: 'impact' }}
        secondaryCta={{ label: 'Read our story', onClick: () => { const el = document.getElementById('our-story'); if (el) window.scrollTo(0, el.getBoundingClientRect().top + window.scrollY - 80); } }}
        navigate={navigate} />
      
 <Breadcrumbs items={[{ label: 'About' }]} navigate={navigate} />

 {/* Story */}
 <section id="our-story" style={{ background: '#fff', padding: '88px 0' }}>
 <div className="container">
 <div style={{ marginBottom: 48, maxWidth: 760 }}>
 <div className="eyebrow">Our story</div>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 16px', lineHeight: 1.15, letterSpacing: '-0.01em' }}>
 Where it all started.
 </h2>
 <hr className="rule-teal" />
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 56 }} className="stack-mobile">
 <p style={{ fontSize: 16, lineHeight: 1.7, color: '#6B6659', margin: 0, position: 'sticky', top: 90 }}>
 SCN2A Australia began the way so many rare-disease communities do, a handful of families, each feeling alone, who found each other.
 </p>
 <div>
 <p style={{ fontSize: 17, lineHeight: 1.7, color: '#0D1B2A', margin: '0 0 16px' }}>Our children were diagnosed with SCN2A-related disorders. In the early days, there was little information, few specialists with real experience, and almost no one who truly understood what our families were living with. So we reached out, connected, and started sharing what we were learning.

              </p>
 <p style={{ fontSize: 17, lineHeight: 1.7, color: '#0D1B2A', margin: '0 0 16px' }}>What began as informal conversations between parents grew into something more structured. We pooled our knowledge, researched the science, built relationships with international experts, and learned to navigate systems that weren't designed with rare-disease families in mind.

              </p>
 <p style={{ fontSize: 17, lineHeight: 1.7, color: '#0D1B2A', margin: '0 0 16px' }}>As our community grew, families began turning to us, not just SCN2A families, but those navigating other DEEs and many other rare genetic causes of DEE. The knowledge and networks we had built proved deeply relevant to the broader DEE community.

              </p>
 <p style={{ fontSize: 17, lineHeight: 1.7, color: '#0D1B2A', margin: 0 }}>
 <strong>That foundation of lived experience is still at the heart of everything we do.</strong>
 </p>
 </div>
 </div>
 </div>
 </section>

 {/* Selected milestones, real journey timeline */}
 <MilestonesTimeline />

 {/* Board */}
 <section style={{ background: '#fff', padding: '88px 0' }}>
 <div className="container">
 <div style={{ marginBottom: 36 }}>
 <div className="eyebrow">Board of Directors</div>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 0', lineHeight: 1.15 }}>
 Family-led leadership. All voluntary.
 </h2>
 <p style={{ marginTop: 18, fontSize: 16, color: '#6B6659', maxWidth: 720, lineHeight: 1.65 }}>
 Our Board provides strategic leadership, ensures financial accountability, and upholds the mission of SCN2A Australia. All board members serve voluntarily.
 </p>
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="stack-mobile">
 {board.map((p) =>
            <article key={p.name} style={{ background: '#fff', border: '1px solid #D5CFBF', padding: '28px 28px 26px', display: 'flex', flexDirection: 'column', gap: 12 }}>
 <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
 {p.photo ?
                <img src={p.photo} alt={p.name} style={{ width: 56, height: 56, objectFit: 'cover', objectPosition: 'center top', flexShrink: 0 }} /> :
                <div style={{ width: 56, height: 56, background: '#1E3A6E', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 18, letterSpacing: '0.04em' }}>{p.initials}</div>}
 <div>
 <div style={{ fontWeight: 700, fontSize: 17 }}>{p.name}</div>
 <div style={{ fontSize: 13, color: '#0D1B2A', fontWeight: 600, marginTop: 2 }}>{p.role}</div>
 <div style={{ fontSize: 12, color: '#6B6659', marginTop: 2 }}>{p.sub}</div>
 </div>
 </div>
 <p style={{ fontSize: 14, lineHeight: 1.6, color: '#6B6659', margin: 0 }}>{p.bio}</p>
 </article>
            )}
 </div>
 </div>
 </section>

 {/* Scientific & Medical Advisory Board */}
 <section style={{ background: '#F7F4F0', padding: '88px 0' }}>
 <div className="container">
 <div style={{ marginBottom: 36 }}>
 <div className="eyebrow">Scientific & Medical Advisory Board</div>
 <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 0', lineHeight: 1.15 }}>
 Leading clinicians and researchers in SCN2A, genetic epilepsy, and DEE.
 </h2>
 </div>
 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="stack-mobile-2">
 {sab.map((p) =>
            <article key={p.name} style={{ background: '#fff', border: '1px solid #D5CFBF', padding: '24px 24px 22px', display: 'flex', flexDirection: 'column', gap: 12 }}>
 <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
 <div style={{ width: 48, height: 48, background: '#1E3A6E', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16, letterSpacing: '0.04em' }}>{p.initials}</div>
 <div>
 <div style={{ fontWeight: 700, fontSize: 15 }}>{p.name}</div>
 <div style={{ fontSize: 12, color: '#6B6659', marginTop: 2 }}>{p.sub}</div>
 </div>
 </div>
 <p style={{ fontSize: 13.5, lineHeight: 1.6, color: '#6B6659', margin: 0 }}>{p.bio}</p>
 </article>
            )}
 </div>
 </div>
 </section>

 {/* Values + Governance */}
 <section style={{ background: '#fff', padding: '88px 0' }}>
 <div className="container">
 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }} className="stack-mobile">
 <div>
 <div className="eyebrow">Our values</div>
 <h3 style={{ fontSize: 28, fontWeight: 700, color: '#0D1B2A', margin: '14px 0 18px', lineHeight: 1.2 }}>
 What guides us
 </h3>
 <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
 {[
                ['Family expertise', 'Families are experts in their lived experience. We position that expertise alongside research evidence, not beneath it.'],
                ['Connection over competition', 'We work collaboratively, with other organisations, researchers, and government, because these challenges are too large for any group alone.'],
                ['Evidence-informed advocacy', 'Grounded in both research evidence and family experience. We advocate when the evidence supports it and families have told us it matters.'],
                ['Sustained commitment', 'Real change in rare disease takes years. We are committed for the long term, for the families who will receive these diagnoses in years to come.']].
                map(([t, b], i) =>
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 14, alignItems: 'start' }}>
 <i data-lucide="check" style={{ width: 22, height: 22, color: '#0D1B2A' }} />
 <div>
 <div style={{ fontWeight: 700, fontSize: 16 }}>{t}</div>
 <div style={{ fontSize: 14, color: '#6B6659', marginTop: 4 }}>{b}</div>
 </div>
 </li>
                )}
 </ul>
 </div>
 <div>
 <div className="eyebrow">Governance</div>
 <h3 style={{ fontSize: 28, fontWeight: 700, color: '#0D1B2A', margin: '14px 0 18px', lineHeight: 1.2 }}>
 Accountable, audited, public.
 </h3>
 <p style={{ fontSize: 16, lineHeight: 1.65, color: '#0D1B2A' }}>
 SCN2A Australia is a registered charity (ACNC). Our board is chaired by a parent of a child with SCN2A and includes clinician, researcher, and consumer representation. We are governed by a publicly available constitution and audited annually.
 </p>
 <div style={{ marginTop: 18 }}>
 <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', border: '1px dashed #BCCED3', background: '#F7F4F0' }}>
 <i data-lucide="file-text" style={{ width: 20, height: 20, color: '#0D1B2A' }} />
 <div>
 <strong style={{ color: '#0D1B2A', fontSize: 14 }}>Annual Report / Impact Report</strong>
 <div style={{ fontSize: 12.5, color: '#6B6659', marginTop: 2 }}>Coming soon.</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>

 <CTABlock
        eyebrow="Get in touch"
        title="Want to know more, work with us, or just have a question?"
        body="We respond to family enquiries within five working days. Media enquiries within one."
        ctaLabel="Contact us"
        onCta={() => navigate('contact')} />
      
 </div>);

}

Object.assign(window, { InvolvedPage, AboutPage });
