import { Container } from '@/components/Container'
import React from 'react'

export default function About() {
   return (
    <main className="py-16">
      {/* Hero */}
      <section className="mb-16">
        <Container>
          <h1 className="text-4xl font-bold tracking-tight text-accent dark:text-white sm:text-5xl">
            About Us
          </h1>
          <p className="mt-4 max-w-3xl text-lg text-black dark:text-slate-300">
            We help families navigate estate settlement with clarity, fairness,
            and confidence during some of life’s most difficult moments.
          </p>
        </Container>
      </section>

      {/* Mission */}
      <section className="mb-16">
        <Container>
          <div className="grid gap-8 md:grid-cols-2">
            <div>
              <h2 className="text-2xl font-semibold text-accent dark:text-white">
                Our Mission
              </h2>
              <p className="mt-4 text-black dark:text-slate-300">
                Our mission is to simplify the estate settlement process by
                providing clear guidance, transparent options, and practical
                support to heirs and beneficiaries.
              </p>
              <p className="mt-4 text-black dark:text-slate-300">
                We believe families deserve straightforward answers and fair
                solutions — without pressure, confusion, or unnecessary delays.
              </p>
            </div>

            <div className="rounded-2xl bg-secondary p-6 dark:bg-slate-900">
              <h3 className="text-lg font-semibold text-accent dark:text-white">
                What We Focus On
              </h3>
              <ul className="mt-4 space-y-3 text-black dark:text-slate-300">
                <li>Understanding equitable property interests</li>
                <li>Resolving estate-related complications</li>
                <li>Supporting informed decision-making</li>
                <li>Helping families move forward</li>
              </ul>
            </div>
          </div>
        </Container>
      </section>

      {/* Who We Help */}
      <section className="mb-16">
        <Container>
          <h2 className="text-2xl font-semibold text-accent dark:text-white">
            Who We Help
          </h2>
          <p className="mt-4 max-w-3xl text-black dark:text-slate-300">
            We work with individuals and families facing estate-related
            decisions, including heirs, beneficiaries, executors, and those
            planning ahead for the future.
          </p>

          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {[
              "Heirs navigating inherited property",
              "Families managing shared ownership",
              "Executors handling estate responsibilities",
              "Individuals planning for future settlement",
              "Beneficiaries seeking clarity and options",
              "Families facing complex estate situations",
            ].map((item) => (
              <div
                key={item}
                className="rounded-2xl bg-secondary p-5 dark:border-slate-800"
              >
                <p className="text-black dark:text-slate-300">{item}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* Values */}
      <section className="mb-16 bg-secondary py-16 dark:bg-slate-900">
        <Container>
          <h2 className="text-2xl font-semibold text-accent dark:text-white">
            Our Values
          </h2>

          <div className="mt-8 grid gap-8 md:grid-cols-3">
            <Value
              title="Clarity"
              text="We explain options in plain language so you can make informed decisions."
            />
            <Value
              title="Integrity"
              text="We operate transparently and prioritize fair outcomes over quick solutions."
            />
            <Value
              title="Respect"
              text="Every situation is personal, and we treat each family with care and discretion."
            />
          </div>
        </Container>
      </section>

      {/* Disclaimer */}
      <section>
        <Container>
          <div className="rounded-2xl border border-accent bg-primary p-6 text-sm text-black dark:border-slate-800 dark:bg-slate-950 dark:text-slate-400">
            <p>
              <strong>Important Notice:</strong> We are not a law firm and do not
              provide legal or tax advice. When appropriate, we encourage
              consulting qualified attorneys or tax professionals.
            </p>
          </div>
        </Container>
      </section>
    </main>
  );
}

function Value({ title, text }: { title: string; text: string }) {
  return (
    <div className="rounded-2xl border border-accent bg-primary p-6 dark:border-slate-800 dark:bg-slate-950">
      <h3 className="text-lg font-semibold text-accent dark:text-white">
        {title}
      </h3>
      <p className="mt-3 text-black dark:text-slate-300">{text}</p>
    </div>
  );
}