/* data.jsx — sample data, helpers, catalog */

const CATALOG = [
  { id: 'landing',   name: 'Landing Page',                            unit: 'pieza', price: 18000,  sub: 'Página de alta conversión · Hasta 6 secciones · CMS opcional' },
  { id: 'corp',      name: 'Sitio web corporativo',                   unit: 'pieza', price: 35000,  sub: '5 a 8 páginas · WordPress · SEO on-page incluido' },
  { id: 'ecom',      name: 'Tienda en línea',                         unit: 'pieza', price: 55000,  sub: 'WooCommerce o Shopify · Hasta 100 SKUs · Pasarela de pago MX' },
  { id: 'seo',       name: 'Estrategia SEO mensual',                  unit: 'mes',   price: 6500,   sub: 'Auditoría, on-page, link building y reporte mensual' },
  { id: 'ads-setup', name: 'Configuración Google Ads',                unit: 'pieza', price: 8000,   sub: 'Estructura de campañas, keywords, copies y conversiones' },
  { id: 'ads-mgmt',  name: 'Gestión Google Ads mensual',              unit: 'mes',   price: 5500,   sub: 'Optimización, reportes y ajuste de pujas · No incluye presupuesto' },
  { id: 'maint',     name: 'Mantenimiento web mensual',               unit: 'mes',   price: 1800,   sub: 'Actualizaciones, respaldos, soporte técnico y velocidad' },
  { id: 'copy',      name: 'Copywriting y textos del sitio',          unit: 'pieza', price: 8000,   sub: 'Hasta 6 secciones · Tono adaptado a la marca · SEO-friendly' },
];

const STATUS_LABEL = {
  draft:    'Borrador',
  sent:     'Enviada',
  accepted: 'Aceptada',
  rejected: 'Rechazada',
  expired:  'Expirada',
};

/* HELPERS */
const fmtMXN = (n) => '$' + (Math.round(n)).toLocaleString('es-MX') + ' MXN';
const fmtMXNshort = (n) => '$' + (Math.round(n)).toLocaleString('es-MX');
const fmtDateLong = (iso) => {
  if (!iso || iso === '—') return iso || '—';
  const d = new Date(iso + 'T12:00:00');
  return d.toLocaleDateString('es-MX', { day: '2-digit', month: 'short', year: 'numeric' });
};
const fmtDateShort = (iso) => {
  if (!iso) return '';
  const d = new Date(iso + 'T12:00:00');
  return d.toLocaleDateString('es-MX', { day: '2-digit', month: 'short' });
};

function computeTotals(quote) {
  const subtotal = quote.items.reduce((s, it) => s + (it.qty * it.price), 0);
  let discount = 0;
  if (quote.discount?.type === 'pct') discount = subtotal * (quote.discount.value / 100);
  if (quote.discount?.type === 'fixed') discount = quote.discount.value;
  const taxable = subtotal - discount;
  const iva = taxable * 0.16;
  const total = taxable + iva;
  return { subtotal, discount, taxable, iva, total };
}

/* paymentSummary — produce a short "50% / 50%" or "40% / 30% / 30%" label */
function paymentSummary(quote) {
  return quote.schedule.map(s => `${s.pct}%`).join(' / ');
}

const LogoMark = ({ size = 26 }) => (
  <img src="/images/logo.png" alt="Source Code" style={{ height: size, width: 'auto', display: 'block' }} />
);

const Brand = () => (
  <div className="brand">
    <img src="/images/logo.png" alt="Source Code" style={{ height: 32, width: 'auto', display: 'block' }} />
  </div>
);

/* SECTION LABEL — small uppercase tracked label */
const SectionLabel = ({ children, style }) => (
  <div className="section-label" style={style}>{children}</div>
);

const StatusPill = ({ status }) => (
  <span className={`pill ${status}`}>
    <span className="pdot"></span>
    {STATUS_LABEL[status] || status}
  </span>
);

/* small inline icons */
const Icon = {
  search: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2"/><path d="M20 20l-3.5-3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>,
  plus: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>,
  back: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M14 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  trash: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M4 7h16M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  eye: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" stroke="currentColor" strokeWidth="1.8"/><circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.8"/></svg>,
  send: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round"/></svg>,
  copy: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><rect x="8" y="8" width="13" height="13" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M16 8V5a2 2 0 00-2-2H5a2 2 0 00-2 2v9a2 2 0 002 2h3" stroke="currentColor" strokeWidth="1.8"/></svg>,
  dl: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 4v12m0 0l-4-4m4 4l4-4M5 20h14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  chev: (p) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" {...p}><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  drag: () => <span style={{fontWeight: 700, letterSpacing: '-2px'}}>::</span>,
  check: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  arrowR: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  clock: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  spark: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l3 3M15 15l3 3M6 18l3-3M15 9l3-3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
};

Object.assign(window, { CATALOG, STATUS_LABEL, fmtMXN, fmtMXNshort, fmtDateLong, fmtDateShort, computeTotals, paymentSummary, LogoMark, Brand, SectionLabel, StatusPill, Icon });
