import ContentPage from '@/components/content/ContentPage';
import type { Metadata } from 'next';
import { fetchPage } from '@/lib/api';

// CMS-backed page: render on demand so Admin edits are visible immediately.
export const dynamic = 'force-dynamic';

export const metadata: Metadata = {
  title: 'Contacto',
  description:
    'Ponte en contacto con el equipo de mercadodevida. Resolvemos tus dudas sobre productos, pedidos y envíos.',
};

const FALLBACK_HTML = `
  <h2>Email</h2>
  <p><a href="mailto:hola@mercadodevida.es" class="text-[#70ad47] hover:underline">hola@mercadodevida.es</a></p>
  <p>Intentamos responder en un plazo de 24-48 horas laborables.</p>
  <h2>Horario de atención</h2>
  <p>Lunes a viernes: 9:00 – 18:00h</p>
  <p>Sábados: 10:00 – 14:00h</p>
  <p>Domingos y festivos: cerrado</p>
  <h2>Preguntas frecuentes</h2>
  <p>Antes de escribirnos, puede que tu duda ya esté resuelta en nuestra sección de <a href="/shipping" class="text-[#70ad47] hover:underline">envíos</a>.</p>
  <h2>Redes sociales</h2>
  <p>Síguenos en nuestras redes para estar al día de nuevas incorporaciones, ofertas y recetas saludables.</p>
`;

export default async function ContactPage() {
  const cms = await fetchPage('contact').catch(() => null);
  const body = cms?.body ?? FALLBACK_HTML;

  return (
    <ContentPage
      title={cms?.title ?? 'Contacto'}
      description="Estamos aquí para ayudarte. Contáctanos por cualquiera de estos canales."
    >
      <div dangerouslySetInnerHTML={{ __html: body }} />
    </ContentPage>
  );
}
