import React from 'react'
import { Helmet } from 'react-helmet-async'
import { Link } from 'react-router-dom'
import StaticMap from '../components/StaticMap'

export default function About(){
  return (
    <>
      <Helmet>
        <title>About Us - Annaville Seventh-day Adventist Church</title>
        <meta name="description" content="Learn about Annaville SDA Church in Corpus Christi, Texas. Our mission, location, and service times." />
      </Helmet>

      <section className="bg-gradient-to-br from-primary/15 via-sand/20 to-white py-20">
        <div className="container grid gap-12 lg:grid-cols-[1.4fr,1fr] items-center">
          <div className="space-y-6">
            <p className="text-xs uppercase tracking-[0.3em] text-primary font-semibold">
              Welcome to Annaville SDA Church
            </p>
            <h1 className="font-heading text-display30 text-ink max-w-3xl">
              A Community Growing Together in Faith, Hope, and Service
            </h1>
            <p className="text-body text-muted max-w-2xl">
              We are a family of believers in Corpus Christi, Texas, seeking to know Jesus, grow in faith, and serve our
              community. Whether you have been a long-time member or are visiting for the first time, you are welcome here.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Link to="/services" className="btn">Plan Your Visit</Link>
              <Link to="/contact" className="btn-outline">Contact the Church Office</Link>
            </div>
          </div>
          <div className="bg-white rounded-2xl shadow-level1 overflow-hidden">
            <img
              src="/assets/pray_heart.png"
              alt="Church members praying together"
              className="w-full h-64 object-cover"
            />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid lg:grid-cols-2 gap-24 items-start">
            <div className="space-y-10">
              <div>
                <h2 className="font-heading text-h2 mb-4">Our Mission</h2>
                <p className="text-body text-muted mb-6">
                  To know Jesus, grow in faith, and serve our community. We believe the gospel transforms lives and that the
                  church is called to share hope and practical compassion with everyone we meet.
                </p>
                <p className="text-body text-muted">
                  You will find vibrant worship, thoughtful Bible study, and many ways to connect through ministries for
                  children, youth, adults, and families.
                </p>
              </div>

              <div className="space-y-6">
                <h3 className="font-heading text-h3">Weekly Service Times</h3>
                <div className="space-y-4">
                  <div className="p-6 bg-sand/60 rounded-xl border border-subtle">
                    <p className="font-semibold text-ink">Sabbath School</p>
                    <p className="text-sm text-muted">Saturdays at 9:30 AM</p>
                  </div>
                  <div className="p-6 bg-sand/60 rounded-xl border border-subtle">
                    <p className="font-semibold text-ink">Divine Worship</p>
                    <p className="text-sm text-muted">Saturdays at 11:00 AM</p>
                  </div>
                  <div className="p-6 bg-sand/60 rounded-xl border border-subtle">
                    <p className="font-semibold text-ink">Potluck Fellowship Dinner</p>
                    <p className="text-sm text-muted">Immediately following the worship service</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="space-y-8">
              <div className="bg-white rounded-2xl shadow-level1 overflow-hidden">
                <StaticMap />
              </div>
              <div className="space-y-4">
                <h2 className="font-heading text-h2">Visit Us</h2>
                <p className="text-body text-muted">
                  We are located at 2710 Violet Road in Corpus Christi, Texas. Parking is available on site, and our
                  hospitality team will gladly help you find your way around.
                </p>
                <div className="flex flex-col md:flex-row gap-4">
                  <a
                    href="https://maps.google.com/?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="btn-outline flex-1 text-center"
                  >
                    View Map
                  </a>
                  <a
                    href="https://maps.google.com/directions?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="btn-outline flex-1 text-center"
                  >
                    Get Directions
                  </a>
                </div>
                <p className="text-sm text-muted">
                  Need a ride? Contact the church office and ask about transportation assistance.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}
