// Portfolio — casos reales
const CASES = [
  {
    id: 1,
    client: 'CFDI API',
    url: 'cfdiapi.com',
    siteUrl: 'https://cfdiapi.com',
    demoUrl: 'https://t.me/cfdiAPIbot',
    demoLabel: 'Bot Telegram',
    sector: 'Fiscal · México',
    title: 'API de facturación electrónica con bot de Telegram IA',
    desc: 'Generación, validación y gestión de CFDI 4.0. Bot @cfdiAPIbot con IA para facturar por voz, imagen o lenguaje natural.',
    tags: ['Node.js', 'MongoDB', 'AWS', 'OpenAI', 'Telegram Bot'],
    stats: [
      { v: '15K+', k: 'CFDI generados' },
      { v: '800+', k: 'empresas activas' },
      { v: '95%', k: 'automatización' },
    ],
    year: '2025',
    color: '#5b8dff',
  },
  {
    id: 2,
    client: 'Extractify',
    url: 'extractify.io',
    siteUrl: 'https://extractify.io',
    demoUrl: 'https://extractify.io',
    demoLabel: 'Demo IA',
    sector: 'IA · Document AI',
    title: 'Extracción inteligente de datos con OCR + NLP',
    desc: 'Plataforma que convierte documentos, imágenes y texto no estructurado en datos estructurados usando OCR, NLP y computer vision.',
    tags: ['Python', 'TensorFlow', 'OpenAI', 'Next.js', 'FastAPI'],
    stats: [
      { v: '50K+', k: 'documentos procesados' },
      { v: '98%', k: 'precisión IA' },
      { v: '5s', k: 'tiempo promedio' },
    ],
    year: '2025',
    color: '#a78bfa',
  },
  {
    id: 3,
    client: 'Pablo Solana',
    url: 'pablosolana.dev',
    siteUrl: 'https://pablosolana.dev',
    sector: 'Portfolio · Dev',
    title: 'Portfolio full-stack con Lighthouse 100/100',
    desc: 'Portfolio personal con diseño moderno, modo oscuro, animaciones fluidas y performance ultra-optimizado. Core Web Vitals perfectos.',
    tags: ['Astro', 'TypeScript', 'Tailwind', 'Framer Motion', 'Vercel'],
    stats: [
      { v: '100', k: 'Lighthouse Score' },
      { v: '0.8s', k: 'tiempo de carga' },
      { v: 'A+', k: 'accesibilidad' },
    ],
    year: '2024',
    color: '#4ade80',
  },
];

const CaseCard = ({ c, idx }) => (
  <article className="case" style={{'--case-color': c.color}}>
    <div className="case__media" aria-hidden="true">
      <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice" className="case__media-svg">
        <defs>
          <pattern id={`p${c.id}`} patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="14" stroke="currentColor" strokeWidth="6" opacity="0.22"/>
          </pattern>
        </defs>
        <rect width="600" height="400" fill={c.color}/>
        <rect width="600" height="400" fill={`url(#p${c.id})`} color="white"/>
      </svg>
      <div className="case__media-label mono">
        <span>[ captura · {c.url} ]</span>
      </div>
      <div className="case__media-chip mono">{c.url}</div>
    </div>

    <div className="case__body">
      <div className="case__meta mono">
        <span>{String(idx + 1).padStart(2, '0')} / {CASES.length.toString().padStart(2, '0')}</span>
        <span>·</span>
        <span>{c.sector}</span>
        <span>·</span>
        <span>{c.year}</span>
      </div>
      <h3 className="case__title">
        <span className="case__client">{c.client}.</span>{' '}
        {c.title}
      </h3>
      <p className="case__desc">{c.desc}</p>
      <div className="case__tags">
        {c.tags.map(t => <span key={t} className="case__tag mono">{t}</span>)}
      </div>
      <div className="case__metrics">
        {c.stats.map((s, i) => (
          <div key={i} className="case__metric-item">
            <div className="case__metric-v">{s.v}</div>
            <div className="case__metric-k">{s.k}</div>
          </div>
        ))}
      </div>
      <div className="case__actions">
        <a href={c.siteUrl} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
          Ver sitio
        </a>
        {c.demoUrl && (
          <a href={c.demoUrl} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
            {c.demoLabel || 'Demo'}
          </a>
        )}
      </div>
    </div>
  </article>
);

const Portfolio = () => (
  <section id="portfolio" className="portfolio">
    <div className="container">
      <div className="section-head portfolio__head">
        <div>
          <div className="eyebrow">portfolio · 03 / 05</div>
          <h2>Casos <em>reales</em>.<br/>Resultados medibles.</h2>
        </div>
        <p>Productos en producción con usuarios reales. Cada uno construido en semanas, no en meses.</p>
      </div>

      <div className="case-grid">
        {CASES.map((c, i) => <CaseCard key={c.id} c={c} idx={i} />)}
      </div>

      <div className="portfolio__cta">
        <p className="mono muted">¿quieres que tu proyecto sea el siguiente?</p>
        <a href="mailto:contacto@loprogramamos.com?subject=Nuevo proyecto" className="btn btn-ghost">Hablemos</a>
      </div>
    </div>
  </section>
);

window.Portfolio = Portfolio;