// home.jsx — Nina Bambina Foundation homepage
const { useState: uS, useEffect: uE } = React;

function Nav({ page = 'home' }) {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  return (
    <nav className={`site-nav ${open ? 'is-open' : ''}`}>
      <a href="#" className="brand">
        <LogoMark size={64} />
      </a>
      <button className="nav-toggle" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
        <span></span><span></span><span></span>
      </button>
      <div className="nav-links">
        <a href="#" className={page === 'home' ? 'active' : ''} onClick={close}>Home</a>
        <a href="Donate.html" className={page === 'donate' ? 'active' : ''} onClick={close}>Support us</a>
        <a href="#about" onClick={close}>About</a>
        <a href="Contact.html" className={page === 'contact' ? 'active' : ''} onClick={close}>Contact</a>
        <a href="https://www.instagram.com/ninabambinafoundation/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="nav-ig" onClick={close}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" stroke="none" /></svg>
        </a>
      </div>
      <a href="Donate.html" className="btn btn-primary nav-cta">Donate</a>
    </nav>);
}

// ---------------- Sky backdrop — fixed sun + rays for whole page ----------------
function SkyBackdrop() {
  const sunRef = React.useRef(null);
  const raysRef = React.useRef(null);
  React.useEffect(() => {
    let raf = 0;
    const update = () => {
      raf = 0;
      const sun = sunRef.current, rays = raysRef.current;
      if (!sun) return;
      const vh = window.innerHeight;
      const docH = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
      const scrollable = Math.max(1, docH - vh);
      // Progress across the whole page (0 at top, 1 at bottom)
      // Sun fully sets by ~70% of the document so the last sections feel deep dusk.
      const raw = Math.max(0, Math.min(1, window.scrollY / scrollable));
      const t = Math.min(1, raw / 0.7);
      const eased = t * t * (3 - 2 * t);

      document.documentElement.style.setProperty('--set', eased.toFixed(4));

      // Sun descends ~85% of a viewport over the full page
      const dropPx = vh * 0.85 * eased;
      const scale = 1 - 0.22 * eased;
      const opacity = 0.78 * (1 - eased * 0.88);
      sun.style.transform = `translate(-50%, calc(50% + ${dropPx}px)) scale(${scale})`;
      sun.style.opacity = String(opacity);

      if (rays) rays.style.opacity = String(0.32 * Math.max(0, 1 - eased * 1.6));
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return (
    <div className="sky-backdrop" aria-hidden="true">
      <div className="sky-rays" ref={raysRef}><RayBurst /></div>
      <div className="sky-sun" ref={sunRef} />
    </div>);
}

// ---------------- Hero A — content only; sky lives at page level ----------------
function HeroA() {
  return (
    <section className="hero hero-a">
      <div className="hero-inner">
        <div>
          <div className="kicker">Nina Bambina Foundation</div>
          <h1>Hope is the thing with <em>feathers</em> that perches in the soul — and never stops at all.</h1>
          <div className="hero-ctas">
            <a href="Donate.html" className="btn btn-primary btn-lg">Donate</a>
            <a href="#about" className="btn btn-lg">About</a>
          </div>
        </div>
      </div>
    </section>);

}

// ---------------- Mission band (not currently rendered, kept for future) ----------------
function Mission() {
  return (
    <section className="section mission">
      <div className="container">
        <div className="mission-quote">
          "We have set up the Nina Bambina Foundation to preserve our daughter's memory and to help others who find themselves in the same position we did."
        </div>
        <div className="mission-signoff">— The Donaldson family</div>
      </div>
    </section>);

}

// ---------------- Programs (unused in current page — kept for future) ----------------
function Programs() {
  const programs = [
  { ill: 'listening', title: 'Grief counselling', body: 'Up to 500 hours of one-to-one bereavement counselling each year, delivered by qualified volunteers from our premises in Rice Lane.', link: 'Find out more' },
  { ill: 'hands', title: 'Counsellor training', body: 'Funded training for around 20 counsellors a year, equipping more practitioners to support bereaved families across the region.', link: 'Find out more' },
  { ill: 'candle', title: 'Small grants', body: 'Grants of up to £500 to organisations and individuals providing services that meet our clients\u2019 needs.', link: 'Find out more' }];

  return (
    <section id="programs" className="section programs">
      <div className="container">
        <div className="section-head">
          <div className="kicker">What we do</div>
          <h2 className="section-title">Three ways we <em>support</em> grieving families.</h2>
          <p className="section-lede">
            Counselling, training, and small grants — all delivered by volunteers, with every penny raised going to front-line services.
          </p>
        </div>
        <div className="program-grid">
          {programs.map((p) =>
          <div key={p.title} className="program-card">
              <div className="program-ill"><ProgramIll kind={p.ill} /></div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
              <a href="#" className="program-link">{p.link} →</a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------------- About ----------------
function About() {
  return (
    <section id="about" className="section about-section">
      <div className="container about-wrap about-wrap--solo">
        <div className="about-body">
          <div className="kicker">About the foundation</div>
          <h2 className="section-title">The Nina Bambina Foundation</h2>
          <p>
            This temporary website has been set up to allow interested parties to discover what we are looking to achieve, and also to allow kind individuals the opportunity to donate as appropriate. We know that people have many demands on their finances and we are committed to ensure that all donations are treated with respect and care. The Foundation will not incur any people costs and all staff will be volunteers and all funds raised will go to front line services.
          </p>
          <p>
            As many people will know, we the Donaldson family lost our little angel Nina at eight weeks old in November 2024. Nina's passing has been devastating for us and we decided to act positively to preserve Nina's memory and to try to help others who find themselves in the same position we did. In order to do this, we have set up a Charitable Foundation. The ultimate aim of the Foundation will be to offer grief counselling to people who have lost babies or children of any age.
          </p>
          <p>
            We aim to provide 500 counselling hours a year in the first one or two years, and to train 20 individuals during that time. In addition to the above, the Foundation will look to give small grants of up to £500 to other relevant individuals or organisations who provide services to the Foundation to meet any client needs that are identified. We as a family have funded the renovation of premises in Rice Lane to provide a calm and professional training area with two dedicated counselling rooms.
          </p>
        </div>
      </div>
    </section>);

}

// ---------------- Fundraising ----------------
function Fundraising() {
  return (
    <section id="fundraising" className="section fundraising-section">
      <div className="container about-wrap about-wrap--solo">
        <div className="about-body">
          <div className="kicker">Get involved</div>
          <h2 className="section-title">Fundraising / Donations</h2>
          <p>
            Annie Newcomen has been our first fundraiser and has raised approximately £4,000 by running the Liverpool half marathon in honour of Nina and our Foundation and we would like to thank her for her tremendous effort. Last year Olivia Rowan ran a 10k and raised and donated a considerable sum to Alder Hey in Nina's name, we would also like to thank Olivia.
          </p>
          <p>
            We want to fund the Charity in a sustainable manner and would hope that individuals would consider making a small monthly donation by Direct Debit. In order to show our appreciation of any donations, we as a family will match all Direct Debit donations for at least the first year.
          </p>
          <p>
            If you feel that you would like to make a donation please follow the link below or if you can offer time as a volunteer please get in touch with us via the contact form.
          </p>
          <p>
            This page will be updated on a regular basis as our plans hopefully come to fruition, and we move through the different phases that are going to be required to be a fully functioning Charity endeavouring to meet our ultimate aims.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 28, flexWrap: 'wrap' }}>
            <a href="Donate.html" className="btn btn-primary btn-lg">Donate</a>
            <a href="Contact.html" className="btn btn-lg">Contact us</a>
          </div>
        </div>
      </div>
    </section>);

}

// ---------------- Trustees ----------------
function Trustees() {
  const trustees = [
    { name: 'Dr Paul Joseph Donaldson, PhD', role: 'Chair' },
    { name: 'Natalie Wilde', role: 'Trustee' },
    { name: 'Anthony Mooney', role: 'Trustee' },
    { name: 'Eileen Mary Donaldson', role: 'Trustee' }
  ];
  return (
    <section id="trustees" className="section trustees-section">
      <div className="container">
        <div className="section-head">
          <div className="kicker">Our trustees</div>
          <h2 className="section-title">The people behind the <em>Foundation</em></h2>
          <p className="section-lede">
            The Foundation is run entirely by volunteer trustees. None receive payment for their work — every penny raised goes to front-line services.
          </p>
        </div>
        <div className="trustee-grid">
          {trustees.map((t) => (
            <div key={t.name} className="trustee-card">
              <div className="trustee-mark" aria-hidden="true">
                {t.name.split(' ').filter(Boolean).map(p => p[0]).slice(0, 2).join('')}
              </div>
              <div className="trustee-name">{t.name}</div>
              <div className="trustee-role">{t.role}</div>
            </div>
          ))}
        </div>
      </div>
    </section>);
}

// ---------------- Footer ----------------
function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div>
          <a href="#" className="brand brand-on-dark"><LogoMark size={96} /></a>
          <a href="https://www.fundraisingregulator.org.uk/" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-block', marginTop: 18, background: '#ffffff', padding: '10px 14px', borderRadius: 8 }}>
            <img src="charity/assets/fundraising-regulator.png" alt="Registered with Fundraising Regulator" style={{ display: 'block', width: 170, height: 'auto' }} />
          </a>
        </div>
        <div>
          <h5>Site pages</h5>
          <a href="index.html">Home</a>
          <a href="index.html#about">About</a>
          <a href="Donate.html">Support us</a>
          <a href="Contact.html">Contact</a>
        </div>
        <div>
          <h5>Get involved</h5>
          <a href="Donate.html">Donate</a>
          <a href="Contact.html">Volunteer</a>
          <a href="Contact.html">Fundraise</a>
          <a href="https://www.instagram.com/ninabambinafoundation/" target="_blank" rel="noopener noreferrer">Instagram</a>
        </div>
        <div>
          <h5>Contact</h5>
          <a href="mailto:info@ninabambina.com">info@ninabambina.com</a>
          <a href="Contact.html">Contact form</a>
        </div>
        <div>
          <h5>Legal</h5>
          <a href="Legal.html?doc=privacy">Privacy</a>
          <a href="Legal.html?doc=terms">Donation terms</a>
          <a href="Legal.html?doc=gift-aid">Gift Aid</a>
          <a href="Legal.html?doc=cookies">Cookies</a>
          <a href="Legal.html?doc=complaints">Complaints</a>
        </div>
      </div>
      <div className="footer-note">© 2026 Nina Bambina Foundation · Registered charity in England and Wales (No. 1214652) · Registered office: 1 Dartmouth Drive, Windle, St. Helens WA10 6BP, United Kingdom</div>
    </footer>);

}

// ---------------- Home page shell ----------------
function Home() {
  return (
    <>
      <SkyBackdrop />
      <Nav page="home" />
      <HeroA />
      <About />
      <Fundraising />
      <Trustees />
      <Footer />
    </>);

}

Object.assign(window, { Nav, Footer, Mission, Programs, HeroA, About, Fundraising, Trustees, Home, SkyBackdrop });

// After mount on the home page, honor the URL hash with a smooth scroll once
// the layout has settled. This fixes the "first click reloads, second scrolls"
// behaviour when navigating from Donate/Contact via index.html#about.
function scrollToHashWhenReady() {
  const hash = window.location.hash;
  if (!hash || hash.length < 2) return;
  let attempts = 0;
  const tryScroll = () => {
    const el = document.querySelector(hash);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    } else if (attempts++ < 20) {
      setTimeout(tryScroll, 60);
    }
  };
  // Wait one frame so React has painted, then start trying.
  requestAnimationFrame(() => setTimeout(tryScroll, 30));
}

if (window.__NB_PAGE === 'home') {
  ReactDOM.createRoot(document.getElementById('root')).render(<Home />);
  scrollToHashWhenReady();
  window.addEventListener('hashchange', scrollToHashWhenReady);
}