// AboutPage.jsx — /sobre
//
// Promotes the inline <AboutFounder/> strip into a standalone page with a
// breadcrumb hero + full SEO. The original AboutFounder still renders inline
// on the homepage; this just wraps it.

const aboutPageStyles = {
  hero: {
    background: 'var(--brand-cream)',
    borderBottom: '1px solid var(--color-divider)',
    padding: '56px 0 48px',
  },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  breadcrumb: {
    display: 'flex', alignItems: 'center', gap: 8,
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: 'var(--color-fg-muted)', marginBottom: 22,
  },
  breadcrumbLink: { color: 'inherit', textDecoration: 'none' },
  breadcrumbSep: { opacity: 0.4 },
  eyebrow: {
    fontFamily: 'var(--font-sans)', fontWeight: 700,
    fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--brand-leaf)', marginBottom: 12,
  },
  title: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 64, lineHeight: 1.04, letterSpacing: '-0.02em',
    margin: 0, color: 'var(--color-fg-strong)', textWrap: 'balance',
  },
};

function AboutPage() {
  const tr = useT();
  const lang = React.useContext(LangContext);
  const crumb = lang === 'es' ? 'Sobre Paola' : 'About Paola';
  const description = lang === 'es'
    ? 'Conoce a Paola Duran Kawamoto, periodista de salud y editora de Top Natural Tips — bienestar paciente, basado en evidencia, en una voz que respeta tu tiempo.'
    : 'Meet Paola Duran Kawamoto, health journalist and editor of Top Natural Tips — patient, evidence-led wellness in a voice that respects your time.';

  React.useEffect(() => {
    const canonical = SEO.url(buildPath({ view: 'about' }));
    updateSeo({
      title: crumb,
      description,
      canonical,
      ogType: 'website',
      ogImage: SEO.url('/og-image.jpg'),
      lang,
      jsonLd: {
        '@context': 'https://schema.org',
        '@type': 'AboutPage',
        name: crumb + ' — Top Natural Tips',
        description,
        url: canonical,
        mainEntity: SEO.person(),
        publisher: SEO.org(),
      },
    });
  }, [lang]);

  return (
    <main>
      <header style={aboutPageStyles.hero}>
        <div style={aboutPageStyles.inner}>
          <nav style={aboutPageStyles.breadcrumb} aria-label="Breadcrumb">
            <a href={hrefFor({ view: 'home' })} style={aboutPageStyles.breadcrumbLink}>{tr('section.back')}</a>
            <span style={aboutPageStyles.breadcrumbSep}>/</span>
            <span>{crumb}</span>
          </nav>
          <div style={aboutPageStyles.eyebrow}>{tr('about.eyebrow')}</div>
          <h1 style={aboutPageStyles.title}>{crumb}</h1>
        </div>
      </header>

      <AboutFounder/>
    </main>
  );
}

window.AboutPage = AboutPage;