import type { Metadata } from 'next';
import Link from 'next/link';
import ContactForm from '@/components/public/ContactForm';
import { CLINIC_INFO } from '@/lib/clinic-info';

export const metadata: Metadata = {
  title: 'Contato',
  description:
    'Fale com a DentalFlow: telefone, e-mail, horário de atendimento e formulário de contato.',
};

export default function ContatoPage() {
  return (
    <>
      <section className="df-hero text-center">
        <div className="container">
          <h1 className="display-5 fw-bold mb-3">Fale com a gente</h1>
          <p className="lead mb-0 mx-auto" style={{ maxWidth: 640 }}>
            Tire suas dúvidas sobre tratamentos, convênios ou valores. Nossa
            equipe responde em até um dia útil.
          </p>
        </div>
      </section>

      <section className="container py-5">
        <div className="row g-4">
          <div className="col-lg-4">
            <div className="card border-0 shadow-sm mb-4">
              <div className="card-body p-4">
                <h2 className="h5 fw-bold mb-3">Atendimento</h2>
                <ul className="list-unstyled mb-0">
                  <li className="d-flex mb-3">
                    <i className="bi bi-telephone fs-5 text-primary me-3" aria-hidden="true" />
                    <div>
                      <div className="small text-muted">Telefone</div>
                      <a href={CLINIC_INFO.phoneHref} className="text-decoration-none fw-semibold">
                        {CLINIC_INFO.phone}
                      </a>
                    </div>
                  </li>
                  <li className="d-flex mb-3">
                    <i className="bi bi-envelope fs-5 text-primary me-3" aria-hidden="true" />
                    <div>
                      <div className="small text-muted">E-mail</div>
                      <a
                        href={`mailto:${CLINIC_INFO.email}`}
                        className="text-decoration-none fw-semibold text-break"
                      >
                        {CLINIC_INFO.email}
                      </a>
                    </div>
                  </li>
                  <li className="d-flex">
                    <i className="bi bi-geo-alt fs-5 text-primary me-3" aria-hidden="true" />
                    <div>
                      <div className="small text-muted">Localização</div>
                      <span className="fw-semibold">{CLINIC_INFO.city}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

            <div className="card border-0 shadow-sm mb-4">
              <div className="card-body p-4">
                <h2 className="h5 fw-bold mb-3">Horário</h2>
                <dl className="mb-0">
                  {CLINIC_INFO.hours.map((item) => (
                    <div className="d-flex justify-content-between" key={item.days}>
                      <dt className="fw-normal text-muted">{item.days}</dt>
                      <dd className="mb-1 fw-semibold">{item.time}</dd>
                    </div>
                  ))}
                </dl>
              </div>
            </div>

            <div className="card border-0 bg-primary text-white">
              <div className="card-body p-4">
                <h2 className="h5 fw-bold">Quer marcar uma consulta?</h2>
                <p className="mb-3 opacity-75">
                  Escolha o profissional e o horário direto pelo site.
                </p>
                <Link href="/agendar" className="btn btn-light fw-semibold">
                  <i className="bi bi-calendar-check me-1" aria-hidden="true" />
                  Agendar online
                </Link>
              </div>
            </div>
          </div>

          <div className="col-lg-8">
            <ContactForm />
          </div>
        </div>
      </section>
    </>
  );
}