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: 'Quiénes somos',
  description:
    'Conoce la historia, misión y valores de mercadodevida. Productos naturales y orgánicos de confianza.',
};

const FALLBACK_HTML = `
  <h2>Nuestra historia</h2>
  <p>mercadodevida nació de la convicción de que comer bien no debería ser complicado. Seleccionamos cuidadosamente cada producto para asegurar la máxima calidad y transparencia.</p>
  <h2>Nuestra misión</h2>
  <p>Facilitar el acceso a productos naturales y orgánicos de alta calidad, directamente desde productores certificados, sin intermediarios.</p>
  <h2>Valores</h2>
  <ul>
    <li>Transparencia total en el origen de los productos</li>
    <li>Compromiso con la agricultura ecológica y sostenible</li>
    <li>Selección rigurosa de proveedores certificados</li>
    <li>Envío responsable con packaging reciclable</li>
    <li>Atención al cliente cercana y personalizada</li>
  </ul>
  <h2>Dónde estamos</h2>
  <p>Operamos exclusivamente online, enviando a toda España peninsular. Nuestros productos proceden de explotaciones ecológicas certificadas tanto nacionales como europeas.</p>
`;

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

  return (
    <ContentPage
      title={cms?.title ?? 'Quiénes somos'}
      description="Conoce la historia, misión y valores de mercadodevida. Productos naturales y orgánicos de confianza."
    >
      <div dangerouslySetInnerHTML={{ __html: body }} />
    </ContentPage>
  );
}
