import Link from "next/link";

export default function Home() {
  return (
    <div>
      <section className="max-w-4xl mx-auto px-6 pt-20 pb-16 text-center">
        <p className="text-sm uppercase tracking-[0.2em] text-[var(--color-accent)] mb-4">
          A 501(c)(3) Nonprofit
        </p>
        <h1 className="text-5xl md:text-6xl font-semibold tracking-tight text-[var(--color-primary-dark)] leading-tight">
          Lessons in compassion,<br />taught by the animals.
        </h1>
        <p className="mt-6 text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto leading-relaxed">
          The Simple Heart Initiative builds a mass movement for open rescue —
          through investigation, storytelling, and direct action on behalf of animals
          who cannot speak for themselves.
        </p>
        <div className="mt-10 flex gap-4 justify-center flex-wrap">
          <a
            href="https://savethedogs.io"
            className="inline-block bg-[var(--color-primary-dark)] text-white px-6 py-3 rounded-md font-medium hover:bg-[var(--color-primary)] transition"
          >
            Save the Dogs Campaign
          </a>
          <a
            href="https://blog.simpleheart.org"
            className="inline-block border border-[var(--color-primary-dark)] text-[var(--color-primary-dark)] px-6 py-3 rounded-md font-medium hover:bg-[var(--color-surface-muted)] transition"
          >
            Read the Blog
          </a>
        </div>
      </section>

      <section className="bg-[var(--color-surface-muted)] py-16">
        <div className="max-w-4xl mx-auto px-6 grid md:grid-cols-3 gap-10">
          <div>
            <h3 className="font-semibold text-lg text-[var(--color-primary-dark)] mb-2">Open Rescue</h3>
            <p className="text-[var(--color-text-secondary)] text-sm leading-relaxed">
              Nonviolent action to bring suffering animals to safety — out in the open, with a camera rolling,
              and with the willingness to answer for it in a court of law.
            </p>
          </div>
          <div>
            <h3 className="font-semibold text-lg text-[var(--color-primary-dark)] mb-2">Investigation</h3>
            <p className="text-[var(--color-text-secondary)] text-sm leading-relaxed">
              Documenting the conditions inside factory farms and research facilities so the public can
              see what industry works hard to hide.
            </p>
          </div>
          <div>
            <h3 className="font-semibold text-lg text-[var(--color-primary-dark)] mb-2">Storytelling</h3>
            <p className="text-[var(--color-text-secondary)] text-sm leading-relaxed">
              Sharing the stories of individual animals — and the humans who love them —
              to build a movement rooted in the simple heart we all share.
            </p>
          </div>
        </div>
      </section>

      <section className="max-w-4xl mx-auto px-6 py-20">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-3xl font-semibold text-[var(--color-primary-dark)] tracking-tight">
              Save the Dogs at Ridglan Farms
            </h2>
            <p className="mt-4 text-[var(--color-text-secondary)] leading-relaxed">
              On April 19, 2026, hundreds of activists, veterinarians, and faith leaders will gather
              in Wisconsin to rescue beagles from one of the largest dog-breeding facilities in the United States.
              A judge has already found probable cause of felony animal cruelty. Zero dogs have been freed.
            </p>
            <Link
              href="https://savethedogs.io"
              className="inline-block mt-6 text-[var(--color-accent)] font-medium hover:text-[var(--color-accent-hover)]"
            >
              Learn more & take action →
            </Link>
          </div>
          <div className="aspect-[4/3] bg-[var(--color-surface-muted)] rounded-lg border border-[var(--color-border)] flex items-center justify-center text-[var(--color-text-secondary)] text-sm">
            {/* Photo placeholder — swap for rescue imagery */}
            Photo: beagle rescue
          </div>
        </div>
      </section>
    </div>
  );
}
