
import React from 'react'
import { Helmet } from 'react-helmet-async'

export default function Contact() {
  return (
    <>
      <Helmet>
        <title>Contact Us - Annaville Seventh-day Adventist Church</title>
        <meta name="description" content="Contact Annaville SDA Church in Corpus Christi, TX. Get in touch with our pastoral team, ministries, or general inquiries. We're here to help!" />
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Church",
            "name": "Annaville Seventh-day Adventist Church",
            "address": {
              "@type": "PostalAddress",
              "streetAddress": "2710 Violet Rd",
              "addressLocality": "Corpus Christi",
              "addressRegion": "TX",
              "postalCode": "78410"
            },
            "telephone": "+1-361-241-5501",
            "email": "info@annavillesda.org",
            "url": "https://annavillesda.org",
            "openingHours": "Sa 09:45-12:00",
            "contactPoint": {
              "@type": "ContactPoint",
              "telephone": "+1-361-241-5501",
              "contactType": "customer service",
              "availableLanguage": "English"
            }
          })}
        </script>
      </Helmet>

      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-sand to-surface py-24">
        <div className="container">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="font-heading text-h1 mb-8">Get in Touch</h1>
            <p className="text-body text-lg mb-10">
              We'd love to hear from you! Whether you have questions, need prayer,
              or want to get involved, we're here to help.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid lg:grid-cols-2 gap-24">

            {/* Contact Information */}
            <div className="space-y-16">
              <div>
                <h2 className="font-heading text-h2 mb-10">Contact Information</h2>
                <div className="space-y-10">
                  <div className="flex items-start gap-4 p-6 bg-white border border-subtle rounded-lg">
                    <div className="bg-primary/10 p-3 rounded-full">
                      <span className="text-primary text-2xl">📍</span>
                    </div>
                    <div>
                      <h3 className="font-heading text-h3 mb-2">Visit Us</h3>
                      <p className="text-body">
                        2710 Violet Rd<br />
                        Corpus Christi, TX 78410
                      </p>
                      <a
                        href="https://maps.google.com/?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410"
                        className="text-primary hover:text-primaryHover transition-colors text-sm"
                        target="_blank"
                        rel="noreferrer"
                      >
                        Get Directions →
                      </a>
                    </div>
                  </div>

                  <div className="flex items-start gap-4 p-6 bg-white border border-subtle rounded-lg">
                    <div className="bg-primary/10 p-3 rounded-full">
                      <span className="text-primary text-2xl">📞</span>
                    </div>
                    <div>
                      <h3 className="font-heading text-h3 mb-2">Call Us</h3>
                      <p className="text-body">
                        <a
                          href="tel:+13612415501"
                          className="text-primary hover:text-primaryHover transition-colors"
                        >
                          (361) 241-5501
                        </a>
                      </p>
                      <p className="text-muted text-sm">Available during office hours</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4 p-6 bg-white border border-subtle rounded-lg">
                    <div className="bg-primary/10 p-3 rounded-full">
                      <span className="text-primary text-2xl">✉️</span>
                    </div>
                    <div>
                      <h3 className="font-heading text-h3 mb-2">Email Us</h3>
                      <p className="text-body">
                        <a
                          href="mailto:info@annavillesda.org"
                          className="text-primary hover:text-primaryHover transition-colors"
                        >
                          info@annavillesda.org
                        </a>
                      </p>
                      <p className="text-muted text-sm">We'll respond within 24 hours</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Service Times */}
              <div className="p-6 bg-sand rounded-lg">
                <h3 className="font-heading text-h3 mb-4">Service Times</h3>
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="font-medium">Sabbath School:</span>
                    <span>9:45 AM</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="font-medium">Divine Worship:</span>
                    <span>11:00 AM</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="font-medium">Office Hours:</span>
                    <span>Mon-Fri 9AM-5PM</span>
                  </div>
                </div>
              </div>

              {/* Map */}
              <div>
                <h3 className="font-heading text-h3 mb-4">Find Us</h3>
                <iframe
                  title="Map to Annaville Seventh-day Adventist Church"
                  className="w-full h-64 rounded-lg border border-subtle"
                  loading="lazy"
                  src="https://www.google.com/maps?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410&output=embed"
                  aria-label="Interactive map showing the location of Annaville Seventh-day Adventist Church"
                />
              </div>
            </div>

            {/* Facebook Message */}
            <div>
              <h2 className="font-heading text-h2 mb-10">Send Us a Message</h2>

              <div className="bg-white p-12 rounded-xl shadow-sm border border-subtle text-center space-y-8">
                <div className="text-6xl mb-4">💬</div>
                <h3 className="font-heading text-h3">Message Us on Facebook</h3>
                <p className="text-body text-muted max-w-md mx-auto">
                  The best way to reach us is through Facebook Messenger.
                  Send us a message and we'll respond as soon as possible.
                </p>
                <a
                  href="https://www.facebook.com/p/Annaville-Seventh-Day-Adventist-Church-100064540276273/"
                  target="_blank"
                  rel="noreferrer"
                  className="btn inline-flex items-center gap-3 text-lg px-8 py-4"
                >
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                  </svg>
                  Send Message on Facebook
                </a>
                <p className="text-sm text-muted">
                  You'll need to be logged into Facebook to send us a message
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Discussion Forum Section */}
      <section className="section bg-sand">
        <div className="container">
          <div className="max-w-4xl mx-auto">
            <h2 className="font-heading text-h2 mb-8">Discussion</h2>

            <div className="max-w-2xl mx-auto">
              {/* Contents Section */}
              <div className="bg-white p-8 rounded-lg border border-subtle">
                <h3 className="font-heading text-h3 mb-6">CONTENTS</h3>
                <div className="space-y-3">
                  <div className="text-sm">
                    <a href="#" className="text-primary hover:text-primaryHover font-medium">Jerry Stout</a>
                    <span className="text-muted ml-2">Elvin 27 Feb 2003</span>
                  </div>
                  <div className="text-sm ml-4">
                    <a href="#" className="text-primary hover:text-primaryHover">Re: Jerry Stout</a>
                    <span className="text-muted ml-2">Elvin 27 Feb 2003</span>
                  </div>
                  <div className="text-sm">
                    <a href="#" className="text-primary hover:text-primaryHover font-medium">Shelly Family</a>
                    <span className="text-muted ml-2">Elvin/Wallie 27 Feb 2003</span>
                  </div>
                  <div className="text-sm">
                    <a href="#" className="text-primary hover:text-primaryHover font-medium">Bill & Pat</a>
                    <span className="text-muted ml-2">Scarboroughs 26 Feb 2003</span>
                  </div>
                  <div className="text-sm ml-4">
                    <a href="#" className="text-primary hover:text-primaryHover">Bill & Pat</a>
                    <span className="text-muted ml-2">Elvin 27 Feb 2003</span>
                  </div>
                  <div className="text-sm">
                    <a href="#" className="text-primary hover:text-primaryHover font-medium">Potluck</a>
                    <span className="text-muted ml-2">Wallie 24 Feb 2003</span>
                  </div>
                  <div className="text-sm ml-4">
                    <a href="#" className="text-primary hover:text-primaryHover">Re: Potluck</a>
                    <span className="text-muted ml-2">bob 25 Feb 2003</span>
                  </div>
                  <div className="text-sm ml-4">
                    <a href="#" className="text-primary hover:text-primaryHover">Re: Potluck</a>
                    <span className="text-muted ml-2">bob 25 Feb 2003</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}
