import { Sparkles, UserCheck } from 'lucide-react';
import { STORIES } from '../data/content';
import { PageHero } from '../components/ui/SectionHeading';
import { FadeIn } from '../components/ui/Motion';
import { LinkButton } from '../components/ui/Button';

export function StoriesPage() {
  return (
    <>
      <PageHero
        title="Participant & Carer Stories"
        subtitle="Real experiences, personal milestones, and inspiring journeys from our Victorian community."
      />

      <section className="px-4 py-16">
        <div className="mx-auto max-w-6xl space-y-10">
          <div className="grid gap-8 md:grid-cols-3">
            {STORIES.map((story, i) => (
              <FadeIn key={story.id} delay={i * 0.1}>
                <div className="flex h-full flex-col justify-between rounded-3xl border border-theme bg-[var(--color-surface)] p-6 shadow-sm transition-all hover:border-primary hover:shadow-xl">
                  <div>
                    <div className="flex items-center gap-4 mb-4">
                      <img
                        src={story.avatar}
                        alt={story.name}
                        className="h-14 w-14 rounded-full object-cover border-2 border-primary/20 shadow"
                      />
                      <div>
                        <h3 className="font-bold text-base text-[var(--color-text)]">{story.name}</h3>
                        <p className="text-xs font-semibold text-primary">{story.role}</p>
                        <p className="text-[11px] text-muted">{story.location}</p>
                      </div>
                    </div>

                    <span className="inline-block rounded-full bg-primary/10 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-primary mb-3">
                      {story.serviceUsed}
                    </span>

                    <blockquote className="text-xs italic text-[var(--color-text)] leading-relaxed border-l-2 border-primary pl-3 py-1 mb-4">
                      "{story.quote}"
                    </blockquote>

                    <p className="text-xs text-muted leading-relaxed">{story.fullStory}</p>
                  </div>

                  <div className="mt-6 pt-4 border-t border-theme flex items-center justify-between text-[11px] text-muted">
                    <span className="flex items-center gap-1 font-semibold text-primary">
                      <UserCheck className="h-3.5 w-3.5" /> Verified Embrace Story
                    </span>
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>

          <FadeIn className="rounded-3xl border border-theme bg-[var(--color-bg-alt)] p-8 text-center shadow-lg space-y-3">
            <span className="inline-flex items-center gap-1 text-xs font-bold text-primary uppercase tracking-wider">
              <Sparkles className="h-4 w-4" /> Share Your Journey
            </span>
            <h3 className="text-2xl font-bold text-[var(--color-text)]">Are You an Embrace Participant or Carer?</h3>
            <p className="text-xs text-muted max-w-md mx-auto">
              We would love to feature your story and celebrate your achievements in our community journal.
            </p>
            <div className="pt-2">
              <LinkButton to="/contact">Contact Our Community Team</LinkButton>
            </div>
          </FadeIn>
        </div>
      </section>
    </>
  );
}