const { useState, useEffect, useRef } = React;

const WA_NUMBER = "2348030776983";
const WA_LINK = "https://wa.me/" + WA_NUMBER;

const SECTORS = [
  { num: "01", title: "Pharmaceuticals", img: "assets/img/pharma.png", blurb: "Trusted pharmaceutical products and medical supplies, distributed to international standards.", body: "We provide high-quality pharmaceutical products and medical supplies that meet international standards. Our focus is on improving healthcare delivery through the distribution of trusted brands and ethical practices." },
  { num: "02", title: "Properties", img: "assets/img/sector-properties.png", blurb: "Development, leasing and management of modern residential and commercial spaces.", body: "Our property division is involved in real estate development, leasing and management. We create modern, comfortable and affordable residential and commercial spaces that meet diverse customer needs." },
  { num: "03", title: "Logistics", img: "assets/img/fleet.png", blurb: "Fast, reliable and cost-effective movement of goods and commodities.", body: "We offer efficient logistics solutions that ensure seamless transportation and delivery of goods and commodities. Our operations are built on speed, reliability and cost-effectiveness." },
  { num: "04", title: "Import & Export", img: "assets/img/port.png", blurb: "International trade in quality goods, commodities and industrial materials.", body: "Rich-Will facilitates international trade in high-quality goods, commodities and industrial materials. Through strategic partnerships and global networks, we ensure timely delivery, compliance with international standards and sustainable trade practices that strengthen economic ties across borders." },
  { num: "05", title: "Oil & Gas", img: "assets/img/sector-oilgas.png", blurb: "Supply, trading and distribution of petroleum products — safely and ethically.", body: "Our oil and gas division focuses on the supply, trading and distribution of petroleum products. We support Nigeria's energy sector through ethical practices, operational excellence and strict safety and environmental standards." },
  { num: "06", title: "Beverage Distribution", img: "assets/img/sector-beverages.png", blurb: "Wholesale and retail distribution of brewery and carbonated soft drink products.", body: "We handle wholesale and retail distribution of brewery and carbonated soft drink products, ensuring consistent supply and quality service across multiple categories." },
  { num: "07", title: "Educational Consult", img: "assets/img/sector-education.png", blurb: "Advisory for local and international educational placements and career goals.", body: "We provide professional advisory services for local and international educational placements, guiding students and professionals toward their academic and career goals." },
];

const VALUES = [
  { title: "Integrity", blurb: "We operate with transparency, honesty and accountability." },
  { title: "Innovation", blurb: "We embrace creativity to solve modern challenges." },
  { title: "Excellence", blurb: "We pursue quality and continuous improvement in all we do." },
  { title: "Customer Satisfaction", blurb: "We prioritize our clients’ needs and deliver beyond expectations." },
  { title: "Sustainability", blurb: "We are committed to practices that protect people and the planet." },
];

const TEAM = [
  { img: "assets/img/team-samuel.png", name: "Samuel Olatunde Israel", role: "Chairman / CEO" },
  { img: "assets/img/team-joy.png", name: "Joy Anwulika Samuel", role: "Managing Director" },
  { img: "assets/img/team-richard.png", name: "Richard Ayomide Olatunde-Samuel", role: "Shareholder" },
  { img: "assets/img/team-williams.png", name: "Williams Ifeoluwa Olatunde-Samuel", role: "Shareholder" },
];

const PARTNERS = [
  { group: "Medicals", names: "Fidson Healthcare Plc · Emzor Pharmaceuticals Ltd" },
  { group: "Pharmacies", names: "New Health · H-Medix · Skylark · Tonia · Medi-Sense · Vastovas" },
  { group: "Hospitals", names: "Trust Chariots · The Limi · Sahad · St. Catherine · Alliance" },
];

const ROT_WORDS = ["pharmaceuticals.", "properties.", "logistics.", "global trade.", "oil & gas.", "beverages.", "education."];

const ICONS = {
  instagram: "M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85 0 3.2-.01 3.58-.07 4.85-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07-3.2 0-3.58-.01-4.85-.07-3.26-.15-4.77-1.7-4.92-4.92C2.17 15.58 2.16 15.2 2.16 12c0-3.2.01-3.58.07-4.85.15-3.23 1.66-4.77 4.92-4.92C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95C23.78 2.7 21.36.27 17 .07 15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 12 18.16 6.16 6.16 0 0 0 12 5.84zm0 10.15A4 4 0 1 1 12 8a4 4 0 0 1 0 8zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z",
  facebook: "M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.55-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.32l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07z",
  linkedin: "M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.72C24 .77 23.2 0 22.22 0z",
  twitter: "M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.47l8.6-9.83L0 1.15h7.59l5.24 6.93 6.07-6.93zm-1.29 19.5h2.04L6.49 3.24H4.3l13.31 17.4z",
  tiktok: "M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z",
};

function Icon({ name, size = 17, fill = "#FFFFFF" }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}><path d={ICONS[name]} /></svg>;
}

function useReveal() {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setInView(true); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, inView];
}

function Reveal({ children, className = "" }) {
  const [ref, inView] = useReveal();
  return <div ref={ref} className={`reveal ${inView ? "in" : ""} ${className}`}>{children}</div>;
}

const NAV = [
  { to: "home", label: "Home" },
  { to: "about", label: "About" },
  { to: "sectors", label: "Sectors" },
  { to: "foundation", label: "Foundation" },
  { to: "contact", label: "Contact us" },
];

function Header({ page, navigate }) {
  const [open, setOpen] = useState(false);
  return (
    <header>
      <div className="nav-inner">
        <a href="#/home" className="brand" onClick={(e) => { e.preventDefault(); navigate("home"); setOpen(false); }}>
          <img src="assets/img/logo.png" alt="Rich-Will Integrated logo" />
          <span className="brand-text"><b>RICH-WILL</b><span>Integrated Ventures</span></span>
        </a>
        <nav className="navlinks">
          {NAV.map((n) => (
            <a key={n.to} href={`#/${n.to}`} className={`navlink ${page === n.to ? "active" : ""}`} onClick={(e) => { e.preventDefault(); navigate(n.to); }}>{n.label}</a>
          ))}
        </nav>
        <button className="menu-btn" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className={`mobile-menu ${open ? "open" : ""}`}>
        {NAV.map((n) => (
          <a key={n.to} href={`#/${n.to}`} onClick={(e) => { e.preventDefault(); navigate(n.to); setOpen(false); }}>{n.label}</a>
        ))}
      </div>
    </header>
  );
}

function Footer({ navigate }) {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand" style={{ marginBottom: 14 }}>
              <img src="assets/img/logo.png" alt="Rich-Will logo" style={{ width: 38, height: 38 }} />
              <span className="brand-text"><b>RICH-WILL</b></span>
            </div>
            <p style={{ color: "#9aa2bd", fontSize: 14, maxWidth: 320 }}>Rich-Will Integrated Venture and Commodities Ltd — pharmaceuticals, properties, logistics, import &amp; export, oil &amp; gas and more.</p>
          </div>
          <div>
            <h4>Explore</h4>
            {NAV.filter((n) => n.to !== "home" || true).map((n) => (
              <a key={n.to} href={`#/${n.to}`} onClick={(e) => { e.preventDefault(); navigate(n.to); }}>{n.label === "Contact us" ? "Contact" : n.label === "Home" ? "Home" : n.label}</a>
            ))}
          </div>
          <div>
            <h4>Contact</h4>
            <a href="tel:+2348030776983">0803 077 6983</a>
            <a href="tel:+2348080763238">0808 076 3238</a>
            <a href="mailto:richwillintegratedventures@gmail.com">richwillintegratedventures@gmail.com</a>
          </div>
          <div>
            <h4>Follow us</h4>
            <div className="social-row">
              <a href="#" aria-label="Instagram"><Icon name="instagram" size={15} /></a>
              <a href="#" aria-label="Facebook"><Icon name="facebook" size={15} /></a>
              <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={15} /></a>
              <a href="#" aria-label="X"><Icon name="twitter" size={13} /></a>
              <a href="#" aria-label="TikTok"><Icon name="tiktok" size={14} /></a>
            </div>
            <span style={{ fontSize: 13 }}>@rich-willintegrated</span>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Rich-Will Integrated Venture and Commodities Ltd · RC 7226063</span>
          <span>Powered By <a href="https://thecollectivesynergy.com/" target="_blank" rel="noopener" style={{ color: "#fff" }}>The Collective Synergy</a></span>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFab() {
  return (
    <a className="wa-fab" href={WA_LINK} target="_blank" rel="noopener noreferrer" aria-label="Chat on WhatsApp">
      <svg width="28" height="28" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M16 .8C7.6.8.8 7.6.8 16c0 2.7.7 5.3 2 7.6L.8 31.2l7.8-2c2.2 1.2 4.7 1.9 7.4 1.9 8.4 0 15.2-6.8 15.2-15.1S24.4.8 16 .8zm0 27.6c-2.4 0-4.7-.6-6.7-1.8l-.5-.3-4.6 1.2 1.2-4.5-.3-.5c-1.3-2-2-4.4-2-6.9C3.1 8.9 8.9 3.1 16 3.1S28.9 8.9 28.9 16 23.1 28.4 16 28.4zm7.1-9.3c-.4-.2-2.3-1.1-2.6-1.3-.4-.1-.6-.2-.9.2-.3.4-1 1.3-1.2 1.5-.2.2-.4.3-.8.1-.4-.2-1.6-.6-3.1-1.9-1.1-1-1.9-2.2-2.1-2.6-.2-.4 0-.6.2-.8l.6-.7c.2-.2.3-.4.4-.6.1-.3 0-.5 0-.7l-1.2-2.8c-.3-.7-.6-.6-.9-.6h-.7c-.3 0-.7.1-1 .5-.4.4-1.4 1.3-1.4 3.2s1.4 3.7 1.6 4c.2.3 2.8 4.3 6.8 6 .9.4 1.7.7 2.3.9 1 .3 1.8.3 2.5.2.8-.1 2.3-1 2.7-1.9.3-.9.3-1.7.2-1.9-.1-.2-.3-.3-.7-.5z" /></svg>
    </a>
  );
}

function HomePage({ navigate }) {
  const [rotIdx, setRotIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setRotIdx((i) => (i + 1) % ROT_WORDS.length), 2600);
    return () => clearInterval(t);
  }, []);
  const ticker = ["PHARMACEUTICALS", "PROPERTIES", "LOGISTICS", "IMPORT & EXPORT", "OIL & GAS", "BEVERAGES", "EDUCATION"];
  return (
    <>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="reg-pill"><span></span>RC 7226063 · Nigeria</div>
              <h1>One company.<br />Excellence in<br /><span style={{ color: "#8fb3ff" }}>{ROT_WORDS[rotIdx]}</span></h1>
              <p>Rich-Will Integrated Venture and Commodities Ltd operates across pharmaceuticals, real estate, logistics, international trade and energy — delivering products and services that enhance lives and drive economic growth.</p>
              <div className="hero-actions">
                <a href="#/sectors" className="btn btn-primary" onClick={(e) => { e.preventDefault(); navigate("sectors"); }}>Explore our sectors</a>
                <a href={WA_LINK} target="_blank" rel="noopener noreferrer" className="btn btn-outline">Chat on WhatsApp</a>
              </div>
              <div className="stats">
                <div><span className="stat-num">7</span><span className="stat-label">Business sectors</span></div>
                <div><span className="stat-num">13+</span><span className="stat-label">Named partners</span></div>
                <div><span className="stat-num">5</span><span className="stat-label">Core values</span></div>
              </div>
            </div>
            <div>
              <div className="hero-media"><video src="assets/video/company-overview.mp4" poster="assets/img/fleet.png" autoPlay playsInline muted loop /></div>
              <div className="chips">
                {["Pharmaceuticals", "Properties", "Logistics", "Import & Export", "Oil & Gas"].map((c) => <span key={c} className="chip">{c}</span>)}
              </div>
            </div>
          </div>
          <div className="ticker-wrap">
            <div className="ticker">{[...ticker, ...ticker].map((t, i) => <span key={i}>{t} •</span>)}</div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <Reveal>
            <div className="section-head">
              <div className="eyebrow">What we do</div>
              <h2>Built across the sectors that move Nigeria forward</h2>
            </div>
          </Reveal>
          <div className="grid-3" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
            {SECTORS.slice(0, 4).map((s) => (
              <Reveal key={s.num}><a href="#/sectors" className="card" onClick={(e) => { e.preventDefault(); navigate("sectors"); }}>
                <span className="num">{s.num}</span><h3>{s.title}</h3><p>{s.blurb}</p>
              </a></Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "#fff" }}>
        <div className="container grid-2">
          <Reveal><div className="media-frame" style={{ height: 320 }}><img src="assets/img/fleet.png" alt="Rich-Will branded delivery fleet" /></div></Reveal>
          <Reveal>
            <div className="eyebrow">Who we are</div>
            <h2>A diversified company founded on integrity, professionalism and innovation</h2>
            <p>Every project we undertake reflects an unwavering commitment to excellence and customer satisfaction — from healthcare delivery to real estate, trade and energy.</p>
            <div>{VALUES.map((v) => <span key={v.title} className="tag">{v.title}</span>)}</div>
            <div style={{ marginTop: 18 }}><a href="#/about" onClick={(e) => { e.preventDefault(); navigate("about"); }} style={{ fontWeight: 700 }}>Meet the company →</a></div>
          </Reveal>
        </div>
      </section>

      <section>
        <div className="container">
          <Reveal><div className="section-head"><div className="eyebrow">See it in motion</div><h2>Rich-Will, at work</h2></div></Reveal>
          <Reveal><video src="assets/video/company-overview.mp4" poster="assets/img/fleet.png" autoPlay playsInline muted loop /></Reveal>
        </div>
      </section>

      <section className="dark-band">
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <Reveal>
            <div className="eyebrow" style={{ color: "#ff9d9f" }}>Giving back</div>
            <h2>The Rich-Will Foundation</h2>
            <p>Our NGO stands with widows and children — extending the same commitment we bring to business into the communities we serve.</p>
          </Reveal>
          <a href="#/foundation" className="btn btn-white" onClick={(e) => { e.preventDefault(); navigate("foundation"); }}>Visit the Foundation</a>
        </div>
      </section>

      <section>
        <div className="container cta-band">
          <div>
            <h2>Let's do business.</h2>
            <p style={{ color: "#c9d2ea" }}>Hospitals, pharmacies, developers, institutions or individuals — reach out and we'll respond promptly.</p>
            <div style={{ display: "flex", gap: 18, flexWrap: "wrap", marginTop: 12 }}>
              <a href="tel:+2348030776983" style={{ color: "#fff", fontWeight: 700 }}>0803 077 6983</a>
              <a href="mailto:richwillintegratedventures@gmail.com" style={{ color: "#fff", fontWeight: 700 }}>richwillintegratedventures@gmail.com</a>
            </div>
          </div>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="#/contact" className="btn btn-white" onClick={(e) => { e.preventDefault(); navigate("contact"); }}>Contact details</a>
            <a href={WA_LINK} target="_blank" rel="noopener noreferrer" className="btn btn-wa">WhatsApp us</a>
          </div>
        </div>
      </section>
    </>
  );
}

function AboutPage({ navigate }) {
  return (
    <>
      <section style={{ paddingBottom: 40 }}>
        <div className="container">
          <div className="eyebrow">About us</div>
          <h1>Excellence, across every venture we run.</h1>
        </div>
      </section>
      <section style={{ paddingTop: 0 }}>
        <div className="container grid-2">
          <Reveal>
            <h2>Company overview</h2>
            <p>Rich-Will Integrated Venture and Commodities Limited is a dynamic, diversified company committed to excellence across multiple sectors. With active operations in pharmaceuticals, real estate, logistics, import and export, and oil and gas, we deliver innovative solutions and high-quality services that enhance lives, drive economic growth and build sustainable partnerships.</p>
            <p>Our business philosophy is founded on integrity, professionalism and innovation — ensuring that every project we undertake reflects our unwavering commitment to excellence and customer satisfaction.</p>
          </Reveal>
          <Reveal><div className="media-frame" style={{ height: 300 }}><img src="assets/img/port.png" alt="Global trade — air, sea and road" /></div></Reveal>
        </div>
      </section>
      <section style={{ background: "#fff" }}>
        <div className="container grid-2">
          <Reveal><div className="value-card"><b>Vision</b><span>To be a leading global enterprise recognized for excellence, integrity and innovation across pharmaceuticals, real estate, logistics, import and export, and oil and gas.</span></div></Reveal>
          <Reveal><div className="value-card"><b>Mission</b><span>To consistently provide exceptional products and services through efficient systems, professional expertise and customer-centric solutions that create value for all stakeholders.</span></div></Reveal>
        </div>
      </section>
      <section>
        <div className="container">
          <Reveal><div className="section-head"><div className="eyebrow">Core values</div><h2>What we hold ourselves to</h2></div></Reveal>
          <div className="grid-3" style={{ gridTemplateColumns: "repeat(5,1fr)" }}>
            {VALUES.map((v) => <Reveal key={v.title}><div className="value-card"><b>{v.title}</b><span>{v.blurb}</span></div></Reveal>)}
          </div>
        </div>
      </section>
      <section style={{ background: "#fff" }}>
        <div className="container">
          <Reveal><div className="section-head"><div className="eyebrow">Leadership</div><h2>Management team</h2></div></Reveal>
          <div className="team-grid">
            {TEAM.map((m) => (
              <Reveal key={m.name}><div className="team-card"><img src={m.img} alt={m.name} /><b>{m.name}</b><span>{m.role}</span></div></Reveal>
            ))}
          </div>
        </div>
      </section>
      <section>
        <div className="container cta-simple">
          <Reveal>
            <h2>See what we do, sector by sector.</h2>
            <a href="#/sectors" className="btn btn-primary" onClick={(e) => { e.preventDefault(); navigate("sectors"); }}>Our business sectors</a>
          </Reveal>
        </div>
      </section>
    </>
  );
}

function SectorsPage({ navigate }) {
  return (
    <>
      <section style={{ paddingBottom: 40 }}>
        <div className="container">
          <div className="eyebrow">Business sectors</div>
          <h1>Seven sectors, one commitment to quality.</h1>
        </div>
      </section>
      <section style={{ paddingTop: 0 }}>
        <div className="container">
          {SECTORS.map((s) => (
            <Reveal key={s.num} className="sector-row">
              <div>
                <span className="sector-num">{s.num}</span>
                <h2 style={{ marginTop: 8 }}>{s.title}</h2>
                <p>{s.body}</p>
              </div>
              <div className="sector-img"><img src={s.img} alt={s.title} /></div>
            </Reveal>
          ))}
        </div>
      </section>
      <section style={{ background: "#fff" }}>
        <div className="container grid-2">
          <Reveal>
            <div className="eyebrow">Who we serve</div>
            <h2>Target market</h2>
            <p>Hospitals and medical centers, pharmacies (wholesale and retail), restaurants, eateries and bars, educational institutions, real estate developers — plus individuals and corporate bodies.</p>
            <div>{["Hospitals", "Pharmacies", "Restaurants & bars", "Schools", "Developers", "Corporate bodies"].map((t) => <span key={t} className="tag">{t}</span>)}</div>
          </Reveal>
          <Reveal>
            <div className="eyebrow">Our network</div>
            <h2>Partners</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {PARTNERS.map((p) => (
                <div key={p.group} className="value-card"><b>{p.group}</b><span>{p.names}</span></div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
      <section>
        <div className="container cta-simple">
          <Reveal>
            <h2>Want to work with a sector team?</h2>
            <a href="#/contact" className="btn btn-primary" onClick={(e) => { e.preventDefault(); navigate("contact"); }}>Get in touch</a>
          </Reveal>
        </div>
      </section>
    </>
  );
}

function FoundationPage({ navigate }) {
  return (
    <>
      <section className="hero" style={{ paddingBottom: 70 }}>
        <div className="container">
          <div className="eyebrow" style={{ color: "#8fb3ff" }}>Our NGO</div>
          <h1 style={{ maxWidth: 640 }}>Standing with widows and children.</h1>
          <p style={{ maxWidth: 560 }}>The Rich-Will Foundation extends the values behind our business — integrity, care and commitment — to the people who need them most.</p>
          <a href={WA_LINK} target="_blank" rel="noopener noreferrer" className="btn btn-primary">Reach out to support</a>
        </div>
      </section>
      <section>
        <div className="container grid-2">
          <Reveal>
            <h2>What we do</h2>
            <p>The Foundation supports widows and children through outreach, welfare and empowerment initiatives in the communities where Rich-Will operates.</p>
          </Reveal>
          <Reveal><div className="media-frame" style={{ height: 300 }}><img src="assets/img/foundation-hero.png" alt="Rich-Will Foundation community outreach" /></div></Reveal>
        </div>
      </section>
      <section style={{ background: "#fff" }}>
        <div className="container">
          <Reveal><div className="section-head"><div className="eyebrow">Gallery</div><h2>Moments from the field</h2></div></Reveal>
          <div className="gallery-grid">
            <img src="assets/img/foundation-gallery-1.png" alt="Foundation outreach" />
            <img src="assets/img/foundation-gallery-2.png" alt="Foundation community" />
            <img src="assets/img/foundation-gallery-3.png" alt="Foundation programme" />
            <img src="assets/img/foundation-gallery-4.png" alt="Foundation event" />
          </div>
        </div>
      </section>
      <section>
        <div className="container">
          <Reveal><div className="section-head"><div className="eyebrow">Watch</div><h2>Our impact, in the field</h2></div></Reveal>
          <Reveal><video src="assets/video/foundation-impact.mp4" autoPlay playsInline muted loop /></Reveal>
        </div>
      </section>
      <section>
        <div className="container cta-band">
          <div><h2>Want to partner or give?</h2><p style={{ color: "#c9d2ea" }}>Reach the team directly — every conversation helps a widow or a child.</p></div>
          <a href="#/contact" className="btn btn-white" onClick={(e) => { e.preventDefault(); navigate("contact"); }}>Contact us</a>
        </div>
      </section>
    </>
  );
}

function ContactPage() {
  return (
    <>
      <section style={{ paddingBottom: 30 }}>
        <div className="container">
          <div className="eyebrow">Contact</div>
          <h1>Reach us. We respond.</h1>
          <p>Call, email or message us on WhatsApp — for business enquiries, partnerships or the Foundation.</p>
        </div>
      </section>
      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="grid-3">
            <Reveal><div className="contact-card"><b>Call us</b>
              <a href="tel:+2348030776983">0803 077 6983</a>
              <a href="tel:+2348080763238">0808 076 3238</a>
              <a href="tel:+2348157799184">0815 779 9184</a>
              <a href="tel:+2348157799150">0815 779 9150</a>
            </div></Reveal>
            <Reveal><div className="contact-card"><b>Email</b>
              <a href="mailto:richwillintegratedventures@gmail.com">richwillintegratedventures@gmail.com</a>
              <p style={{ marginTop: 8 }}>We aim to reply within one business day.</p>
            </div></Reveal>
            <Reveal><div className="contact-card"><b>WhatsApp</b>
              <p>The fastest way to reach us — message the team directly and get a same-day response.</p>
              <a href={WA_LINK} target="_blank" rel="noopener noreferrer" className="btn btn-wa" style={{ marginTop: 10 }}>Start a chat</a>
            </div></Reveal>
          </div>
          <Reveal>
            <div className="contact-card" style={{ marginTop: 22, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div><b style={{ marginBottom: 4 }}>Follow us</b><span style={{ fontSize: 14, color: "#4b5063" }}>@rich-willintegrated · @rich-will integrated ventures</span></div>
              <div className="social-row" style={{ margin: 0 }}>
                <a href="#" aria-label="Instagram" style={{ background: "rgba(30,58,120,.08)" }}><Icon name="instagram" size={16} fill="#1E3A78" /></a>
                <a href="#" aria-label="Facebook" style={{ background: "rgba(30,58,120,.08)" }}><Icon name="facebook" size={16} fill="#1E3A78" /></a>
                <a href="#" aria-label="LinkedIn" style={{ background: "rgba(30,58,120,.08)" }}><Icon name="linkedin" size={16} fill="#1E3A78" /></a>
                <a href="#" aria-label="X" style={{ background: "rgba(30,58,120,.08)" }}><Icon name="twitter" size={14} fill="#1E3A78" /></a>
                <a href="#" aria-label="TikTok" style={{ background: "rgba(30,58,120,.08)" }}><Icon name="tiktok" size={15} fill="#1E3A78" /></a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}

const PAGES = { home: HomePage, about: AboutPage, sectors: SectorsPage, foundation: FoundationPage, contact: ContactPage };
const TITLES = {
  home: "Rich-Will Integrated Venture and Commodities Ltd",
  about: "About — Rich-Will Integrated Venture and Commodities Ltd",
  sectors: "Business Sectors — Rich-Will Integrated Venture and Commodities Ltd",
  foundation: "Foundation — Rich-Will",
  contact: "Contact — Rich-Will Integrated Venture and Commodities Ltd",
};

function getPageFromHash() {
  const h = window.location.hash.replace(/^#\/?/, "");
  return PAGES[h] ? h : "home";
}

function App() {
  const [page, setPage] = useState(getPageFromHash());
  useEffect(() => {
    const onHash = () => setPage(getPageFromHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  useEffect(() => {
    document.title = TITLES[page];
    window.scrollTo(0, 0);
  }, [page]);
  const navigate = (p) => { window.location.hash = `/${p}`; };
  const Page = PAGES[page];
  return (
    <>
      <Header page={page} navigate={navigate} />
      <Page navigate={navigate} />
      <Footer navigate={navigate} />
      <WhatsAppFab />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);