export default function UnstoppableFamiliesMockSite() {
  return (
    <div className="min-h-screen bg-[#f7f4ef] text-slate-900">
      <header className="border-b border-slate-200 bg-white/80 backdrop-blur sticky top-0 z-30">
        <div className="mx-auto max-w-7xl px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="h-12 w-12 rounded-full bg-[#0f2747] text-[#d4a73f] flex items-center justify-center shadow-sm text-xl font-semibold">
              UF
            </div>
            <div>
              <div className="text-lg font-semibold tracking-wide text-[#0f2747]">Unstoppable Families Foundation</div>
              <div className="text-xs uppercase tracking-[0.28em] text-[#b4892e]">Redefining Disability With Strength &amp; Dignity</div>
            </div>
          </div>
          <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-700">
            <a href="#mission" className="hover:text-[#0f2747]">Mission</a>
            <a href="#story" className="hover:text-[#0f2747]">Our Story</a>
            <a href="#impact" className="hover:text-[#0f2747]">Impact</a>
            <a href="#involved" className="hover:text-[#0f2747]">Get Involved</a>
          </nav>
          <button className="rounded-2xl bg-[#0f2747] px-5 py-3 text-sm font-semibold text-white shadow-md hover:opacity-95 transition">
            Donate Now
          </button>
        </div>
      </header>

      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#0f2747] via-[#183863] to-[#102849]" />
        <div className="absolute inset-0 opacity-20" style={{backgroundImage:"radial-gradient(circle at top left, #d4a73f 0, transparent 25%), radial-gradient(circle at bottom right, #d4a73f 0, transparent 20%)"}} />
        <div className="relative mx-auto max-w-7xl px-6 py-20 md:py-28 grid gap-14 lg:grid-cols-2 items-center">
          <div>
            <div className="inline-flex items-center rounded-full border border-[#d4a73f]/40 bg-white/10 px-4 py-2 text-sm text-[#f2dfb1] backdrop-blur">
              Advocacy • Family • Visibility • Strength
            </div>
            <h1 className="mt-6 text-5xl md:text-7xl font-semibold leading-tight text-white">
              Building a world where disability is seen as power, not limitation.
            </h1>
            <p className="mt-6 max-w-xl text-lg leading-8 text-slate-200">
              Unstoppable Families Foundation exists to reshape how society understands disability by honoring resilience, advocating for dignity, and elevating families whose strength too often goes unseen.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <button className="rounded-2xl bg-[#d4a73f] px-6 py-4 text-sm font-semibold text-[#0f2747] shadow-lg">
                Join the Movement
              </button>
              <button className="rounded-2xl border border-white/30 bg-white/10 px-6 py-4 text-sm font-semibold text-white backdrop-blur">
                Read Our Story
              </button>
            </div>
            <div className="mt-10 grid grid-cols-3 gap-4 max-w-xl">
              <div className="rounded-2xl bg-white/10 p-4 backdrop-blur border border-white/10">
                <div className="text-3xl font-semibold text-white">1</div>
                <div className="mt-2 text-sm text-slate-200">Mission rooted in lived experience</div>
              </div>
              <div className="rounded-2xl bg-white/10 p-4 backdrop-blur border border-white/10">
                <div className="text-3xl font-semibold text-white">∞</div>
                <div className="mt-2 text-sm text-slate-200">Potential beyond outdated narratives</div>
              </div>
              <div className="rounded-2xl bg-white/10 p-4 backdrop-blur border border-white/10">
                <div className="text-3xl font-semibold text-white">100%</div>
                <div className="mt-2 text-sm text-slate-200">Centered on dignity, love, and advocacy</div>
              </div>
            </div>
          </div>

          <div className="relative">
            <div className="absolute -inset-4 rounded-[2rem] bg-[#d4a73f]/20 blur-2xl" />
            <div className="relative rounded-[2rem] bg-white p-6 shadow-2xl border border-slate-100">
              <div className="rounded-[1.5rem] bg-[#f7f4ef] p-8">
                <div className="mx-auto h-28 w-28 rounded-full bg-[#0f2747] text-[#d4a73f] flex items-center justify-center text-4xl font-semibold shadow-lg">
                  UF
                </div>
                <div className="mt-6 text-center">
                  <h2 className="text-3xl font-semibold text-[#0f2747]">Unstoppable Families</h2>
                  <p className="mt-2 text-sm uppercase tracking-[0.3em] text-[#b4892e]">Foundation</p>
                  <p className="mt-4 text-slate-600 leading-7">
                    A nonprofit vision dedicated to challenging narrow disability narratives and replacing them with truth, visibility, and respect.
                  </p>
                </div>
                <div className="mt-8 grid gap-4 sm:grid-cols-2">
                  <div className="rounded-2xl bg-white p-5 shadow-sm border border-slate-100">
                    <div className="text-sm font-semibold text-[#0f2747]">Our Vision</div>
                    <div className="mt-2 text-sm leading-6 text-slate-600">Disability as resilience, adaptability, and human strength.</div>
                  </div>
                  <div className="rounded-2xl bg-white p-5 shadow-sm border border-slate-100">
                    <div className="text-sm font-semibold text-[#0f2747]">Our Promise</div>
                    <div className="mt-2 text-sm leading-6 text-slate-600">Families seen fully, supported honestly, and valued publicly.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="mission" className="mx-auto max-w-7xl px-6 py-20">
        <div className="grid gap-8 lg:grid-cols-3">
          <div className="lg:col-span-1">
            <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#b4892e]">What We Stand For</p>
            <h3 className="mt-4 text-4xl font-semibold text-[#0f2747] leading-tight">A mission that trades pity for power.</h3>
          </div>
          <div className="lg:col-span-2 grid gap-6 md:grid-cols-3">
            <div className="rounded-[1.5rem] bg-white p-7 shadow-sm border border-slate-100">
              <div className="text-lg font-semibold text-[#0f2747]">Reshape Perception</div>
              <p className="mt-3 text-slate-600 leading-7">Challenge outdated ideas about disability and replace them with a fuller, stronger, more honest understanding.</p>
            </div>
            <div className="rounded-[1.5rem] bg-white p-7 shadow-sm border border-slate-100">
              <div className="text-lg font-semibold text-[#0f2747]">Champion Families</div>
              <p className="mt-3 text-slate-600 leading-7">Honor disabled parents, children, and caregivers whose lives reflect courage, ingenuity, and deep love every day.</p>
            </div>
            <div className="rounded-[1.5rem] bg-white p-7 shadow-sm border border-slate-100">
              <div className="text-lg font-semibold text-[#0f2747]">Build Visibility</div>
              <p className="mt-3 text-slate-600 leading-7">Create a future where disabled individuals are recognized as capable, valuable, and fully worthy of opportunity.</p>
            </div>
          </div>
        </div>
      </section>

      <section id="story" className="bg-white border-y border-slate-200">
        <div className="mx-auto max-w-7xl px-6 py-20 grid gap-12 lg:grid-cols-[1.1fr_0.9fr] items-center">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#b4892e]">Founder Story</p>
            <h3 className="mt-4 text-4xl font-semibold text-[#0f2747] leading-tight">Born from lived experience, built for lasting change.</h3>
            <p className="mt-6 text-lg leading-8 text-slate-700">
              This foundation begins with a simple but radical truth: disabled people are not defined by what they lack, but by the strength they live, the love they give, and the futures they build.
            </p>
            <p className="mt-4 text-lg leading-8 text-slate-700">
              Unstoppable Families Foundation exists to help the world see what has always been there: resilience, leadership, parenthood, creativity, and human worth that should never have been overlooked.
            </p>
          </div>
          <div className="rounded-[2rem] bg-[#0f2747] p-8 text-white shadow-xl">
            <div className="text-sm uppercase tracking-[0.28em] text-[#f2dfb1]">Why It Matters</div>
            <ul className="mt-6 space-y-5 text-slate-100">
              <li className="rounded-2xl border border-white/10 bg-white/5 p-5">Disability deserves visibility without reduction.</li>
              <li className="rounded-2xl border border-white/10 bg-white/5 p-5">Families deserve advocacy without apology.</li>
              <li className="rounded-2xl border border-white/10 bg-white/5 p-5">Children deserve a wider story about strength, dignity, and possibility.</li>
            </ul>
          </div>
        </div>
      </section>

      <section id="impact" className="mx-auto max-w-7xl px-6 py-20">
        <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#b4892e]">Impact Vision</p>
            <h3 className="mt-4 text-4xl font-semibold text-[#0f2747]">How change begins.</h3>
          </div>
          <p className="max-w-2xl text-lg leading-8 text-slate-600">
            This mockup positions your foundation as both deeply human and institutionally credible, the kind of organization that belongs in family homes, media stories, donor conversations, and policy rooms.
          </p>
        </div>
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          <div className="rounded-[1.5rem] border border-slate-200 bg-[#fffaf1] p-7">
            <div className="text-3xl font-semibold text-[#0f2747]">01</div>
            <div className="mt-3 text-xl font-semibold text-[#0f2747]">Education</div>
            <p className="mt-3 text-slate-600 leading-7">Teaching communities to see disability through truth, not stereotype.</p>
          </div>
          <div className="rounded-[1.5rem] border border-slate-200 bg-white p-7">
            <div className="text-3xl font-semibold text-[#0f2747]">02</div>
            <div className="mt-3 text-xl font-semibold text-[#0f2747]">Advocacy</div>
            <p className="mt-3 text-slate-600 leading-7">Helping families find voice, representation, and meaningful support.</p>
          </div>
          <div className="rounded-[1.5rem] border border-slate-200 bg-[#fffaf1] p-7">
            <div className="text-3xl font-semibold text-[#0f2747]">03</div>
            <div className="mt-3 text-xl font-semibold text-[#0f2747]">Legacy</div>
            <p className="mt-3 text-slate-600 leading-7">Changing what the next generation believes is possible for disabled families.</p>
          </div>
        </div>
      </section>

      <section id="involved" className="bg-[#0f2747]">
        <div className="mx-auto max-w-7xl px-6 py-20">
          <div className="rounded-[2rem] bg-gradient-to-r from-[#132f55] to-[#0d2340] p-10 md:p-14 border border-white/10 shadow-2xl">
            <div className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] items-center">
              <div>
                <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#f2dfb1]">Get Involved</p>
                <h3 className="mt-4 text-4xl md:text-5xl font-semibold text-white leading-tight">Help build a future that sees disabled families clearly.</h3>
                <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-200">
                  Whether you donate, partner, advocate, or simply share the mission, you become part of a story that refuses to leave dignity on the sidelines.
                </p>
              </div>
              <div className="grid gap-4">
                <button className="rounded-2xl bg-[#d4a73f] px-6 py-4 text-base font-semibold text-[#0f2747] shadow-lg">Make a Donation</button>
                <button className="rounded-2xl bg-white/10 px-6 py-4 text-base font-semibold text-white border border-white/15">Become a Partner</button>
                <button className="rounded-2xl bg-white/10 px-6 py-4 text-base font-semibold text-white border border-white/15">Share Our Story</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer className="bg-[#09182b] text-slate-300">
        <div className="mx-auto max-w-7xl px-6 py-10 flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
          <div>
            <div className="text-lg font-semibold text-white">Unstoppable Families Foundation</div>
            <div className="mt-1 text-sm text-slate-400">Redefining Disability With Strength &amp; Dignity</div>
          </div>
          <div className="text-sm text-slate-400">Mock website concept for brand direction, launch planning, and nonprofit storytelling.</div>
        </div>
      </footer>
    </div>
  );
}