import { VALUES } from '../data/content';
import { PageHero, SectionHeading } from '../components/ui/SectionHeading';
import { FadeIn } from '../components/ui/Motion';
import { LinkButton } from '../components/ui/Button';

export function AboutPage() {
  return (
    <>
      <PageHero
        title="About Us"
        subtitle="Person-centred care guided by compassion, integrity, respect, and excellence."
      />
      <section className="px-4 py-16">
        <div className="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-2">
          <FadeIn>
            <div className="space-y-4 text-muted leading-relaxed">
              <p>
                Embrace HomeCare is a registered NDIS provider committed to genuine, flexible support. Our
                team works in partnership with you, your loved ones, and your support network so you receive
                care when and how you need it — in ways that are meaningful and respectful.
              </p>
              <p>
                We specialise in supporting people with complex mental health, behavioural, and medical needs,
                as well as older Australians who want to age with dignity at home and in the community.
              </p>
              <p>
                Wellbeing is more than physical health. Emotional connection, cultural identity, and spiritual
                fulfilment are essential to a rich, purposeful life — and we design supports that honour the
                whole person.
              </p>
            </div>
            <LinkButton to="/contact#book" className="mt-8">
              Book A Consultant
            </LinkButton>
          </FadeIn>
          <FadeIn delay={0.15}>
            <img
              src="https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=800&q=80"
              alt="Support worker and participant sharing a moment"
              className="rounded-2xl border border-theme shadow-xl"
            />
          </FadeIn>
        </div>
      </section>
      <section className="border-t border-theme bg-[var(--color-bg-alt)] px-4 py-16">
        <div className="mx-auto max-w-7xl">
          <SectionHeading eyebrow="Our values" title="What guides us every day" />
          <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {VALUES.map((v, i) => (
              <FadeIn key={v.title} delay={i * 0.08}>
                <div className="rounded-xl border border-theme p-5">
                  <h3 className="font-bold text-primary">{v.title}</h3>
                  <p className="mt-2 text-sm text-muted">{v.text}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}