/* global React */
// art.jsx — Composiciones abstractas de marca + íconos (monocromo)
const { useRef, useEffect } = React;

/* ---------- HERO PREVIEW: dashboard abstracto de marca ---------- */
function HeroPreview() {
  return (
    <div className="preview-inner" aria-hidden="true">
      <svg viewBox="0 0 1280 720" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
      style={{ display: 'block', width: "1200px" }}>
        <defs>
          <linearGradient id="hp-fade" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1e1e1e" />
            <stop offset="1" stopColor="#101010" />
          </linearGradient>
          <radialGradient id="hp-orb" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0" stopColor="#1500ff" stopOpacity="0.5" />
            <stop offset="1" stopColor="#1500ff" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="1280" height="720" fill="url(#hp-fade)" />
        {/* grid lines */}
        <g stroke="#2f2f2f" strokeWidth="1" opacity="0.5">
          {Array.from({ length: 11 }).map((_, i) =>
          <line key={'v' + i} x1={120 + i * 104} y1="80" x2={120 + i * 104} y2="640" />
          )}
          {Array.from({ length: 6 }).map((_, i) =>
          <line key={'h' + i} x1="120" y1={120 + i * 100} x2="1160" y2={120 + i * 100} />
          )}
        </g>
        {/* faint orbit */}
        <circle cx="900" cy="250" r="320" fill="url(#hp-orb)" />
        {/* growth curve */}
        <polyline points="160,560 320,500 460,520 600,400 740,420 880,300 1020,240 1140,150"
        fill="none" stroke="#fdfdfd" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
        {/* nodes */}
        {[[320, 500], [600, 400], [880, 300], [1140, 150]].map(([x, y], i) =>
        <circle key={i} cx={x} cy={y} r="7" fill="#050505" stroke="#fdfdfd" strokeWidth="2.5" />
        )}
        <circle cx="1140" cy="150" r="14" fill="#1500ff" />
        {/* bars */}
        <g fill="#2f2f2f">
          {[0, 1, 2, 3, 4, 5].map((i) =>
          <rect key={i} x={180 + i * 150} y={600 - (i * 18 + 30)} width="64" height={i * 18 + 30} rx="6" />
          )}
        </g>
        {/* metric chips */}
        <g>
          <rect x="160" y="110" width="220" height="64" rx="14" fill="#050505" stroke="#2f2f2f" />
          <circle cx="196" cy="142" r="12" fill="#1e1e1e" />
          <rect x="222" y="130" width="120" height="9" rx="4.5" fill="#3a3a3a" />
          <rect x="222" y="148" width="76" height="9" rx="4.5" fill="#2a2a2a" />
        </g>
      </svg>
    </div>);

}

/* ---------- SECTOR ARTS (3) ---------- */
function SectorArt({ kind }) {
  const p = { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5,
    strokeLinecap: 'round', strokeLinejoin: 'round', className: 'sector-icon', 'aria-hidden': 'true' };
  if (kind === 'pymes') {
    // fábrica
    return (
      <svg {...p}>
        <path d="M3 20h18" />
        <path d="M4 20V11l5 3V11l5 3V8h2.4L19 5v15" />
        <path d="M7.5 20v-3M12 20v-3" />
      </svg>);
  }
  if (kind === 'negocios') {
    // tienda
    return (
      <svg {...p}>
        <path d="M4 9.5 5.4 4.6A1 1 0 0 1 6.36 4h11.28a1 1 0 0 1 .96.6L20 9.5" />
        <path d="M3 9.5h18l-.7 2.1a2.2 2.2 0 0 1-4.2 0 2.2 2.2 0 0 1-4.1 0 2.2 2.2 0 0 1-4.1 0 2.2 2.2 0 0 1-4.2 0Z" />
        <path d="M5 13v6.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V13" />
        <path d="M9.5 20v-4h5v4" />
      </svg>);
  }
  // marca personal — humano
  return (
    <svg {...p}>
      <circle cx="12" cy="8" r="3.4" />
      <path d="M5.5 20v-1a5 5 0 0 1 5-5h3a5 5 0 0 1 5 5v1" />
    </svg>);

}

/* ---------- SERVICE GLYPHS ---------- */
const glyphProps = { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
  strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round', className: 'serv-glyph' };
const Glyphs = {
  seo: <svg {...glyphProps}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /><path d="M8 11h6M11 8v6" opacity=".55" /></svg>,
  ads: <svg {...glyphProps}><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.4" fill="currentColor" /></svg>,
  web: <svg {...glyphProps}><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 9h18" /><path d="M6.5 6.5h.01M9 6.5h.01" /></svg>,
  rep: <svg {...glyphProps}><path d="M21 12a8 8 0 1 1-3.2-6.4" /><path d="m9 12 2 2 5-5" /></svg>,
  crm: <svg {...glyphProps}><circle cx="6" cy="7" r="2.2" /><circle cx="18" cy="7" r="2.2" /><circle cx="12" cy="18" r="2.2" /><path d="M7.6 8.6 10.6 16M16.4 8.6 13.4 16M8 7h8" /></svg>,
  social: <svg {...glyphProps}><circle cx="18" cy="6" r="2.5" /><circle cx="6" cy="12" r="2.5" /><circle cx="18" cy="18" r="2.5" /><path d="m8.2 10.8 7.6-3.6M8.2 13.2l7.6 3.6" /></svg>,
  maps: <svg {...glyphProps}><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z" /><circle cx="12" cy="10" r="2.6" /></svg>,
  chat: <svg {...glyphProps}><path d="M20.5 11.4a8 8 0 0 1-11.4 7.3L3.5 20.5l1.8-5.6A8 8 0 1 1 20.5 11.4z" /><path d="M8.6 10.6c.4 1.7 1.9 3.2 3.6 3.6l1.1-1.1 1.6.5" opacity=".55" /></svg>,
  blog: <svg {...glyphProps}><path d="M5 3.5h9l5 5V20a.5.5 0 0 1-.5.5H5z" /><path d="M14 3.5V9h5" opacity=".55" /><path d="M8 13h8M8 16.5h5" /></svg>,
  video: <svg {...glyphProps}><rect x="3" y="6" width="18" height="12" rx="2.5" /><path d="m10 9.6 5 2.4-5 2.4z" fill="currentColor" stroke="none" /></svg>,
  mail: <svg {...glyphProps}><rect x="3" y="5" width="18" height="14" rx="2.5" /><path d="m4 7 8 5.5L20 7" /></svg>,
  phone: <svg {...glyphProps}><path d="M4.5 5.2C4.5 12.4 11.6 19.5 18.8 19.5l.7-3.6-4-1.2-1.7 1.8a13 13 0 0 1-5.3-5.3l1.8-1.7-1.2-4z" /></svg>
};

/* ---------- SOCIAL ICONS ---------- */
const Social = {
  ig: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17" cy="7" r="1" fill="currentColor" stroke="none" /></svg>,
  li: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.07 1.4-2.07 2.85V21H9z" /></svg>,
  x: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>
};

Object.assign(window, { HeroPreview, SectorArt, Glyphs, Social });