// ============================================================
// Direction B, "Hands & Voice"
// Photo-led, full-bleed family imagery up top, gets more
// rigorous and data-led as you scroll. Soft corners (10px).
// Coral accents stronger. Family-first tone shifting to
// authority below the fold.
// ============================================================

function HomeB({ navigate }) {
  return (
    <div className="dir-b" data-screen-label="Home, B (Hands & Voice)">
      <HomeBHero navigate={navigate} />
      <HomeBSplit navigate={navigate} />
      <HomeBPathways navigate={navigate} />
      <HomeBStory navigate={navigate} />
      <HomeBEvidence navigate={navigate} />
      <HomeBHelp navigate={navigate} />
      <HomeBPartners />
      <section style={{ background: '#1E3A6E', color: '#fff', padding: '40px 0' }}>
        <div className="container" style={{ maxWidth: 900, textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: '#C7D6EE', marginBottom: 12 }}>Acknowledgement of Country</div>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'rgba(255,255,255,0.92)', margin: 0 }}>
            SCN2A Australia acknowledges the Kabi Kabi peoples and the Jinibara peoples, the Traditional Custodians of the lands and waters we all now share, and pays respect to Elders past and present.
          </p>
        </div>
      </section>
    </div>);

}

function HomeBHero({ navigate }) {
  return (
    <section style={{
      position: 'relative', minHeight: '78vh', maxHeight: 820,
      display: 'flex', alignItems: 'flex-end',
      overflow: 'hidden', isolation: 'isolate'
    }}>
      {/* Photo, recessed into the background */}
      <img src={PHOTO.homeHero} alt=""
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0, filter: 'brightness(0.9) saturate(0.88)' }} />
      {/* Overlay, even teal/slate veil so the photo sits behind the type */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(180deg, rgba(13,27,42,0.42) 0%, rgba(13,27,42,0.40) 32%, rgba(13,27,42,0.62) 64%, rgba(13,27,42,0.92) 100%)'
      }} />
      {/* Coral accent rule */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: '#8E3B5E', zIndex: 2 }} />
      <div className="container" style={{ position: 'relative', zIndex: 2, padding: '96px 32px 60px', color: '#fff' }}>
        <div className="eyebrow" style={{ color: '#E8E3DA', marginBottom: 18 }}>SCN2A Australia · est. 2019</div>
        <h1 className="hero-h1-mobile" style={{
          fontWeight: 700, lineHeight: 1.04,
          letterSpacing: '-0.02em', color: '#fff',
          margin: 0, maxWidth: 920, textWrap: 'pretty', fontSize: "56px"
        }}>
          Founded by families, driven by evidence.{' '}<br />
          <em style={{ color: '#E8E3DA', fontStyle: 'normal', borderBottom: '4px solid #8E3B5E', paddingBottom: 2, fontSize: "40px" }}>We connect the SCN2A community, advance the research, and carry its voice into the decisions that shape care.</em>
        </h1>
        <p className="hero-sub-mobile" style={{ fontSize: 20, lineHeight: 1.55, marginTop: 28, maxWidth: 700, color: 'rgba(255,255,255,0.95)' }}>Born from deep SCN2A expertise and lived experience, we connect families, researchers, clinicians, and policymakers to drive evidence-informed change in care, research and policy.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
          <Button size="lg" variant="coral" onClick={() => navigate('understand')}>Understand SCN2A &amp; DEE</Button>
          <Button size="lg" variant="outlineLight" as="a" href="https://scn2aaustralia.org/join/" target="_blank">Join the Registry</Button>
        </div>
        <div style={{ marginTop: 48, fontSize: 13, color: 'rgba(255,255,255,0.75)', display: 'flex', gap: 28, flexWrap: 'wrap' }}>
          <span><strong style={{ color: '#fff', fontSize: 24, fontWeight: 700 }}>23</strong>  &nbsp;research projects</span>
          <span><strong style={{ color: '#fff', fontSize: 24, fontWeight: 700 }}>$39M+</strong>  &nbsp;funding influenced</span>
          <span><strong style={{ color: '#fff', fontSize: 24, fontWeight: 700 }}>12</strong>  &nbsp;partner institutions</span>
          <span><strong style={{ color: '#fff', fontSize: 24, fontWeight: 700 }}>5</strong>  &nbsp;states & territories</span>
        </div>
      </div>
    </section>);

}

function HomeBNavigator({ navigate }) {
  const pathways = [
  { n: '01', label: 'Understanding the condition' },
  { n: '02', label: 'Day to day & treatment' },
  { n: '03', label: "Research & what's coming" },
  { n: '04', label: 'Family stories' },
  { n: '05', label: 'Looking ahead' }];

  return (
    <section style={{ background: '#1E3A6E', color: '#fff', padding: '72px 0', position: 'relative', overflow: 'hidden' }}>
      <NetworkMotif opacity={0.14} stroke="#C7D6EE" />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 56, alignItems: 'center' }} className="stack-mobile">
          <div>
            <div className="eyebrow" style={{ color: '#C7D6EE' }}>New here?</div>
            <h2 className="h2-mobile" style={{ fontSize: 'clamp(30px, 3.8vw, 46px)', fontWeight: 700, lineHeight: 1.1, color: '#fff', margin: '14px 0 18px', letterSpacing: '-0.01em', textWrap: 'pretty' }}>
              Use our navigation tool.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,0.92)', margin: '0 0 28px', maxWidth: 480 }}>
              Not sure where to begin? Our plain-English, clinician-reviewed guide opens into clear pathways, start wherever your questions are.
            </p>
            <Button size="lg" variant="onTeal" onClick={() => navigate('navigator')}>
              Open the navigation tool <i data-lucide="arrow-right" style={{ width: 16, height: 16, marginLeft: 4, verticalAlign: '-2px' }} />
            </Button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {pathways.map((p) =>
            <a key={p.n} href="#navigator" onClick={(e) => {e.preventDefault();navigate('navigator');}}
            className="card-hover"
            style={{
              display: 'flex', alignItems: 'center', gap: 14,
              background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.16)',
              padding: '16px 18px', textDecoration: 'none', color: '#fff'
            }}>
                <span className="ledger-mono" style={{ fontSize: 15, fontWeight: 800, color: '#C7D6EE', flexShrink: 0 }}>{p.n}</span>
                <span style={{ fontSize: 15, fontWeight: 600, lineHeight: 1.3 }}>{p.label}</span>
              </a>
            )}
            <a href="#navigator" onClick={(e) => {e.preventDefault();navigate('navigator');}}
            className="card-hover"
            style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
              background: '#8E3B5E', border: '1px solid #8E3B5E',
              padding: '16px 18px', textDecoration: 'none', color: '#fff'
            }}>
              <span style={{ fontSize: 15, fontWeight: 700, lineHeight: 1.3 }}>Start the full tour</span>
              <i data-lucide="arrow-right" style={{ width: 16, height: 16 }} />
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function HomeBSplit({ navigate }) {
  return (
    <section style={{ background: '#fff', padding: '96px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }} className="stack-mobile">
          <div className="photo-tint" style={{ borderRadius: 0, overflow: 'hidden', aspectRatio: '4/3' }}>
            <img src={PHOTO.familyCare} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div>
            <div className="eyebrow" style={{ color: '#8E3B5E' }}>About SCN2A Australia</div>
            <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, lineHeight: 1.15, color: '#0D1B2A', margin: '14px 0 22px', letterSpacing: '-0.01em', textWrap: 'pretty' }}>
              Our foundation. Our direction.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: '#0D1B2A', margin: '0 0 16px', maxWidth: 580 }}>
              SCN2A Australia began as a support network for families navigating SCN2A-related disorders, one of the genetic causes of developmental and epileptic encephalopathy. Through that work, we built deep expertise in diagnosis, research, advocacy, and navigating complex systems.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: '#0D1B2A', margin: '0 0 28px', maxWidth: 580 }}>
              We have since expanded our reach to serve the broader DEE community, while maintaining our specialisation in SCN2A. Our role is unique: we are a <strong>connector</strong> and networker, not a service provider. We build bridges between families and the researchers, clinicians, and policymakers who can create lasting change.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Button onClick={() => navigate('about')}>Read our full story</Button>
              <Button variant="outline" onClick={() => navigate('change')}>How we drive change</Button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function HomeBPathways({ navigate }) {
  const items = [
  {
    eye: 'For families & carers',
    title: 'Information, connection, and guides.',
    body: 'Newly diagnosed or navigating DEE daily, find information, connect with others, and access our guides and resources.',
    cta: 'Family support and resources', to: 'support',
    photo: PHOTO.familyStory, accent: 'teal', objpos: 'center 72%'
  },
  {
    eye: 'For clinicians & researchers',
    title: 'Partner with us, not for us.',
    body: 'Partner with us, access our registry, and connect with the families who are shaping research priorities.',
    cta: 'Professional pathways', to: 'professionals',
    photo: PHOTO.cliniciansGroup, accent: 'teal'
  },
  {
    eye: 'For policy & funders',
    title: 'Evidence-informed input that moves systems.',
    body: 'We provide evidence-informed input to policymakers and advocate for systemic change in rare disease, epilepsy, and disability support.',
    cta: 'Our advocacy work', to: 'change',
    photo: PHOTO.conferenceUNSW, accent: 'teal'
  },
  {
    eye: 'Interactive pathways',
    title: 'Use our navigation tool.',
    body: 'New here? Our plain-English, clinician-reviewed guide opens into clear pathways, explore at your own pace.',
    cta: 'Start the navigation tool', to: 'navigator',
    photo: 'assets/photography/navigation-tool-phone.png', accent: 'teal', objpos: 'center 30%'
  }];

  return (
    <section style={{ background: '#F7F4F0', padding: '96px 0' }}>
      <div className="container">
        <SectionHeading
          eyebrow="Where would you like to start?"
          title="Different doorways into the same work."
          kicker="Pick the path closest to why you're here. The work is one - the entry points are several." />
        
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 40 }} className="stack-mobile-2">
          {items.map((it) =>
          <a key={it.title} href={'#' + it.to} onClick={(e) => {e.preventDefault();navigate(it.to);}}
          className="card-hover"
          style={{
            background: '#fff', border: '1px solid #D5CFBF',
            borderRadius: 0, overflow: 'hidden',
            display: 'flex', flexDirection: 'column',
            textDecoration: 'none', color: '#0D1B2A'
          }}>
              <div className="photo-tint" style={{ aspectRatio: '16/10' }}>
                <img src={it.photo} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: it.objpos || 'center' }} />
              </div>
              <div style={{ padding: '18px 20px 22px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                <div className="eyebrow" style={{ color: it.accent === 'coral' ? '#8E3B5E' : '#0D1B2A' }}>{it.eye}</div>
                <h3 style={{ fontSize: 17, fontWeight: 700, color: '#0D1B2A', margin: 0, lineHeight: 1.2 }}>{it.title}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: '#6B6659', margin: 0 }}>{it.body}</p>
                <div style={{ marginTop: 'auto', paddingTop: 12, fontSize: 13, fontWeight: 700, color: it.accent === 'coral' ? '#8E3B5E' : '#0D1B2A' }}>{it.cta} →</div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

function HomeBStory({ navigate }) {
  return (
    <section style={{ background: '#fff', padding: '96px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center' }} className="stack-mobile">
          <div style={{ position: 'relative' }}>
            <div className="photo-tint" style={{ borderRadius: 0, overflow: 'hidden', aspectRatio: '4/3', boxShadow: '0 12px 32px rgba(20,40,60,0.10)' }}>
              <img src={PHOTO.familyStoryFeature} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%' }} />
            </div>
            <div style={{
              position: 'absolute', bottom: -20, left: -20,
              background: '#8E3B5E', color: '#fff',
              padding: '12px 16px', maxWidth: 230,
              borderRadius: 0,
              boxShadow: '0 12px 32px rgba(142,59,94,0.30)'
            }} className="hide-mobile">
              <div className="eyebrow" style={{ color: '#E8E3DA', fontSize: 10 }}>One story · scale</div>
              <div style={{ fontSize: 14, lineHeight: 1.3, fontWeight: 700, marginTop: 5 }}>
                "From an SCN2A diagnosis to shaping national policy, community-led advocacy in action."
              </div>
            </div>
          </div>
          <div>
            <div className="eyebrow">Family story</div>
            <h2 className="h2-mobile" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 700, color: '#0D1B2A', margin: '14px 0 22px', lineHeight: 1.15, letterSpacing: '-0.01em' }}>Will's story.

            </h2>
            <p style={{ fontSize: 19, lineHeight: 1.65, color: '#0D1B2A', margin: '0 0 14px' }}>
              SCN2A Australia began the way so many rare-disease communities do, a handful of families, each feeling alone, who found each other. Our children had been diagnosed with SCN2A-related disorders. There was little information, few specialists with real experience, and almost no one who truly understood.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: '#6B6659', margin: '0 0 24px' }}>
              So we did what families do, we reached out, connected, and started sharing what we were learning. That foundation of lived experience, hard-won, deeply practical, and built on real care for each other, is still at the heart of everything we do.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingTop: 18, borderTop: '1px solid #D5CFBF' }}>
              <div style={{ width: 44, height: 44, borderRadius: 0, background: '#1E3A6E', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16 }}>KP</div>
              <div>
                <div style={{ fontWeight: 700 }}>Kris Pierce</div>
                <div style={{ fontSize: 13, color: '#6B6659' }}>Founder & Director · mother of Will</div>
              </div>
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 10 }}>
                <Button variant="outline" size="sm" onClick={() => navigate('about')}>Read our full story →</Button>
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 72 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 24 }}>
            <div className="eyebrow" style={{ color: '#8E3B5E' }}>Family stories</div>
            <span style={{ flex: 1, height: 1, background: '#D5CFBF' }}></span>
            <span style={{ fontSize: 13, color: '#6B6659' }}>In their own words</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }} className="stack-mobile-2">
            {[
            { id: 'gBRb7CONgbA', child: 'Aaliyah\u2019s story', who: 'Told by Justin & Romina' },
            { id: 'JoBzefSgxPM', child: 'Jasper\u2019s story', who: 'Told by Nick & Shannon Reilly' },
            { id: 'pTSmmyE8uaY', child: 'Eva\u2019s story', who: 'Told by Ursula' },
            { id: 'q85F8mp7wnc', child: 'Living with SCN2A', who: 'Three families share their stories' }].
            map((v) =>
            <a key={v.id} href={`https://youtu.be/${v.id}`} target="_blank" rel="noopener" className="card-hover"
            style={{ textDecoration: 'none', color: '#0D1B2A', display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'relative', aspectRatio: '16/9', overflow: 'hidden', background: '#0F2E2E' }}>
                <img src={`https://img.youtube.com/vi/${v.id}/hqdefault.jpg`} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                <span style={{
                  position: 'absolute', inset: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  background: 'rgba(13,27,42,0.28)'
                }}>
                  <span style={{ width: 46, height: 46, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                    <i data-lucide="play" style={{ width: 18, height: 18, color: '#8E3B5E', marginLeft: 2 }} />
                  </span>
                </span>
              </div>
              <div style={{ paddingTop: 12 }}>
                <div style={{ fontWeight: 700, fontSize: 16 }}>{v.child}</div>
                <div style={{ fontSize: 13, color: '#6B6659', marginTop: 2 }}>{v.who}</div>
              </div>
            </a>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function HomeBEvidence({ navigate }) {
  return (
    <section style={{ background: '#1E3A6E', color: '#fff', padding: '96px 0', position: 'relative', overflow: 'hidden' }}>
      <NetworkMotif opacity={0.16} stroke="#E8E3DA" />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, gap: 24, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 620 }}>
            <div className="eyebrow" style={{ color: '#E8E3DA' }}>And then we built the evidence</div>
            <h2 className="h2-mobile" style={{ fontWeight: 700, fontSize: 'clamp(28px, 3.6vw, 42px)', lineHeight: 1.15, color: '#fff', margin: '14px 0 0', letterSpacing: '-0.01em' }}>
              From kitchen-table conversations to Senate submissions and PBAC files.
            </h2>
          </div>
          <span className="ledger-mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)', letterSpacing: '0.08em' }}>WORK FILED · MAY 2026</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }} className="stack-mobile-2">
          {[
          { fig: '23', l: 'Research projects', note: 'SCN2A-led, DEE-wide' },
          { fig: '$39M+', l: 'Research funding influenced', note: 'across the partner network' },
          { fig: '9', l: 'MRFF-funded grants', note: '5 CI · 4 AI' },
          { fig: '15', l: 'Peer-reviewed publications', note: 'rare disease, HTA, genomics' }].
          map((s) =>
          <div key={s.l} style={{ borderTop: '2px solid #8E3B5E', paddingTop: 24 }}>
              <div style={{ fontSize: 64, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.025em' }}>{s.fig}</div>
              <div style={{ marginTop: 14, fontSize: 17, fontWeight: 700 }}>{s.l}</div>
              <div style={{ marginTop: 4, fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>{s.note}</div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 48, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <Button variant="onTeal" onClick={() => navigate('change')}>Read our advocacy work</Button>
          <Button variant="outlineLight" onClick={() => navigate('professionals')}>For researchers</Button>
        </div>
      </div>
    </section>);

}

function HomeBHelp({ navigate }) {
  const items = [
  { icon: 'heart', t: 'Donate', b: 'Your support funds research partnerships, advocacy work, and family resources. Every contribution helps build a stronger future for the DEE community.', cta: 'Donate today', to: 'involved' },
  { icon: 'hand-helping', t: 'Volunteer', b: 'Share your skills, time, or lived experience. We are always looking for people who want to contribute to our mission.', cta: 'Get involved', to: 'involved' },
  { icon: 'handshake', t: 'Partner', b: 'We work with research institutions, healthcare organisations, and corporate partners to extend our reach and impact.', cta: 'Explore partnerships', to: 'involved' }];

  return (
    <section style={{ background: '#fff', padding: '96px 0' }}>
      <div className="container">
        <div style={{ maxWidth: 760 }}>
          <div className="eyebrow" style={{ color: '#8E3B5E' }}>Join us</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' }}>
            Join us in driving change.
          </h2>
          <hr className="rule-coral" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, marginTop: 48 }} className="stack-mobile">
          {items.map((it) =>
          <article key={it.t} className="card-hover" style={{ background: '#E8E3DA', borderRadius: 0, padding: '32px 30px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ width: 52, height: 52, borderRadius: 0, background: '#8E3B5E', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={it.icon} style={{ width: 26, height: 26, color: '#fff' }} />
              </div>
              <h3 style={{ fontSize: 24, fontWeight: 700, color: '#0D1B2A', margin: 0 }}>{it.t}</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: '#0D1B2A', margin: 0 }}>{it.b}</p>
              <div style={{ marginTop: 'auto' }}>
                <Button variant="coral" size="sm" onClick={() => navigate(it.to)}>{it.cta} →</Button>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function HomeBPartners() {
  const partners = [
  ['IBE · International Bureau for Epilepsy', 'https://www.ibe-epilepsy.org'],
  ['ILAE Care Pathways Task Force', 'https://www.ilae.org/guidelines/care-pathways'],
  ['Global Genes', 'https://globalgenes.org'],
  ['Rare Epilepsy Network', 'https://www.rareepilepsynetwork.org'],
  ['Angel Aid · Raregivers Inc.', 'https://www.raregivers.org'],
  ['Epilepsy Foundation Australia', 'https://www.epilepsyfoundation.org.au'],
  ['GETA', 'https://www.geneticepilepsyteam.com.au'],
  ['Rare Voices Australia', 'https://rarevoices.org.au']];

  return (
    <section style={{ background: '#F7F4F0', padding: '64px 0' }}>
      <div className="container">
        <div className="eyebrow" style={{ textAlign: 'center', marginBottom: 28 }}>Our partners and supporters</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, alignItems: 'center' }} className="stack-mobile-2">
          {partners.map(([p, url]) =>
          <a key={p} href={url} target="_blank" rel="noopener" className="card-hover" style={{
            height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: '#fff', border: '2px solid #B8B2A8', borderRadius: 0,
            color: '#6B6659', fontSize: 13, fontWeight: 600, textAlign: 'center', padding: '0 16px',
            textDecoration: 'none'
          }}>{p}</a>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { HomeB });