import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { PageHero, SiteShell } from "@/components/SiteShell";
import { serverFetch, fallbackSettings, type SiteSettings } from "@/lib/api";

async function getSettings(): Promise<SiteSettings | null> {
  return serverFetch<SiteSettings>("/settings", 60);
}

const teamImages = [
  "https://images.unsplash.com/photo-1559027615-cd4628902d4a?auto=format&fit=crop&w=400&q=80",
  "https://images.unsplash.com/photo-1609220136736-443140cffec6?auto=format&fit=crop&w=400&q=80",
  "https://images.unsplash.com/photo-1542810634-71277d95dcbb?auto=format&fit=crop&w=400&q=80",
  "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=400&q=80",
];

export const metadata: Metadata = {
  title: "About Us",
  description: "Learn about Shanti Kritnischay Seva Foundation — our mission, vision, and the team working for change in Jharkhand.",
};

export default async function AboutPage() {
  const settings = await getSettings();
  const s = settings || fallbackSettings;

  const pillars = [
    {
      title: "Our Mission",
      icon: "🎯",
      text: "Education, health, digital access and community-led support delivered through a transparent system at the grassroots level — reaching those who need it most in Jharkhand.",
    },
    {
      title: "Our Vision",
      icon: "👁️",
      text: "A Jharkhand where every family can access opportunity, information and support with dignity — where no child is left behind due to poverty or geography.",
    },
    {
      title: "Legal Registration",
      icon: "⚖️",
      text: `Registered as a Section 8 (non-profit) Company under the Companies Act, 2013. Office: ${s.address}.`,
    },
  ];

  const values = [
    { label: "Transparency", icon: "🔍", desc: "Every rupee tracked with digital receipts and public reports." },
    { label: "Community First", icon: "🤝", desc: "Decisions made with and for the people we serve." },
    { label: "Measurable Impact", icon: "📈", desc: "Data-driven programs with reported outcomes." },
    { label: "Compassion", icon: "❤️", desc: "Treating every beneficiary with dignity and respect." },
    { label: "Sustainability", icon: "🌱", desc: "Long-term solutions over short-term fixes." },
    { label: "Innovation", icon: "💡", desc: "Using technology to amplify grassroots impact." },
  ];

  return (
    <SiteShell>
     

      {/* Main Story Section */}
      <section className="bg-white py-16 md:py-24">
        <div className="mx-auto max-w-[1280px] px-4 lg:px-6">
          <div className="grid items-center gap-14 lg:grid-cols-2">
            <div className="relative grid grid-cols-2 gap-4">
              <div className="space-y-4 translate-y-8">
                <div className="relative h-64 overflow-hidden rounded-[12px] border border-[var(--color-hairline)] group">
                  <Image src={teamImages[0]} alt="Volunteer" fill className="object-cover transition-transform duration-700 group-hover:scale-105" sizes="(max-width: 768px) 100vw, 50vw" />
                </div>
                <div className="relative h-48 overflow-hidden rounded-[12px] border border-[var(--color-hairline)] group">
                  <Image src={teamImages[1]} alt="Community" fill className="object-cover transition-transform duration-700 group-hover:scale-105" sizes="(max-width: 768px) 100vw, 50vw" />
                </div>
              </div>
              <div className="space-y-4">
                <div className="relative h-48 overflow-hidden rounded-[12px] border border-[var(--color-hairline)] group">
                  <Image src={teamImages[2]} alt="Children" fill className="object-cover transition-transform duration-700 group-hover:scale-105" sizes="(max-width: 768px) 100vw, 50vw" />
                </div>
                <div className="relative flex h-64 flex-col justify-center rounded-[12px] bg-[var(--color-canvas-night)] p-8 text-[var(--color-on-dark)]">
                  <span className="text-5xl" style={{ fontWeight: 500 }}>5+</span>
                  <span className="mt-2 text-lg font-medium text-[var(--color-on-dark)]/80">Years of Service</span>
                  <p className="mt-2 text-sm text-[var(--color-on-dark)]/60">Dedicated to uplifting lives across Jharkhand.</p>
                </div>
              </div>
            </div>

            <div className="space-y-8">
              <div>
                <span className="eyebrow">
                  <span className="eyebrow-dot" />
                  Who We Are
                </span>
                <h2 className="mt-5 text-4xl leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)] md:text-5xl" style={{ fontWeight: 500 }}>
                  You&apos;re the Hope of Others.
                </h2>
              </div>

              <div className="space-y-4 text-lg leading-7 text-[var(--color-ink-mute)]">
                <p>
                  {s.site_name} is a Section 8 (non-profit) company registered in Jharkhand, working at the grassroots level to bring education, healthcare, and digital empowerment to underserved families.
                </p>
                <p>
                  Founded with a belief that transparency and community involvement are the cornerstones of lasting change, we operate with full accountability — every program tracked, every rupee reported.
                </p>
              </div>

              <div className="grid grid-cols-2 gap-4 border-t border-[var(--color-hairline-cool)] pt-6 sm:grid-cols-4">
                {[
                  ["2400+", "Lives Impacted"],
                  ["12+", "Active Programs"],
                  ["8", "Districts Covered"],
                  ["100%", "Transparent"]
                ].map(([n, l]) => (
                  <div key={l} className="rounded-[12px] bg-[var(--color-canvas-soft)] p-4 text-center">
                    <p className="text-2xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>{n}</p>
                    <p className="mt-1 text-[10px] font-medium uppercase tracking-wider text-[var(--color-ink-mute)]">{l}</p>
                  </div>
                ))}
              </div>

              <div className="flex flex-wrap gap-3 pt-4">
                <Link href="/donate" className="btn">
                  Support Us
                </Link>
                <Link href="/contact" className="btn-outline">
                  Contact Us
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pillars Section */}
      <section className="border-t border-[var(--color-hairline-cool)] bg-[var(--color-canvas-soft)] py-16 md:py-24">
        <div className="mx-auto max-w-[1280px] px-4 lg:px-6">
          <div className="mb-14 text-center">
            <span className="eyebrow">
              <span className="eyebrow-dot" />
              What We Stand For
            </span>
            <h2 className="mt-5 text-4xl leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)] md:text-5xl" style={{ fontWeight: 500 }}>
              Mission &amp; Vision
            </h2>
          </div>

          <div className="grid gap-6 md:grid-cols-3">
            {pillars.map((pillar) => (
              <div key={pillar.title} className="rounded-[12px] border border-[var(--color-hairline)] bg-white p-10 transition-all duration-300 hover:-translate-y-1 hover:shadow-[var(--shadow-l2)]">
                <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-md bg-[var(--color-canvas-soft)] text-2xl">
                  {pillar.icon}
                </div>
                <h3 className="mb-4 text-2xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>{pillar.title}</h3>
                <p className="leading-7 text-[var(--color-ink-mute)]">
                  {pillar.text}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Core Values Section */}
      <section className="bg-white py-16 md:py-24">
        <div className="mx-auto max-w-[1280px] px-4 lg:px-6">
          <div className="mb-14 text-center">
            <span className="eyebrow">
              <span className="eyebrow-dot" />
              Our Core Values
            </span>
            <h2 className="mt-5 text-4xl leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)] md:text-5xl" style={{ fontWeight: 500 }}>
              What Drives Us
            </h2>
          </div>

          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {values.map((val) => (
              <div key={val.label} className="rounded-[12px] border border-[var(--color-hairline)] bg-white p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-[var(--shadow-l2)]">
                <div className="mb-4 text-3xl">{val.icon}</div>
                <h3 className="mb-3 text-xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>{val.label}</h3>
                <p className="text-sm leading-6 text-[var(--color-ink-mute)]">
                  {val.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section className="border-t border-[var(--color-hairline-cool)] bg-[var(--color-canvas-soft)] py-16 md:py-24">
        <div className="mx-auto max-w-[1280px] px-4 lg:px-6">
          <div className="mb-14 text-center">
            <span className="eyebrow">
              <span className="eyebrow-dot" />
              People Behind the Work
            </span>
            <h2 className="mt-5 text-4xl leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)] md:text-5xl" style={{ fontWeight: 500 }}>
              Meet Our Volunteers
            </h2>
            <p className="mx-auto mt-4 max-w-2xl text-lg leading-7 text-[var(--color-ink-mute)]">
              Passionate individuals from across Jharkhand who give their time to build a better community.
            </p>
          </div>

          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            {[
              ["Wilis Maron", "Field Coordinator", teamImages[0]],
              ["Amelia Maria", "Program Lead", teamImages[1]],
              ["Diana Gray", "Community Liaison", teamImages[2]],
              ["John Wiley", "Finance & Reports", teamImages[3]],
            ].map(([name, role, img]) => (
              <div key={name} className="group rounded-[12px] border border-[var(--color-hairline)] bg-white p-6 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-[var(--shadow-l2)]">
                <div className="relative mx-auto mb-6 h-28 w-28 overflow-hidden rounded-full border border-[var(--color-hairline-cool)]">
                  <Image src={img} alt={name} fill className="object-cover transition-transform duration-500 group-hover:scale-110" loading="lazy" />
                </div>
                <h3 className="text-lg text-[var(--color-ink)] transition-colors group-hover:text-[var(--color-primary-deep)]" style={{ fontWeight: 500 }}>{name}</h3>
                <p className="mt-1 text-xs font-medium uppercase tracking-wider text-[var(--color-ink-mute)]">{role}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-white py-16 md:py-24">
        <div className="mx-auto max-w-[1280px] px-4 lg:px-6">
          <div className="rounded-[12px] border border-[var(--color-hairline)] bg-white p-10 text-center shadow-[var(--shadow-l1)] md:p-16">
            <h2 className="text-3xl leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)] md:text-5xl" style={{ fontWeight: 500 }}>
              Ready to Make a Difference?
            </h2>
            <p className="mx-auto mt-4 max-w-2xl text-lg leading-7 text-[var(--color-ink-mute)]">
              Join thousands of supporters who are changing lives in Jharkhand. Your action today defines their tomorrow.
            </p>
            <div className="mt-9 flex flex-col justify-center gap-3 sm:flex-row">
              <Link href="/donate" className="btn">
                Donate Now
              </Link>
              <Link href="/membership" className="btn-outline">
                Join as Volunteer
              </Link>
            </div>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}