// marketing-pages.jsx — All page content for Aiscopia marketing site

// ════════════════════════════════════════════════════════════
// i18n strings
// ════════════════════════════════════════════════════════════
const T = {
  es: {
    heroPill: 'Nueva generación de LIS para patología digital',
    heroTitle1: 'El LIS diseñado para la patología digital',
    heroTitle2: 'y la era de la IA',
    heroSub: 'De la trazabilidad al diagnóstico asistido por IA en una plataforma unificada. Construida alrededor del flujo de trabajo real del patólogo.',
    heroCtaPrimary: 'Solicitar demo',
    heroCtaSecondary: 'Ver cómo funciona',
    heroAI: 'IA procesando análisis',
    heroWSI: 'WSI · 40× · OpenSeadragon',
    stat1: '12+ Módulos clínicos', stat2: 'ISO 15189 Cumplimiento calidad', stat3: 'HL7 / FHIR Interoperabilidad nativa',
    problemPill: 'El problema',
    problemTitle: 'La patología merece mejor infraestructura digital',
    problemSub: 'La mayoría de laboratorios trabaja con herramientas diseñadas hace décadas, sin integración real entre los procesos clave.',
    solutionPill: 'La solución',
    solutionTitle: 'Una plataforma, un flujo, cero fricciones',
    solutionSub: 'Aiscopia conecta todo el ciclo anatomopatológico en una única infraestructura inteligente.',
    modulesPill: 'Módulos clínicos',
    modulesTitle: 'Todo lo que necesita un laboratorio de patología moderno',
    modulesSub: '12 módulos diseñados alrededor del flujo real — no como silos funcionales, sino como expresiones de una plataforma integrada.',
    aiPill: 'Inteligencia Artificial',
    aiTitle1: 'IA que entiende la patología,',
    aiTitle2: 'no solo las imágenes',
    aiSub: 'La IA no es un módulo añadido. Es una capa que atraviesa flujos, informes, calidad y diagnóstico.',
    aiDisclaimer: 'Los resultados de la IA siempre son revisables, descartables o reinterpretables por el patólogo. La responsabilidad diagnóstica final es siempre médica.',
    aiDisclaimerLabel: 'Transparencia IA:',
    aiMoreBtn: 'Leer más sobre IA en Patología',
    benefitsPill: 'Resultados',
    benefitsTitle: 'Impacto real en el laboratorio',
    benefitsSub: 'Métricas basadas en flujos de trabajo clínico real, no en demos de laboratorio.',
    trustPill: 'Credenciales',
    trustTitle: 'Diseñada por patólogos.\nPara patólogos.',
    trustSub: 'Aiscopia no nació en una empresa de software. Nació en un laboratorio de anatomía patológica.',
    ctaTitle: '¿Listo para transformar tu laboratorio de patología?',
    ctaSub: 'Solicita una demo personalizada. Te mostramos Aiscopia sobre tu flujo real, no sobre un caso ficticio.',
    ctaBtn: 'Solicitar demo personalizada',
    ctaBtn2: 'Ver arquitectura del producto',
    demoBtn: 'Solicitar demo',
    loginBtn: 'Iniciar sesión',
  },
  en: {
    heroPill: 'Next-generation LIS for digital pathology',
    heroTitle1: 'The LIS designed for digital pathology',
    heroTitle2: 'and the AI era',
    heroSub: 'From traceability to AI-assisted diagnosis in a unified platform. Built around the real pathologist workflow.',
    heroCtaPrimary: 'Request a demo',
    heroCtaSecondary: 'See how it works',
    heroAI: 'AI processing analysis',
    heroWSI: 'WSI · 40× · OpenSeadragon',
    stat1: '12+ Clinical modules', stat2: 'ISO 15189 Quality compliance', stat3: 'HL7 / FHIR Native interoperability',
    problemPill: 'The problem',
    problemTitle: 'Pathology deserves better digital infrastructure',
    problemSub: 'Most labs still work with tools designed decades ago, with no real integration between key processes.',
    solutionPill: 'The solution',
    solutionTitle: 'One platform, one workflow, zero friction',
    solutionSub: 'Aiscopia connects the entire anatomopathological cycle in a single intelligent infrastructure.',
    modulesPill: 'Clinical modules',
    modulesTitle: 'Everything a modern pathology lab needs',
    modulesSub: '12 modules designed around the real clinical workflow — not as functional silos, but as expressions of an integrated platform.',
    aiPill: 'Artificial Intelligence',
    aiTitle1: 'AI that understands pathology,',
    aiTitle2: 'not just images',
    aiSub: 'AI is not an add-on module. It is a layer that permeates workflows, reports, quality and diagnosis.',
    aiDisclaimer: 'AI results are always reviewable, discardable or reinterpretable by the pathologist. Final diagnostic responsibility is always medical.',
    aiDisclaimerLabel: 'AI Transparency:',
    aiMoreBtn: 'Read more about AI in Pathology',
    benefitsPill: 'Results',
    benefitsTitle: 'Real impact in the lab',
    benefitsSub: 'Metrics based on real clinical workflows, not lab demos.',
    trustPill: 'Credentials',
    trustTitle: 'Designed by pathologists.\nFor pathologists.',
    trustSub: 'Aiscopia was not born in a software company. It was born in an anatomical pathology laboratory.',
    ctaTitle: 'Ready to transform your pathology laboratory?',
    ctaSub: 'Request a personalized demo. We show you Aiscopia on your real workflow, not a fictional case.',
    ctaBtn: 'Request personalized demo',
    ctaBtn2: 'See product architecture',
    demoBtn: 'Request demo',
    loginBtn: 'Log in',
    // Inner pages
    productHero: 'The Super LIS for digital pathology',
    productHeroSub: 'Not an extended traditional LIS. An intelligent platform designed to integrate, orchestrate and enhance the entire anatomopathological cycle.',
    productArchPill: 'Architecture',
    productArchTitle: 'A layered system, not silos',
    productArchSub: 'Aiscopia is structured in deeply integrated functional layers.',
    productTraceTitle: 'Traceability hierarchy',
    productTraceSub: 'Each clinical object has identity, metadata and context from the origin.',
    productCTA: 'Request demo',
    layers: [
      { layer: 'Operational Layer', title: 'LIS Core', items: ['Case registration & management', 'Intelligent accessioning', 'Full traceability', 'Lab operational management'] },
      { layer: 'Transversal Layer', title: 'Artificial Intelligence', items: ['Image AI (WSI, IHQ)', 'Text AI (macro/micro)', 'Process AI (TAT, bottlenecks)', 'Validated continuous learning'] },
      { layer: 'Knowledge Layer', title: 'Clinical & BI', items: ['Semantic SNOMED CT', 'Pattern repositories', 'Real-time dashboards', 'Predictive analytics'] },
    ],
    hierarchy: ['Case', 'Specimen', 'Block', 'Slide', 'WSI', 'AI Result'],
    hierarchyLevel: 'Level',
    aiPageHero: 'AI that amplifies the pathologist,',
    aiPageHero2: 'never replaces them',
    aiPageSub: 'Artificial intelligence in pathology is not the future. It is the present — when implemented with clinical rigour and transparency.',
    aiCapPill: 'Capabilities',
    aiCapTitle: 'What AI can do today',
    aiLimPill: 'Honesty',
    aiLimTitle: 'Its current limitations',
    aiLimWarning: 'Worth saying clearly',
    aiLimWarningBody: 'No AI system has demonstrated autonomous diagnostic sufficiency in general clinical pathology. AI complements, enriches and accelerates — it does not replace the pathologist.',
    aiLimits: [
      'Does not make final diagnostic decisions under any circumstances.',
      'Requires continuous clinical validation by experts at each institution.',
      'Performance varies by organ, stain, scanner and processing protocol.',
      'Legal medical responsibility always rests with the signing pathologist.',
    ],
    aiCaps: [
      { title: 'IHQ biomarker quantification', body: 'Ki-67, ER, PR, HER2, TILs, p53. Objective and reproducible metrics that the human eye cannot standardise at scale.' },
      { title: 'Detection and prioritisation', body: 'Screening WSIs to identify areas of interest, mitoses, necrosis or specific morphological patterns. The pathologist zooms in where it matters.' },
      { title: 'Differential diagnosis support', body: 'Suggestions based on clinical context, organ and morphology. Not automatic diagnoses: enriched starting points.' },
    ],
    aiDemoBtn: 'See AI demo',
    solPill: 'Solutions',
    solTitle: 'Every lab has its challenge. Aiscopia has its solution.',
    solSub: 'An adaptable system that speaks the language of public hospitals, private labs and digital transformation centres.',
    solCTA: 'Talk to a specialist',
    solPainLabel: 'Pain points',
    solHowLabel: 'How Aiscopia solves it',
    solDemoBtn: 'Request demo for',
    segments: [
      { icon: 'building-2', color: 'var(--cyan)', title: 'Public hospitals',
        pains: ['Legacy LIS without WSI integration', 'Manual and costly ISO 15189 audits', 'High TAT due to fragmented workflows', 'No real-time performance analytics'],
        solutions: ['Core modules ready for multi-department deployment', 'Quality embedded in workflow — not a parallel process', 'TAT and diagnostic workload dashboards per shift', 'HL7/FHIR interoperability with existing HIS'] },
      { icon: 'microscope', color: 'var(--violet)', title: 'Private laboratories',
        pains: ['High case load with limited staff', 'Difficulty scaling without losing quality', 'Non-standardised reports between pathologists', 'Lack of tools for second opinions'],
        solutions: ['Technical workflow automation with configurable rules', 'CAP-ready templates by subspecialty', 'Collaborative WSI viewer for remote second opinions', 'AI that accelerates screening without compromising rigour'] },
      { icon: 'graduation-cap', color: 'var(--green)', title: 'Digital transformation centres',
        pains: ['Labs still transitioning to the digital paradigm', 'WSI scanner investment without integrated workflow', 'Lack of data structure for research', 'Teams untrained in computational pathology'],
        solutions: ['Native Digital Pathology & WSI module — no third-party integrations', 'Digital biobank with traceability for translational research', 'SNOMED CT-structured datasets for ML', 'Digital transformation support with clinical focus'] },
    ],
    resPill: 'Resources',
    resTitle: 'Learn digital pathology in depth',
    resSub: 'Guides, concepts and analyses written by specialists for medical professionals and healthcare innovation teams.',
    articles: [
      { tag: 'Guide', color: 'var(--cyan)', title: 'What is a LIS and why does it matter in digital pathology?', excerpt: 'A practical introduction to the Laboratory Information System from the perspective of the clinical pathologist.', time: '8 min' },
      { tag: 'Concept', color: 'var(--violet)', title: 'WSI: from microscope to slide scanner', excerpt: 'How histological slide digitisation works and what it means for the diagnostic workflow.', time: '6 min' },
      { tag: 'Clinical', color: 'var(--green)', title: 'Ki-67 and biomarker quantification with AI', excerpt: 'What Ki-67 measures, why its interpretation varies and how AI introduces objective consistency.', time: '10 min' },
      { tag: 'Workflow', color: '#FBBF24', title: 'From grossing to diagnosis: the complete workflow', excerpt: 'Visual walkthrough of pathology lab stations: gross, technical, diagnosis and report.', time: '12 min' },
      { tag: 'Standard', color: 'var(--cyan)', title: 'SNOMED CT in pathology: a coding guide', excerpt: 'Why coding diagnoses matters and how SNOMED CT turns medical text into computable data.', time: '9 min' },
      { tag: 'AI', color: 'var(--violet)', title: 'TILs in breast cancer: how AI analyses them', excerpt: 'Tumor-infiltrating lymphocytes as an emerging biomarker and the computational tools that measure them.', time: '7 min' },
    ],
    readArticle: 'Read article',
    aboutPill: 'About us',
    aboutTitle1: 'Built from the clinic,',
    aboutTitle2: 'not from software',
    aboutSub: 'Aiscopia was born in an anatomical pathology laboratory, from frustration with tools that do not understand real diagnostic work.',
    aboutOriginPill: 'Origin',
    aboutOriginTitle: 'Why Aiscopia exists',
    aboutOriginBody1: 'The anatomical pathology laboratory is one of the most critical services in the healthcare system and, paradoxically, one of the least digitised. Existing tools were not designed for the pathologist\'s cognitive workflow.',
    aboutOriginBody2: 'Aiscopia was born from a simple question: what if we designed the LIS from scratch, putting the pathologist at the centre and artificial intelligence as a transversal layer?',
    aboutOriginBody3: 'The answer is a Super LIS: a cognitive platform that generates knowledge, orchestrates workflows and amplifies diagnostic capability, without replacing medical judgement.',
    aboutValues: [
      { icon: 'heart', color: 'var(--cyan)', title: 'Mission', body: 'To improve anatomopathological diagnosis by reducing unnecessary cognitive load and freeing time for complex clinical decision-making.' },
      { icon: 'telescope', color: 'var(--violet)', title: 'Vision', body: 'To make every pathology lab a node of clinical intelligence: a generator of reusable knowledge for precision medicine.' },
      { icon: 'compass', color: 'var(--green)', title: 'Guiding principle', body: 'AI assists, never substitutes. Final diagnostic responsibility is always medical, always human.' },
    ],
    aboutCTA: 'Talk to the team',
    contactPill: 'Demo',
    contactTitle: 'Request your personalised demo',
    contactSub: 'We show you Aiscopia on your real workflow. No generic demos. Every demonstration is tailored to your laboratory\'s context.',
    contactWhatPill: 'What does the demo include?',
    contactItems: ['Full walkthrough of the anatomopathological workflow in Aiscopia', 'Demonstration of the integrated WSI viewer with AI', 'Structured report module and SNOMED CT', 'Analysis of your specific use case', 'Unlimited technical and clinical Q&A'],
    contactAlt: 'You can also contact us directly',
    contactFormTitle: 'Request form',
    contactLabels: ['Full name', 'Professional email', 'Institution / Centre', 'Role'],
    contactPlaceholders: ['Dr. John Smith', 'jsmith@hospital.com', 'University Hospital...', 'Head of Pathology Service'],
    contactTextareaLabel: 'What would you like to see in the demo?',
    contactTextareaPlaceholder: 'Tell us briefly about your context and what you are most interested in learning about Aiscopia...',
    contactSubmitBtn: 'Request personalised demo',
    contactNote: 'No commitment. Response within 24 hours.',
    contactSuccessTitle: 'Request received!',
    contactSuccessBody: 'We will get in touch within 24 hours to schedule your personalised demo.',
    footerTagline: 'Intelligent digital pathology platform. Designed by pathologists, for pathologists.',
    footerCols: [
      { title: 'Product', links: ['LIS Overview', 'Modules', 'WSI Viewer', 'AI Integration', 'Interoperability'] },
      { title: 'Solutions', links: ['Public hospitals', 'Private labs', 'Research centres', 'Free demo'] },
      { title: 'Company', links: ['About', 'Blog', 'Resources', 'Contact', 'Privacy policy'] },
    ],
    footerCopyright: '© 2026 Aiscopia. All rights reserved.',
    footerMadeIn: 'Built with clinical rigour · Spain',
  },
};

// ════════════════════════════════════════════════════════════
// HOME PAGE
// ════════════════════════════════════════════════════════════
const HomePage = ({ setPage, lang = 'es' }) => {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <>
      <HeroSection setPage={setPage} lang={lang} />
      <ProblemSection lang={lang} />
      <SolutionSection lang={lang} />
      <ModulesSection lang={lang} />
      <AISection setPage={setPage} lang={lang} />
      <BenefitsSection lang={lang} />
      <TrustSection lang={lang} />
      <FinalCTA setPage={setPage} lang={lang} />
    </>
  );
};

// ── Hero ──────────────────────────────────────────────────
const HeroSection = ({ setPage, lang = 'es' }) => {
  const t = T[lang];
  return (
    <section style={{ background: 'var(--dark-900)', paddingTop: 168, paddingBottom: 120, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)', width: 1000, height: 600, background: 'radial-gradient(ellipse, rgba(59,180,229,0.12) 0%, rgba(123,127,239,0.08) 40%, transparent 70%)', pointerEvents: 'none' }}></div>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0)', backgroundSize: '48px 48px', pointerEvents: 'none' }}></div>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ marginBottom: 24 }}>
              <span className="pill pill-cyan">
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--cyan)', display: 'inline-block' }}></span>
                {t.heroPill}
              </span>
            </div>
            <h1 className="display-1" style={{ color: 'var(--text-display)', marginBottom: 24 }}>
              {t.heroTitle1} <span className="grad-mixed">{t.heroTitle2}</span>
            </h1>
            <p className="body-lg" style={{ color: 'var(--text-body-dk)', marginBottom: 36, maxWidth: 480 }}>{t.heroSub}</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => { setPage('contact'); window.scrollTo(0,0); }}>
                <i data-lucide="calendar" style={{ width: 18, height: 18 }}></i>
                {t.heroCtaPrimary}
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => { setPage('product'); window.scrollTo(0,0); }}>
                {t.heroCtaSecondary}
                <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
              </button>
            </div>
            <div style={{ marginTop: 48, display: 'flex', gap: 32, flexWrap: 'wrap' }}>
              {[
                { value: '12+', label: t.stat1.replace('12+ ', '') },
                { value: 'ISO 15189', label: t.stat2.replace('ISO 15189 ', '') },
                { value: 'HL7 / FHIR', label: t.stat3.replace('HL7 / FHIR ', '') },
              ].map(s => (
                <div key={s.label}>
                  <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-display)', letterSpacing: '-0.02em' }}>{s.value}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted-dk)', marginTop: 2 }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', inset: -20, background: 'radial-gradient(ellipse, rgba(59,180,229,0.15) 0%, transparent 60%)', pointerEvents: 'none', zIndex: 0 }}></div>
            <div style={{ position: 'relative', zIndex: 1 }}><DashboardMockup /></div>
            <div style={{ position: 'absolute', top: -16, right: -24, background: 'var(--dark-700)', border: '1px solid var(--dark-border-2)', borderRadius: 12, padding: '10px 14px', backdropFilter: 'blur(10px)', zIndex: 2 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--green)', boxShadow: '0 0 0 3px rgba(74,222,128,0.2)' }}></div>
                <span style={{ fontSize: 12, fontWeight: 600, color: '#fff' }}>{t.heroAI}</span>
              </div>
            </div>
            <div style={{ position: 'absolute', bottom: -16, left: -24, background: 'var(--dark-700)', border: '1px solid var(--dark-border-2)', borderRadius: 12, padding: '10px 14px', backdropFilter: 'blur(10px)', zIndex: 2 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <i data-lucide="scan" style={{ width: 14, height: 14, color: 'var(--cyan)' }}></i>
                <span style={{ fontSize: 12, fontWeight: 600, color: '#fff' }}>{t.heroWSI}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Problem ───────────────────────────────────────────────
const ProblemSection = ({ lang = 'es' }) => {
  const t = T[lang];
  const problems = lang === 'en' ? [
    { icon: 'git-branch', title: 'Fragmented systems', body: 'LIS, WSI viewer, AI and manual processes all disconnected. The pathologist loses time searching for information across multiple tools.' },
    { icon: 'search-x', title: 'Poor traceability', body: 'Without a full Case → Specimen → Block → Slide → WSI hierarchy, pre-analytical errors are inevitable and auditing becomes impossible.' },
    { icon: 'file-x', title: 'Unstructured reports', body: 'Free text is not computable, auditable, BI-ready or compatible with CAP or SNOMED CT.' },
    { icon: 'clock', title: 'Inefficient technical workflows', body: 'Grossing, histology and cytology stations work without orchestration. Invisible bottlenecks impact TAT.' },
  ] : [
    { icon: 'git-branch', title: 'Sistemas fragmentados', body: 'LIS, visor WSI, IA y procesos manuales desconectados. El patólogo pierde tiempo buscando información en múltiples herramientas.' },
    { icon: 'search-x', title: 'Trazabilidad deficiente', body: 'Sin jerarquía Caso → Muestra → Bloque → Porta → WSI completa, los errores preanalíticos son inevitables y la auditoría, imposible.' },
    { icon: 'file-x', title: 'Informes no estructurados', body: 'El texto libre no es computable, no se puede auditar, no alimenta BI y no es compatible con CAP o SNOMED CT.' },
    { icon: 'clock', title: 'Flujos técnicos ineficientes', body: 'Las estaciones de macroscopía, histología y citología trabajan sin orquestación. Cuellos de botella invisibles impactan el TAT.' },
  ];
  return (
    <section style={{ background: 'var(--dark-800)' }}>
      <div className="container">
        <SectionHeading pill={t.problemPill} title={t.problemTitle} subtitle={t.problemSub} />
        <div className="grid-4">
          {problems.map((p, i) => (
            <div key={i} className="card-dark" style={{ padding: 24 }}>
              <div style={{ marginBottom: 16 }}>
                <IconBox icon={p.icon} color="#F87171" />
              </div>
              <div className="h4" style={{ color: 'var(--text-display)', marginBottom: 10 }}>{p.title}</div>
              <p className="body-sm" style={{ color: 'var(--text-body-dk)', opacity: 0.75 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Solution ──────────────────────────────────────────────
const SolutionSection = ({ lang = 'es' }) => {
  const t = T[lang];
  return (
  <section style={{ background: 'var(--dark-900)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        {/* Left: visual — always Spanish flow labels, globally understood */}
        <div style={{ position: 'relative' }}>
          <div style={{ background: 'var(--dark-700)', border: '1px solid var(--dark-border)', borderRadius: 16, padding: 24, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 0, right: 0, width: 300, height: 300, background: 'radial-gradient(circle, rgba(123,127,239,0.15) 0%, transparent 70%)', pointerEvents: 'none' }}></div>
            {/* Hierarchy diagram */}
            {[
              { label: 'Solicitud clínica', color: 'var(--cyan)', icon: 'file-plus' },
              { label: 'Registro & Recepción', color: 'var(--cyan)', icon: 'inbox' },
              { label: 'Estación Macro → Técnica', color: '#FBBF24', icon: 'flask-conical' },
              { label: 'Diagnóstico + Visor WSI', color: 'var(--violet)', icon: 'scan' },
              { label: 'Asistencia IA', color: 'var(--violet)', icon: 'sparkles' },
              { label: 'Informe estructurado + SNOMED', color: 'var(--green)', icon: 'check-circle' },
            ].map((step, i, arr) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, paddingBottom: i < arr.length - 1 ? 16 : 0, marginBottom: i < arr.length - 1 ? 0 : 0, position: 'relative' }}>
                {i < arr.length - 1 && <div style={{ position: 'absolute', left: 21, top: 40, width: 2, height: 28, background: `linear-gradient(${step.color}, ${arr[i+1].color})`, opacity: 0.4 }}></div>}
                <div style={{ width: 44, height: 44, borderRadius: 10, background: `${step.color}15`, border: `1px solid ${step.color}30`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, zIndex: 1 }}>
                  <i data-lucide={step.icon} style={{ width: 20, height: 20, color: step.color }}></i>
                </div>
                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-body-dk)' }}>{step.label}</span>
              </div>
            ))}
          </div>
        </div>
        {/* Right: copy */}
        <div>
          <div style={{ marginBottom: 20 }}><span className="pill pill-cyan">{t.solutionPill}</span></div>
          <h2 className="h2" style={{ color: 'var(--text-display)', marginBottom: 20 }}>
            {t.solutionTitle}
          </h2>
          <p className="body-lg" style={{ color: 'var(--text-body-dk)', marginBottom: 32, opacity: 0.85 }}>
            {t.solutionSub} {lang === 'en' ? 'Structured data by design, contextual AI, and the pathologist always in control.' : 'El dato nace estructurado, la IA actúa en contexto y el patólogo mantiene siempre el control diagnóstico.'}
          </p>
          {[
            { icon: 'database', text: 'Dato estructurado por diseño (SNOMED CT, FHIR, DICOM-WSI)' },
            { icon: 'cpu', text: 'IA transversal — no un módulo aislado, sino una capa que lo permea todo' },
            { icon: 'user-check', text: 'Patólogo en el centro — la IA asiste, nunca sustituye' },
            { icon: 'shield-check', text: 'ISO 15189 nativo — calidad embebida en el flujo, no como proceso paralelo' },
          ].map((f, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, marginBottom: 16, alignItems: 'flex-start' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--cyan)18', border: '1px solid var(--cyan)25', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                <i data-lucide={f.icon} style={{ width: 15, height: 15, color: 'var(--cyan)' }}></i>
              </div>
              <span style={{ fontSize: 15, color: 'var(--text-body-dk)', lineHeight: 1.5 }}>{f.text}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
  );
};

// ── Modules ───────────────────────────────────────────────
const MODULES = [
  { icon: 'inbox',         color: 'var(--cyan)',   title: 'Recepción & Trazabilidad',        body: 'Accessioning inteligente con jerarquía Caso → Muestra → Bloque → Porta → WSI. Trazabilidad completa desde el origen.' },
  { icon: 'scissors',      color: '#FBBF24',       title: 'Estación Macro',                  body: 'Descripción macroscópica estructurada, bloqueo asistido, plantillas configurables por órgano y sospecha clínica.' },
  { icon: 'flask-conical', color: '#FBBF24',       title: 'Estación Técnica',                body: 'Gestión de lotes, tinción H&E, IHQ y técnicas especiales. Checklists de calidad y trazabilidad de reactivos.' },
  { icon: 'file-text',     color: 'var(--violet)', title: 'Estación de Diagnóstico',         body: 'Entorno integrado macro + micro + WSI con IA. Dictado asistido, plantillas versionables, firma electrónica.' },
  { icon: 'scan',          color: 'var(--cyan)',   title: 'Visor WSI Integrado',             body: 'OpenSeadragon nativo, anotaciones colaborativas, comparación multicanal, correlación directa con el informe.' },
  { icon: 'check-square',  color: 'var(--green)',  title: 'Informe Estructurado',            body: 'Informes computables con SNOMED CT, CAP-ready, exportación HL7/FHIR. Cada campo es dato reutilizable.' },
  { icon: 'sparkles',      color: 'var(--violet)', title: 'Asistencia IA',                   body: 'Cuantificación Ki67, ER, PR, HER2, TILs. Detección de patrones histológicos. El patólogo siempre valida.' },
  { icon: 'archive',       color: 'var(--cyan)',   title: 'Archivo & Biobanco',              body: 'Gestión del archivo físico y digital. Trazabilidad postdiagnóstica, préstamos, biobanco con consentimientos y datasets para investigación traslacional.' },
  { icon: 'git-branch',    color: '#FBBF24',       title: 'Pruebas Auxiliares',              body: 'Solicitud y seguimiento completo de IHQ, FISH y estudios moleculares (PCR, NGS). Resultados integrados automáticamente en el informe final.' },
  { icon: 'shield-check',  color: 'var(--green)',  title: 'Calidad ISO 15189',               body: 'No conformidades, CAPA, gestión documental y auditorías. Calidad embebida en el flujo operativo, no como proceso paralelo.' },
  { icon: 'bar-chart-2',   color: 'var(--violet)', title: 'Analítica & BI',                  body: 'Dashboards en tiempo real por rol: TAT, carga diagnóstica, calidad y rendimiento. Análisis predictivo e identificación de cuellos de botella.' },
  { icon: 'plug',          color: 'var(--cyan)',   title: 'Interoperabilidad',               body: 'HL7 v2/v3, FHIR R4, DICOM-WSI. Integración bidireccional con HIS/HCE, escáneres y plataformas de IA externas. Soporte MDT y telepatología.' },
];

const ModulesSection = ({ lang = 'es' }) => {
  const t = T[lang];
  return (
    <section style={{ background: 'var(--dark-800)' }}>
    <div className="container">
      <SectionHeading pill={t.modulesPill} title={t.modulesTitle} subtitle={t.modulesSub} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {MODULES.map((m, i) => (
          <div key={i} className="card-dark" style={{ padding: 24 }}>
            <div style={{ marginBottom: 14 }}>
              <IconBox icon={m.icon} color={m.color} size={44} />
            </div>
            <div className="h4" style={{ color: 'var(--text-display)', marginBottom: 10 }}>{m.title}</div>
            <p className="body-sm" style={{ color: 'var(--text-body-dk)', opacity: 0.75, lineHeight: 1.6 }}>{m.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
  );
};

// ── AI Section ────────────────────────────────────────────
const AISection = ({ setPage, lang = 'es' }) => {
  const t = T[lang];
  return (
  <section style={{ background: 'linear-gradient(180deg, var(--dark-900) 0%, #0D0A1A 100%)', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)', width: 800, height: 600, background: 'radial-gradient(ellipse, rgba(123,127,239,0.18) 0%, transparent 65%)', pointerEvents: 'none' }}></div>
    <div className="container" style={{ position: 'relative' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <span className="pill pill-violet" style={{ marginBottom: 20, display: 'inline-flex' }}>
          <i data-lucide="sparkles" style={{ width: 12, height: 12 }}></i>
          {t.aiPill}
        </span>
        <h2 className="h2" style={{ color: 'var(--text-display)', maxWidth: 680, margin: '0 auto', marginBottom: 16 }}>
          {t.aiTitle1}<br /><span className="grad-violet">{t.aiTitle2}</span>
        </h2>
        <p className="body-lg" style={{ color: 'var(--text-body-dk)', maxWidth: 560, margin: '0 auto', opacity: 0.8 }}>
          {t.aiSub}
        </p>
      </div>

      <div className="grid-3" style={{ marginBottom: 48 }}>
        {[
          { icon: 'activity', title: 'Cuantificación de biomarcadores', items: ['Ki-67 índice proliferación', 'ER / PR / HER2 (FISH ready)', 'TILs (tumor-infiltrating lymphocytes)', 'p53, CD3, CD20 y más'] },
          { icon: 'search', title: 'Detección asistida', items: ['Screening de casos prioritarios', 'Detección de patrones histológicos', 'Predicción de riesgo diagnóstico', 'Correlación morfología-biomarcador'] },
          { icon: 'file-text', title: 'Informe estructurado IA', items: ['Sugerencia de estructura por órgano', 'Detección de inconsistencias', 'Estandarización sin rigidez', 'Aprendizaje por validación médica'] },
        ].map((c, i) => (
          <div key={i} style={{ background: 'rgba(123,127,239,0.07)', border: '1px solid rgba(123,127,239,0.20)', borderRadius: 16, padding: 28 }}>
            <div style={{ marginBottom: 16 }}>
              <IconBox icon={c.icon} color="var(--violet)" />
            </div>
            <div className="h3" style={{ color: 'var(--text-display)', marginBottom: 16 }}>{c.title}</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map((it, j) => (
                <li key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--text-body-dk)', opacity: 0.85 }}>
                  <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--violet)', flexShrink: 0 }}></span>{it}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Credibility note */}
      <div style={{ textAlign: 'center', padding: '20px 32px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 12, maxWidth: 720, margin: '0 auto 32px' }}>
        <span style={{ fontSize: 14, color: 'var(--text-muted-dk)' }}>
          <strong style={{ color: 'var(--text-body-dk)' }}>{t.aiDisclaimerLabel}</strong> {t.aiDisclaimer}
        </span>
      </div>
      <div style={{ textAlign: 'center' }}>
        <button className="btn btn-ghost" onClick={() => { setPage('ai'); window.scrollTo(0,0); }}>
          {t.aiMoreBtn} <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
        </button>
      </div>
    </div>
  </section>
  );
};

// ── Benefits ──────────────────────────────────────────────
const BenefitsSection = ({ lang = 'es' }) => {
  const t = T[lang];
  const benefits = [
    { icon: 'zap', value: '↓ 40%', label: 'Reducción de TAT', body: 'Orquestación inteligente elimina cuellos de botella y esperas entre estaciones.', color: 'var(--cyan)' },
    { icon: 'shield', value: '100%', label: 'Trazabilidad auditada', body: 'Cada muestra, bloque, porta y WSI traceable en tiempo real. Auditorías en minutos.', color: 'var(--green)' },
    { icon: 'alert-triangle', value: '↓ 60%', label: 'Errores preanalíticos', body: 'Checkpoints de calidad integrados en el flujo detectan desviaciones antes de que ocurran.', color: '#FBBF24' },
    { icon: 'file-check', value: 'CAP-ready', label: 'Informes estandarizados', body: 'Plantillas estructuradas por órgano, compatibles con CAP, SNOMED CT y guías clínicas vigentes.', color: 'var(--violet)' },
  ];
  return (
    <section style={{ background: 'var(--light-bg)' }}>
      <div className="container">
        <SectionHeading pill={t.benefitsPill} pillVariant="pill-light" light title={t.benefitsTitle} subtitle={t.benefitsSub} />
        <div className="grid-4">
          {benefits.map((b, i) => (
            <div key={i} className="card-light" style={{ padding: 28 }}>
              <div style={{ marginBottom: 16 }}>
                <IconBox icon={b.icon} color={b.color} size={44} />
              </div>
              <div style={{ fontSize: 32, fontWeight: 800, color: b.color, letterSpacing: '-0.02em', marginBottom: 4 }}>{b.value}</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text-display-lt)', marginBottom: 10 }}>{b.label}</div>
              <p style={{ fontSize: 14, color: 'var(--text-body-lt)', lineHeight: 1.6 }}>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Trust ─────────────────────────────────────────────────
const TrustSection = ({ lang = 'es' }) => {
  const t = T[lang];
  return (
  <section style={{ background: 'var(--light-bg)' }}>
    <hr className="light" />
    <div className="container" style={{ paddingTop: 80 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <span className="pill pill-light" style={{ marginBottom: 20, display: 'inline-flex' }}>{t.trustPill}</span>
          <h2 className="h2" style={{ color: 'var(--text-display-lt)', marginBottom: 20 }}>
            {t.trustTitle.split('\n').map((line, i) => <React.Fragment key={i}>{line}{i === 0 && <br />}</React.Fragment>)}
          </h2>
          <p className="body-lg" style={{ color: 'var(--text-body-lt)', marginBottom: 32, opacity: 0.85 }}>
            {t.trustSub} {lang === 'en' ? 'Every workflow, every field, every design decision reflects real clinical practice.' : 'Cada flujo, cada campo, cada decisión de diseño refleja la práctica clínica real.'}
          </p>
          {[
            { icon: 'stethoscope', label: 'Fundada por un patólogo con experiencia diagnóstica en primera línea' },
            { icon: 'users', label: 'Equipo mixto médico-ingeniero con colaboración clínica continua' },
            { icon: 'shield-check', label: 'Diseño orientado al cumplimiento ISO 15189 y RGPD/LOPDGDD' },
            { icon: 'book-open', label: 'Alineada con SNOMED CT, CAP, FHIR R4 y DICOM-WSI' },
          ].map((item, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, marginBottom: 16, alignItems: 'flex-start' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(59,180,229,0.10)', border: '1px solid rgba(59,180,229,0.20)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <i data-lucide={item.icon} style={{ width: 15, height: 15, color: '#148AB8' }}></i>
              </div>
              <span style={{ fontSize: 15, color: 'var(--text-body-lt)', lineHeight: 1.5 }}>{item.label}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[
            { title: 'Flujo clínico real', body: 'Construida sobre el flujo anatomopatológico real: solicitud → macro → técnica → diagnóstico → informe.' },
            { title: 'Sin atajos', body: 'No hay workarounds ni patches. Cada módulo está pensado para el largo plazo.' },
            { title: 'Interoperabilidad nativa', body: 'HL7 v2/v3, FHIR, DICOM-WSI. Diseñada para convivir con HIS/HCE existentes.' },
            { title: 'Soporte clínico continuo', body: 'Acompañamiento en implantación con criterio médico, no solo técnico.' },
          ].map((c, i) => (
            <div key={i} className="card-light" style={{ padding: 20 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-display-lt)', marginBottom: 8 }}>{c.title}</div>
              <p style={{ fontSize: 13, color: 'var(--text-body-lt)', lineHeight: 1.6 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
  );
};

// ── Final CTA ─────────────────────────────────────────────
const FinalCTA = ({ setPage, lang = 'es' }) => {
  const t = T[lang];
  return (
  <section style={{ background: 'var(--dark-900)', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 100%, rgba(59,180,229,0.15) 0%, rgba(123,127,239,0.10) 40%, transparent 70%)', pointerEvents: 'none' }}></div>
    <div className="container-sm" style={{ position: 'relative', textAlign: 'center' }}>
      <span className="pill pill-cyan" style={{ marginBottom: 24, display: 'inline-flex' }}>{lang === 'en' ? 'Get started' : 'Empieza ahora'}</span>
      <h2 className="display-2" style={{ color: 'var(--text-display)', marginBottom: 20 }}>
        {t.ctaTitle}
      </h2>
      <p className="body-lg" style={{ color: 'var(--text-body-dk)', marginBottom: 40, maxWidth: 520, margin: '0 auto 40px', opacity: 0.8 }}>
        {t.ctaSub}
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <button className="btn btn-primary btn-lg" onClick={() => { setPage('contact'); window.scrollTo(0,0); }}>
          <i data-lucide="calendar" style={{ width: 18, height: 18 }}></i>
          {t.ctaBtn}
        </button>
        <button className="btn btn-ghost btn-lg" onClick={() => { setPage('product'); window.scrollTo(0,0); }}>
          {t.ctaBtn2}
        </button>
      </div>
    </div>
  </section>
  );
};

// ════════════════════════════════════════════════════════════
// PRODUCT PAGE
// ════════════════════════════════════════════════════════════
const ProductPage = ({ setPage, lang = 'es' }) => {
  const t = T[lang];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const layers = lang === 'en' ? t.layers : [
    { layer: 'Capa Operativa', title: 'LIS Core', items: ['Registro y gestión de casos', 'Accessioning inteligente', 'Trazabilidad completa', 'Gestión operativa del laboratorio'], color: 'var(--cyan)' },
    { layer: 'Capa Transversal', title: 'Inteligencia Artificial', items: ['IA de imagen (WSI, IHQ)', 'IA de texto (macro/micro)', 'IA de procesos (TAT, cuellos)', 'Aprendizaje continuo validado'], color: 'var(--violet)' },
    { layer: 'Capa de Conocimiento', title: 'Clínico & BI', items: ['SNOMED CT semántico', 'Repositorios de patrones', 'Dashboards en tiempo real', 'Analítica predictiva'], color: 'var(--green)' },
  ].map((l, i) => ({ ...l, color: ['var(--cyan)', 'var(--violet)', 'var(--green)'][i] }));
  const hierarchy = lang === 'en' ? t.hierarchy : ['Caso', 'Muestra', 'Bloque', 'Porta', 'WSI', 'Resultado IA'];
  return (
    <>
      <PageHero
        pill="Aiscopia LIS"
        title={<>The <span className="grad-mixed">{lang === 'en' ? 'Super LIS' : 'Super LIS'}</span> {lang === 'en' ? 'for digital pathology' : 'para la patología digital'}</>}
        subtitle={lang === 'en' ? t.productHeroSub : 'No es un LIS tradicional ampliado. Es una plataforma inteligente diseñada para integrar, orquestar y potenciar todo el ciclo anatomopatológico.'}
        cta={{ label: lang === 'en' ? t.productCTA : 'Solicitar demo', action: () => { setPage('contact'); window.scrollTo(0,0); } }}
      />
      <section style={{ background: 'var(--light-bg)' }}>
        <div className="container">
          <SectionHeading pill={lang === 'en' ? t.productArchPill : 'Arquitectura'} pillVariant="pill-light" light title={lang === 'en' ? t.productArchTitle : 'Un sistema en capas, no en silos'} subtitle={lang === 'en' ? t.productArchSub : 'Aiscopia se estructura en capas funcionales profundamente integradas entre sí.'} />
          <div className="grid-3">
            {layers.map((l, i) => (
              <div key={i} className="card-light" style={{ padding: 28 }}>
                <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: l.color }}>{l.layer}</span>
                <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-display-lt)', margin: '10px 0 16px' }}>{l.title}</div>
                {l.items.map((it, j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: l.color, flexShrink: 0 }}></span>
                    <span style={{ fontSize: 14, color: 'var(--text-body-lt)' }}>{it}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>
      <section style={{ background: 'var(--light-bg)' }}>
        <div className="container">
          <SectionHeading light title={lang === 'en' ? t.productTraceTitle : 'Jerarquía de trazabilidad'} subtitle={lang === 'en' ? t.productTraceSub : 'Cada objeto clínico tiene identidad, metadatos y contexto desde el origen.'} />
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0, flexWrap: 'wrap', marginTop: 32 }}>
            {hierarchy.map((s, i, arr) => (
              <React.Fragment key={s}>
                <div style={{ textAlign: 'center', padding: '16px 20px', background: '#fff', border: '1px solid var(--light-border)', borderRadius: 10, minWidth: 110 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted-lt)', marginBottom: 4 }}>{lang === 'en' ? t.hierarchyLevel : 'Nivel'} {i + 1}</div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-display-lt)' }}>{s}</div>
                </div>
                {i < arr.length - 1 && <div style={{ padding: '0 8px', color: 'var(--text-muted-lt)', fontSize: 20 }}>→</div>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>
      <ModulesSection lang={lang} />
      <FinalCTA setPage={setPage} lang={lang} />
    </>
  );
};

// ════════════════════════════════════════════════════════════
// AI PAGE
// ════════════════════════════════════════════════════════════
const AIPage = ({ setPage, lang = 'es' }) => {
  const t = T[lang];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const aiCaps = lang === 'en' ? t.aiCaps : [
    { title: 'Cuantificación de biomarcadores IHQ', body: 'Ki-67, ER, PR, HER2, TILs, p53. Métricas objetivas y reproducibles que el ojo humano no puede estandarizar a escala.' },
    { title: 'Detección y priorización', body: 'Screening de WSIs para identificar áreas de interés, mitosis, necrosis o patrones morfológicos específicos. El patólogo hace zoom donde importa.' },
    { title: 'Apoyo al diagnóstico diferencial', body: 'Sugerencias basadas en contexto clínico, órgano y morfología. No diagnósticos automáticos: puntos de partida enriquecidos.' },
  ];
  const aiLimits = lang === 'en' ? t.aiLimits : [
    'No toma decisiones diagnósticas finales bajo ningún concepto.',
    'Requiere validación clínica continua por expertos en cada institución.',
    'Su rendimiento varía por órgano, tinción, escáner y protocolo de procesamiento.',
    'La responsabilidad médica legal recae siempre en el patólogo firmante.',
  ];
  return (
    <>
      <PageHero pill={lang === 'en' ? 'AI in Pathology' : 'IA en Patología'} pillVariant="pill-violet"
        title={lang === 'en' ? <>{t.aiPageHero}<br /><span className="grad-violet">{t.aiPageHero2}</span></> : <>IA que amplifica al patólogo,<br /><span className="grad-violet">nunca lo reemplaza</span></>}
        subtitle={lang === 'en' ? t.aiPageSub : 'La inteligencia artificial en patología no es el futuro. Es el presente — si se implementa con rigor clínico y transparencia.'}
        cta={{ label: lang === 'en' ? t.aiDemoBtn : 'Ver demo de IA', action: () => { setPage('contact'); window.scrollTo(0,0); } }} dark />
      <section style={{ background: 'var(--light-bg)' }}>
        <div className="container">
          <div className="grid-2" style={{ gap: 48, alignItems: 'start' }}>
            <div>
              <SectionHeading light center={false} title={lang === 'en' ? t.aiCapTitle : 'Lo que la IA puede hacer hoy'} pill={lang === 'en' ? t.aiCapPill : 'Capacidades'} />
              {aiCaps.map((c, i) => (
                <div key={i} style={{ marginBottom: 24, paddingBottom: 24, borderBottom: '1px solid var(--light-border)' }}>
                  <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text-display-lt)', marginBottom: 8 }}>{c.title}</div>
                  <p style={{ fontSize: 14, color: 'var(--text-body-lt)', lineHeight: 1.6 }}>{c.body}</p>
                </div>
              ))}
            </div>
            <div>
              <SectionHeading light center={false} title={lang === 'en' ? t.aiLimTitle : 'Sus limitaciones actuales'} pill={lang === 'en' ? t.aiLimPill : 'Honestidad'} />
              <div style={{ background: '#FFF9F0', border: '1px solid #FBBF2440', borderRadius: 12, padding: 20, marginBottom: 20 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#D97706', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>{lang === 'en' ? t.aiLimWarning : 'Importa decirlo claro'}</div>
                <p style={{ fontSize: 14, color: 'var(--text-body-lt)', lineHeight: 1.6 }}>
                  {lang === 'en' ? t.aiLimWarningBody : 'Ningún sistema de IA ha demostrado suficiencia diagnóstica autónoma en patología clínica general. La IA complementa, enriquece y acelera — no sustituye al patólogo.'}
                </p>
              </div>
              {aiLimits.map((l, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 14, alignItems: 'flex-start' }}>
                  <i data-lucide="info" style={{ width: 16, height: 16, color: '#D97706', flexShrink: 0, marginTop: 2 }}></i>
                  <span style={{ fontSize: 14, color: 'var(--text-body-lt)', lineHeight: 1.5 }}>{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <AISection setPage={setPage} lang={lang} />
      <FinalCTA setPage={setPage} lang={lang} />
    </>
  );
};

// ════════════════════════════════════════════════════════════
// SOLUTIONS PAGE
// ════════════════════════════════════════════════════════════
const SolutionsPage = ({ setPage, lang = 'es' }) => {
  const t = T[lang];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const segments = lang === 'en' ? t.segments : [
    { icon: 'building-2', color: 'var(--cyan)', title: 'Hospitales públicos',
      pains: ['Sistemas LIS legacy sin integración WSI', 'Auditorías ISO 15189 manuales y costosas', 'TAT elevados por flujos fragmentados', 'Sin analítica de rendimiento en tiempo real'],
      solutions: ['Módulos Core listos para implantación en entornos multi-departamento', 'Calidad embebida en flujo — no proceso paralelo', 'Dashboards de TAT y carga diagnóstica por turno', 'Interoperabilidad HL7/FHIR con HIS existente'] },
    { icon: 'microscope', color: 'var(--violet)', title: 'Laboratorios privados',
      pains: ['Alta carga de casos con poco personal', 'Dificultad para escalar sin perder calidad', 'Informes no estandarizados entre patólogos', 'Falta de herramientas para segunda opinión'],
      solutions: ['Automatización de flujos técnicos con reglas configurables', 'Plantillas CAP-ready por subespecialidad', 'Visor WSI colaborativo para segundas opiniones remotas', 'IA que acelera el screening sin comprometer rigor'] },
    { icon: 'graduation-cap', color: 'var(--green)', title: 'Centros de transformación digital',
      pains: ['Laboratorios aún en transición al paradigma digital', 'Inversión en escáneres WSI sin flujo integrado', 'Falta de estructura de datos para investigación', 'Equipos sin formación en patología computacional'],
      solutions: ['Módulo de Patología Digital & WSI nativo — sin integraciones de terceros', 'Biobanco digital con trazabilidad para investigación traslacional', 'Datasets estructurados con SNOMED CT para ML', 'Acompañamiento en transformación digital con enfoque clínico'] },
  ];
  return (
    <>
      <PageHero pill={lang === 'en' ? t.solPill : 'Soluciones'} title={lang === 'en' ? t.solTitle : 'Cada laboratorio tiene su desafío. Aiscopia tiene su solución.'} subtitle={lang === 'en' ? t.solSub : 'Un sistema adaptable que habla el idioma de hospitales públicos, laboratorios privados y centros de transformación digital.'} cta={{ label: lang === 'en' ? t.solCTA : 'Hablar con un especialista', action: () => { setPage('contact'); window.scrollTo(0,0); } }} />
      <section style={{ background: 'var(--light-bg)' }}>
        <div className="container">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 60 }}>
            {segments.map((seg, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'start', background: '#fff', border: '1px solid var(--light-border)', borderRadius: 16, padding: 36 }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
                    <IconBox icon={seg.icon} color={seg.color} size={48} />
                    <h3 className="h3" style={{ color: 'var(--text-display-lt)', margin: 0 }}>{seg.title}</h3>
                  </div>
                  <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.07em', textTransform: 'uppercase', color: '#F87171', marginBottom: 14 }}>{lang === 'en' ? t.solPainLabel : 'Puntos de dolor'}</div>
                  {seg.pains.map((p, j) => (
                    <div key={j} style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
                      <i data-lucide="x-circle" style={{ width: 16, height: 16, color: '#F87171', flexShrink: 0, marginTop: 2 }}></i>
                      <span style={{ fontSize: 14, color: 'var(--text-body-lt)', lineHeight: 1.5 }}>{p}</span>
                    </div>
                  ))}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.07em', textTransform: 'uppercase', color: seg.color, marginBottom: 14 }}>{lang === 'en' ? t.solHowLabel : 'Cómo lo resuelve Aiscopia'}</div>
                  {seg.solutions.map((s, j) => (
                    <div key={j} style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
                      <i data-lucide="check-circle" style={{ width: 16, height: 16, color: seg.color, flexShrink: 0, marginTop: 2 }}></i>
                      <span style={{ fontSize: 14, color: 'var(--text-body-lt)', lineHeight: 1.5 }}>{s}</span>
                    </div>
                  ))}
                  <button className="btn btn-ghost-lt btn-sm" style={{ marginTop: 20 }} onClick={() => { setPage('contact'); window.scrollTo(0,0); }}>
                    {lang === 'en' ? t.solDemoBtn : 'Solicitar demo para'} {seg.title.toLowerCase()} <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i>
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <FinalCTA setPage={setPage} lang={lang} />
    </>
  );
};

// ════════════════════════════════════════════════════════════
// RESOURCES PAGE
// ════════════════════════════════════════════════════════════
const ResourcesPage = ({ lang = 'es' }) => {
  const t = T[lang];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const articles = lang === 'en' ? t.articles : [
    { tag: 'Guía', color: 'var(--cyan)', title: '¿Qué es un LIS y por qué importa en patología digital?', excerpt: 'Una introducción práctica al Laboratory Information System desde la perspectiva del patólogo clínico.', time: '8 min' },
    { tag: 'Concepto', color: 'var(--violet)', title: 'WSI: del microscopio al escáner de diapositivas', excerpt: 'Cómo funciona la digitalización de láminas histológicas y qué implica para el flujo de trabajo diagnóstico.', time: '6 min' },
    { tag: 'Clínico', color: 'var(--green)', title: 'Ki-67 y la cuantificación de biomarcadores con IA', excerpt: 'Qué mide el Ki-67, por qué varía su interpretación y cómo la IA introduce consistencia objetiva.', time: '10 min' },
    { tag: 'Workflow', color: '#FBBF24', title: 'De la macroscopía al diagnóstico: el flujo completo', excerpt: 'Recorrido visual por las estaciones del laboratorio de patología: macro, técnica, diagnóstico e informe.', time: '12 min' },
    { tag: 'Estándar', color: 'var(--cyan)', title: 'SNOMED CT en patología: guía de codificación', excerpt: 'Por qué codificar diagnósticos y cómo SNOMED CT convierte el texto médico en datos computables.', time: '9 min' },
    { tag: 'IA', color: 'var(--violet)', title: 'TILs en cáncer de mama: cómo los analiza la IA', excerpt: 'Tumor-infiltrating lymphocytes como biomarcador emergente y las herramientas computacionales que los miden.', time: '7 min' },
  ];
  return (
    <>
      <PageHero pill={lang === 'en' ? t.resPill : 'Recursos'} title={lang === 'en' ? t.resTitle : 'Aprende patología digital en profundidad'} subtitle={lang === 'en' ? t.resSub : 'Guías, conceptos y análisis escritos por especialistas para profesionales médicos y equipos de innovación sanitaria.'} />
      <section style={{ background: 'var(--light-bg)' }}>
        <div className="container">
          <div className="grid-3">
            {articles.map((a, i) => (
              <div key={i} className="card-light" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }}>
                <div style={{ height: 8, background: `linear-gradient(90deg, ${a.color}, ${a.color}88)` }}></div>
                <div style={{ padding: 24 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                    <span style={{ fontSize: 11, fontWeight: 600, color: a.color, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{a.tag}</span>
                    <span style={{ fontSize: 12, color: 'var(--text-muted-lt)' }}>{a.time} lectura</span>
                  </div>
                  <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--text-display-lt)', marginBottom: 10, lineHeight: 1.3 }}>{a.title}</div>
                  <p style={{ fontSize: 14, color: 'var(--text-body-lt)', lineHeight: 1.6 }}>{a.excerpt}</p>
                  <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 500, color: '#148AB8' }}>
                    {lang === 'en' ? t.readArticle : 'Leer artículo'} <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

// ════════════════════════════════════════════════════════════
// ABOUT PAGE
// ════════════════════════════════════════════════════════════
const AboutPage = ({ setPage, lang = 'es' }) => {
  const t = T[lang];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const aboutValues = lang === 'en' ? t.aboutValues : [
    { icon: 'heart',     color: 'var(--cyan)',   title: 'Misión',             body: 'Mejorar el diagnóstico anatomopatológico reduciendo la carga cognitiva innecesaria y liberando tiempo para la toma de decisiones clínicas complejas.' },
    { icon: 'telescope', color: 'var(--violet)', title: 'Visión',             body: 'Convertir cada laboratorio de patología en un nodo de inteligencia clínica: generador de conocimiento reutilizable para la medicina de precisión.' },
    { icon: 'compass',   color: 'var(--green)',  title: 'Principio rector',   body: 'La IA asiste, nunca sustituye. La responsabilidad diagnóstica final es siempre médica, siempre humana.' },
  ];
  return (
    <>
      <PageHero pill={lang === 'en' ? t.aboutPill : 'Nosotros'}
        title={lang === 'en' ? <>{t.aboutTitle1}<br /><span className="grad-mixed">{t.aboutTitle2}</span></> : <>Construida desde la clínica,<br /><span className="grad-mixed">no desde el software</span></>}
        subtitle={lang === 'en' ? t.aboutSub : 'Aiscopia nació en un laboratorio de anatomía patológica, de la frustración con herramientas que no entienden el trabajo diagnóstico real.'}
        cta={{ label: lang === 'en' ? t.aboutCTA : 'Hablar con el equipo', action: () => { setPage('contact'); window.scrollTo(0,0); } }} />
      <section style={{ background: 'var(--light-bg)' }}>
        <div className="container">
          <div className="grid-2" style={{ gap: 80, alignItems: 'stretch' }}>
            <div>
              <SectionHeading light center={false} title={lang === 'en' ? t.aboutOriginTitle : 'Por qué existe Aiscopia'} />
              <p style={{ fontSize: 16, color: 'var(--text-body-lt)', lineHeight: 1.7, marginBottom: 20 }}>
                El laboratorio de anatomía patológica es uno de los servicios más críticos del sistema sanitario y, paradójicamente, uno de los menos digitalizados. Las herramientas existentes no fueron diseñadas para el flujo cognitivo del patólogo.
              </p>
              <p style={{ fontSize: 16, color: 'var(--text-body-lt)', lineHeight: 1.7, marginBottom: 20 }}>
                Aiscopia nació de una pregunta simple: ¿qué pasaría si diseñáramos el LIS desde cero, poniendo al patólogo en el centro y la inteligencia artificial como capa transversal?
              </p>
              <p style={{ fontSize: 16, color: 'var(--text-body-lt)', lineHeight: 1.7 }}>
                La respuesta es un Super LIS: una plataforma cognitiva que genera conocimiento, orquesta flujos y amplifica la capacidad diagnóstica, sin sustituir el criterio médico.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { icon: 'heart', color: 'var(--cyan)', title: 'Misión', body: 'Mejorar el diagnóstico anatomopatológico reduciendo la carga cognitiva innecesaria y liberando tiempo para la toma de decisiones clínicas complejas.' },
                { icon: 'telescope', color: 'var(--violet)', title: 'Visión', body: 'Convertir cada laboratorio de patología en un nodo de inteligencia clínica: generador de conocimiento reutilizable para la medicina de precisión.' },
                { icon: 'compass', color: 'var(--green)', title: 'Principio rector', body: 'La IA asiste, nunca sustituye. La responsabilidad diagnóstica final es siempre médica, siempre humana.' },
              ].map((v, i) => (
                <div key={i} className="card-light" style={{ padding: 20, display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <IconBox icon={v.icon} color={v.color} size={40} />
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-display-lt)', marginBottom: 6 }}>{v.title}</div>
                    <p style={{ fontSize: 14, color: 'var(--text-body-lt)', lineHeight: 1.6 }}>{v.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <FinalCTA setPage={setPage} lang={lang} />
    </>
  );
};

// ════════════════════════════════════════════════════════════
// CONTACT / DEMO PAGE
// ════════════════════════════════════════════════════════════
const ContactPage = ({ lang = 'es' }) => {
  const t = T[lang];
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const [form, setForm] = React.useState({ name: '', email: '', org: '', role: '', message: '', submitted: false });
  const submit = (e) => { e.preventDefault(); setForm(f => ({ ...f, submitted: true })); };
  const labels = lang === 'en' ? t.contactLabels : ['Nombre y apellidos', 'Email profesional', 'Institución / Centro', 'Cargo'];
  const placeholders = lang === 'en' ? t.contactPlaceholders : ['Dr. Juan García', 'jgarcia@hospital.es', 'Hospital Universitario...', 'Jefe de Servicio de Patología'];

  return (
    <>
      <PageHero pill={lang === 'en' ? t.contactPill : 'Demo'} title={lang === 'en' ? t.contactTitle : 'Solicita tu demo personalizada'} subtitle={lang === 'en' ? t.contactSub : 'Te mostramos Aiscopia sobre tu flujo real. No hay demos genéricas. Cada demostración está adaptada al contexto de tu laboratorio.'} />
      <section style={{ background: 'var(--light-bg)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
            {/* Left info */}
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.07em', textTransform: 'uppercase', color: '#148AB8', marginBottom: 20 }}>{lang === 'en' ? t.contactWhatPill : '¿Qué incluye la demo?'}</div>
              {[
                { icon: 'check', text: 'Recorrido completo del flujo anatomopatológico en Aiscopia' },
                { icon: 'check', text: 'Demostración del visor WSI integrado con IA' },
                { icon: 'check', text: 'Módulo de informe estructurado y SNOMED CT' },
                { icon: 'check', text: 'Análisis de tu caso de uso específico' },
                { icon: 'check', text: 'Q&A técnico y clínico sin límite de tiempo' },
              ].map((it, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'rgba(59,180,229,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <i data-lucide={it.icon} style={{ width: 11, height: 11, color: '#148AB8' }}></i>
                  </div>
                  <span style={{ fontSize: 15, color: 'var(--text-body-lt)', lineHeight: 1.5 }}>{it.text}</span>
                </div>
              ))}
              <div style={{ marginTop: 32, padding: 20, background: '#fff', border: '1px solid var(--light-border)', borderRadius: 12 }}>
                <div style={{ fontSize: 13, color: 'var(--text-muted-lt)', marginBottom: 8 }}>{lang === 'en' ? t.contactAlt : 'También puedes contactarnos directamente'}</div>
                <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--text-body-lt)', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <i data-lucide="mail" style={{ width: 16, height: 16, color: '#148AB8' }}></i>
                  demo@aiscopia.io
                </div>
              </div>
            </div>
            {/* Right form */}
            {form.submitted ? (
              <div style={{ background: '#fff', border: '1px solid var(--light-border)', borderRadius: 16, padding: 48, textAlign: 'center' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(74,222,128,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
                  <i data-lucide="check" style={{ width: 28, height: 28, color: 'var(--green)' }}></i>
                </div>
                <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-display-lt)', marginBottom: 12 }}>{lang === 'en' ? t.contactSuccessTitle : '¡Solicitud recibida!'}</div>
                <p style={{ fontSize: 15, color: 'var(--text-body-lt)', lineHeight: 1.6 }}>{lang === 'en' ? t.contactSuccessBody : 'Nos pondremos en contacto contigo en menos de 24 horas para coordinar la demo personalizada.'}</p>
              </div>
            ) : (
              <form onSubmit={submit} style={{ background: '#fff', border: '1px solid var(--light-border)', borderRadius: 16, padding: 36 }}>
                <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-display-lt)', marginBottom: 24 }}>{lang === 'en' ? t.contactFormTitle : 'Formulario de solicitud'}</div>
                <div className="grid-2" style={{ gap: 16, marginBottom: 16 }}>
                  {[
                    { name: 'name',  label: labels[0], placeholder: placeholders[0], required: true },
                    { name: 'email', label: labels[1], placeholder: placeholders[1], required: true },
                    { name: 'org',   label: labels[2], placeholder: placeholders[2], required: true },
                    { name: 'role',  label: labels[3], placeholder: placeholders[3], required: false },
                  ].map(f => (
                    <div key={f.name}>
                      <label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-body-lt)', marginBottom: 6 }}>{f.label}{f.required && <span style={{ color: '#F87171' }}> *</span>}</label>
                      <input
                        type={f.name === 'email' ? 'email' : 'text'}
                        required={f.required}
                        placeholder={f.placeholder}
                        value={form[f.name]}
                        onChange={e => setForm(prev => ({ ...prev, [f.name]: e.target.value }))}
                        style={{ width: '100%', padding: '10px 14px', border: '1px solid var(--light-border)', borderRadius: 8, fontSize: 14, color: 'var(--text-display-lt)', fontFamily: 'var(--font)', outline: 'none' }}
                      />
                    </div>
                  ))}
                </div>
                <div style={{ marginBottom: 20 }}>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--text-body-lt)', marginBottom: 6 }}>{lang === 'en' ? t.contactTextareaLabel : '¿Qué te gustaría ver en la demo?'}</label>
                  <textarea
                    rows={4}
                    placeholder={lang === 'en' ? t.contactTextareaPlaceholder : 'Cuéntanos brevemente tu contexto y qué es lo que más te interesa conocer de Aiscopia...'}
                    value={form.message}
                    onChange={e => setForm(prev => ({ ...prev, message: e.target.value }))}
                    style={{ width: '100%', padding: '10px 14px', border: '1px solid var(--light-border)', borderRadius: 8, fontSize: 14, color: 'var(--text-display-lt)', fontFamily: 'var(--font)', resize: 'vertical', outline: 'none' }}
                  ></textarea>
                </div>
                <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
                  <i data-lucide="calendar" style={{ width: 16, height: 16 }}></i>
                  {lang === 'en' ? t.contactSubmitBtn : 'Solicitar demo personalizada'}
                </button>
                <p style={{ fontSize: 12, color: 'var(--text-muted-lt)', marginTop: 12, textAlign: 'center' }}>{lang === 'en' ? t.contactNote : 'Sin compromiso. Respuesta en menos de 24 horas.'}</p>
              </form>
            )}
          </div>
        </div>
      </section>
    </>
  );
};

// ────────────────────────────────────────────────────────────
// SHARED: PageHero
// ────────────────────────────────────────────────────────────
const PageHero = ({ pill, pillVariant = 'pill-cyan', title, subtitle, cta, dark = false }) => (
  <section style={{ background: dark ? 'linear-gradient(180deg, #0D0A1A 0%, var(--dark-900) 100%)' : 'var(--dark-900)', paddingTop: 160, paddingBottom: 80, position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
    <div style={{ position: 'absolute', top: -150, left: '50%', transform: 'translateX(-50%)', width: 700, height: 400, background: `radial-gradient(ellipse, ${dark ? 'rgba(123,127,239,0.15)' : 'rgba(59,180,229,0.12)'} 0%, transparent 65%)`, pointerEvents: 'none' }}></div>
    <div className="container-sm" style={{ position: 'relative' }}>
      {pill && <div style={{ marginBottom: 20 }}><span className={`pill ${pillVariant}`}>{pill}</span></div>}
      <h1 className="display-2" style={{ color: 'var(--text-display)', marginBottom: 20 }}>{title}</h1>
      {subtitle && <p className="body-lg" style={{ color: 'var(--text-body-dk)', maxWidth: 600, margin: '0 auto 36px', opacity: 0.85 }}>{subtitle}</p>}
      {cta && (
        <button className="btn btn-primary btn-lg" onClick={cta.action}>
          {cta.label} <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>
        </button>
      )}
    </div>
  </section>
);

// ════════════════════════════════════════════════════════════
// BLOG PAGE
// ════════════════════════════════════════════════════════════
const BlogPage = ({ setPage, lang = 'es' }) => {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  const posts = lang === 'en' ? [
    { tag: 'Product', color: 'var(--cyan)', date: '28 Apr 2026', title: 'Aiscopia 2.0: from LIS to Intelligent Pathology Platform', excerpt: 'How we evolved the concept of the traditional LIS into a Super LIS that integrates AI, WSI and structured reporting in a single platform.', readTime: '8 min', author: 'Aiscopia Team' },
    { tag: 'AI', color: 'var(--violet)', date: '22 Apr 2026', title: 'Ki-67 quantification with AI: reproducibility we can trust', excerpt: 'A deep dive into how AI-assisted Ki-67 analysis reduces inter-observer variability and what pathologists need to know about its limitations.', readTime: '10 min', author: 'Dr. S. Morales' },
    { tag: 'Clinical', color: 'var(--green)', date: '15 Apr 2026', title: 'ISO 15189 and digital pathology: a practical guide', excerpt: 'What accreditation requirements mean for laboratories adopting digital workflows, and how Aiscopia embeds quality control natively.', readTime: '7 min', author: 'Aiscopia Team' },
    { tag: 'Workflow', color: '#FBBF24', date: '08 Apr 2026', title: 'TAT reduction without cutting corners: the Aiscopia approach', excerpt: 'Intelligent workflow orchestration that identifies bottlenecks and redistributes workload dynamically — without compromising diagnostic rigour.', readTime: '6 min', author: 'Aiscopia Team' },
    { tag: 'Interoperability', color: 'var(--cyan)', date: '01 Apr 2026', title: 'FHIR R4 in anatomical pathology: what it means in practice', excerpt: 'How HL7 FHIR enables seamless integration between the LIS, HIS and external AI platforms in modern healthcare ecosystems.', readTime: '9 min', author: 'Dr. N. García' },
    { tag: 'Research', color: 'var(--violet)', date: '24 Mar 2026', title: 'Building a biobank from clinical data: lessons learned', excerpt: 'How Aiscopia transforms the diagnostic archive into a living research asset, with full GDPR compliance and semantic SNOMED CT coding.', readTime: '11 min', author: 'Aiscopia Team' },
  ] : [
    { tag: 'Producto', color: 'var(--cyan)', date: '28 Abr 2026', title: 'Aiscopia 2.0: del LIS a la Plataforma Inteligente de Patología', excerpt: 'Cómo evolucionamos el concepto del LIS tradicional hacia un Super LIS que integra IA, WSI e informes estructurados en una única plataforma.', readTime: '8 min', author: 'Equipo Aiscopia' },
    { tag: 'IA', color: 'var(--violet)', date: '22 Abr 2026', title: 'Cuantificación de Ki-67 con IA: reproducibilidad en la que confiar', excerpt: 'Un análisis en profundidad de cómo el análisis de Ki-67 asistido por IA reduce la variabilidad interobservador y qué necesitan saber los patólogos sobre sus limitaciones.', readTime: '10 min', author: 'Dr. S. Morales' },
    { tag: 'Clínico', color: 'var(--green)', date: '15 Abr 2026', title: 'ISO 15189 y patología digital: una guía práctica', excerpt: 'Qué implican los requisitos de acreditación para laboratorios que adoptan flujos digitales y cómo Aiscopia embebe el control de calidad de forma nativa.', readTime: '7 min', author: 'Equipo Aiscopia' },
    { tag: 'Flujo de trabajo', color: '#FBBF24', date: '08 Abr 2026', title: 'Reducción del TAT sin atajos: el enfoque Aiscopia', excerpt: 'Orquestación inteligente de flujos que identifica cuellos de botella y redistribuye la carga de trabajo dinámicamente, sin comprometer el rigor diagnóstico.', readTime: '6 min', author: 'Equipo Aiscopia' },
    { tag: 'Interoperabilidad', color: 'var(--cyan)', date: '01 Abr 2026', title: 'FHIR R4 en anatomía patológica: qué significa en la práctica', excerpt: 'Cómo HL7 FHIR permite la integración transparente entre el LIS, el HIS y plataformas de IA externas en ecosistemas sanitarios modernos.', readTime: '9 min', author: 'Dr. N. García' },
    { tag: 'Investigación', color: 'var(--violet)', date: '24 Mar 2026', title: 'Construir un biobanco desde datos clínicos: lecciones aprendidas', excerpt: 'Cómo Aiscopia transforma el archivo diagnóstico en un activo de investigación vivo, con pleno cumplimiento del RGPD y codificación SNOMED CT semántica.', readTime: '11 min', author: 'Equipo Aiscopia' },
  ];

  const featured = posts[0];
  const rest = posts.slice(1);

  return (
    <>
      <PageHero
        pill={lang === 'en' ? 'Blog' : 'Blog'}
        title={lang === 'en' ? 'Insights from the world of digital pathology' : 'Reflexiones desde la patología digital'}
        subtitle={lang === 'en' ? 'Clinical thinking, product updates and deep dives written by our team of pathologists and engineers.' : 'Pensamiento clínico, novedades del producto y análisis en profundidad escritos por nuestro equipo de patólogos e ingenieros.'}
      />

      <section style={{ background: 'var(--light-bg)' }}>
        <div className="container">
          {/* Featured post */}
          <div style={{ background: '#fff', border: '1px solid var(--light-border)', borderRadius: 16, overflow: 'hidden', marginBottom: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', cursor: 'pointer' }} className="card-light">
            {/* Left: image placeholder */}
            <div style={{ background: `linear-gradient(135deg, #0D1225 0%, #131624 60%, rgba(59,180,229,0.15) 100%)`, minHeight: 280, position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 28 }}>
              <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle at 70% 30%, rgba(123,127,239,0.20) 0%, transparent 60%)', pointerEvents: 'none' }}></div>
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: featured.color, background: `${featured.color}18`, border: `1px solid ${featured.color}30`, borderRadius: 999, padding: '4px 12px' }}>{featured.tag}</span>
            </div>
            {/* Right: content */}
            <div style={{ padding: '32px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ fontSize: 12, color: 'var(--text-muted-lt)', marginBottom: 12 }}>{featured.date} · {featured.readTime} {lang === 'en' ? 'read' : 'lectura'}</div>
              <h2 style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-display-lt)', lineHeight: 1.3, marginBottom: 14 }}>{featured.title}</h2>
              <p style={{ fontSize: 14, color: 'var(--text-body-lt)', lineHeight: 1.65, marginBottom: 20 }}>{featured.excerpt}</p>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-muted-lt)' }}>{featured.author}</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: '#148AB8', display: 'flex', alignItems: 'center', gap: 5 }}>
                  {lang === 'en' ? 'Read post' : 'Leer artículo'} <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i>
                </span>
              </div>
            </div>
          </div>

          {/* Rest of posts */}
          <div className="grid-3">
            {rest.map((post, i) => (
              <div key={i} className="card-light" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }}>
                <div style={{ height: 6, background: `linear-gradient(90deg, ${post.color}, ${post.color}66)` }}></div>
                <div style={{ padding: 22 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                    <span style={{ fontSize: 10, fontWeight: 600, color: post.color, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{post.tag}</span>
                    <span style={{ fontSize: 11, color: 'var(--text-muted-lt)' }}>{post.readTime} {lang === 'en' ? 'read' : 'lectura'}</span>
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-display-lt)', marginBottom: 10, lineHeight: 1.35 }}>{post.title}</div>
                  <p style={{ fontSize: 13, color: 'var(--text-body-lt)', lineHeight: 1.6, marginBottom: 16 }}>{post.excerpt}</p>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 12, borderTop: '1px solid var(--light-border)' }}>
                    <span style={{ fontSize: 12, color: 'var(--text-muted-lt)' }}>{post.author} · {post.date}</span>
                    <i data-lucide="arrow-right" style={{ width: 14, height: 14, color: '#148AB8' }}></i>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Newsletter CTA */}
          <div style={{ marginTop: 60, background: 'linear-gradient(135deg, var(--dark-700), var(--dark-600))', border: '1px solid var(--dark-border-2)', borderRadius: 16, padding: '40px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--cyan)', marginBottom: 10 }}>
                {lang === 'en' ? 'Newsletter' : 'Newsletter'}
              </div>
              <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-display)', marginBottom: 8 }}>
                {lang === 'en' ? 'Stay up to date with digital pathology' : 'Mantente al día con la patología digital'}
              </div>
              <p style={{ fontSize: 14, color: 'var(--text-body-dk)', opacity: 0.8 }}>
                {lang === 'en' ? 'One email per month. Clinical insights, product news and research.' : 'Un email al mes. Novedades clínicas, producto e investigación.'}
              </p>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexShrink: 0 }}>
              <input
                type="email"
                placeholder={lang === 'en' ? 'your@email.com' : 'tu@email.com'}
                style={{
                  background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
                  borderRadius: 8, padding: '10px 16px', color: '#fff', fontSize: 14,
                  fontFamily: 'var(--font)', outline: 'none', minWidth: 240,
                }}
              />
              <button className="btn btn-primary" style={{ whiteSpace: 'nowrap' }}>
                {lang === 'en' ? 'Subscribe' : 'Suscribirme'}
              </button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { HomePage, ProductPage, AIPage, SolutionsPage, ResourcesPage, AboutPage, ContactPage, PageHero, BlogPage });
