/* eslint-disable */
/* schema.jsx — single schematic showing what Teramot does:
   tus sistemas (left)  →  Teramot (center)  →  IA models (right).
   Drawn inline with SVG. Lives between the hero and the features tabs. */

const SchemaDiagram = ({ compact = false }) => {
  const { lang } = useLang();
  const t = {
    es: {
      eyebrow: '',
      headline: 'Tus sistemas, conectados con cualquier IA.',
      sourcesLabel: 'Tus sistemas',
      coreLabel: 'Teramot',
      aiLabel: 'Tu IA favorita',
      perimeterLabel: 'Tu entorno seguro',
      soc2: 'SOC 2 Certified',
      pgMeta: 'SAP · 12 tablas',
      sfMeta: 'CRM · 8 objetos',
      shMeta: '3 libros activos',
      erpMeta: 'Operaciones',
      footer: ''
    },
    en: {
      eyebrow: '',
      headline: 'Your systems, connected to any AI.',
      sourcesLabel: 'Your systems',
      coreLabel: 'Teramot',
      aiLabel: 'Your favorite AI',
      perimeterLabel: 'Your secure environment',
      soc2: 'SOC 2 Certified',
      pgMeta: 'SAP · 12 tables',
      sfMeta: 'CRM · 8 objects',
      shMeta: '3 active workbooks',
      erpMeta: 'Operations',
      footer: ''
    }
  }[lang];

  const LOCKS_LEFT  = ['l-1', 'l-2', 'l-3', 'l-4'];
  const LOCKS_RIGHT = ['r-1', 'r-2', 'r-3'];

  return (
    <section className={`tm-schema ${compact ? 'tm-schema--compact' : ''}`} id={compact ? undefined : 'schema'}>
      <div className={compact ? '' : 'tm-container'}>
        {!compact && (
          <div className="tm-schema-head">
            {t.eyebrow ? <span className="tm-schema-eyebrow">{t.eyebrow}</span> : null}
            <h2 className="tm-schema-h2">{t.headline}</h2>
          </div>
        )}

        <div className="tm-schema-perimeter">
          <span className="tm-schema-perimeter-label">
            <i className="ph-fill ph-lock-simple"></i>
            <span>{t.perimeterLabel}</span>
          </span>

          <span className="tm-schema-soc2" aria-label="SOC 2 Type II Certified">
            <i className="ph-fill ph-shield-check"></i>
            <span>{t.soc2}</span>
          </span>

        <div className="tm-schema-board" aria-hidden="true">

          {/* TOP — data sources */}
          <div className="tm-schema-col tm-schema-col--sources tm-schema-col--left">
            <span className="tm-schema-col-label">{t.sourcesLabel}</span>
            <div className="tm-schema-stack">
              <div className="tm-schema-card">
                <i className="ph-bold ph-database tm-schema-card-ico" style={{color: '#2f6df3'}}></i>
                <span>Postgres</span>
                <span className="tm-schema-card-meta">{t.pgMeta}</span>
              </div>
              <div className="tm-schema-card">
                <i className="ph-bold ph-cloud tm-schema-card-ico" style={{color: '#00a1e0'}}></i>
                <span>Salesforce</span>
                <span className="tm-schema-card-meta">{t.sfMeta}</span>
              </div>
              <div className="tm-schema-card">
                <i className="ph-bold ph-file-xls tm-schema-card-ico" style={{color: '#217346'}}></i>
                <span>Excel</span>
                <span className="tm-schema-card-meta">{t.shMeta}</span>
              </div>
              <div className="tm-schema-card">
                <i className="ph-bold ph-buildings tm-schema-card-ico" style={{color: '#7c3aed'}}></i>
                <span>SAP</span>
                <span className="tm-schema-card-meta">{t.erpMeta}</span>
              </div>
              <div className="tm-schema-card">
                <i className="ph-bold ph-database tm-schema-card-ico" style={{color: '#4285F4'}}></i>
                <span>BigQuery</span>
              </div>
              <div className="tm-schema-card">
                <i className="ph-bold ph-snowflake tm-schema-card-ico" style={{color: '#29B5E8'}}></i>
                <span>Snowflake</span>
              </div>
            </div>
          </div>

          {/* CENTER — Teramot core */}
          <div className="tm-schema-col tm-schema-col--core">
            <span className="tm-schema-col-label">{t.coreLabel}</span>
            <div className="tm-schema-core">
              <span className="tm-schema-core-ring tm-schema-core-ring-1"></span>
              <span className="tm-schema-core-ring tm-schema-core-ring-2"></span>
              <span className="tm-schema-core-ring tm-schema-core-ring-3"></span>
              <svg viewBox="0 0 212 195" width="76" aria-hidden="true" className="tm-schema-mark">
                <path
                  d="M44.8 97.5h122.6c25 0 45.1-20.1 45.1-45.1S192.4 7.3 167.4 7.3H45.2C20.2 7.3 0 27.5 0 52.5s19.9 45 44.8 45z"
                  fill="#5A6DF3"
                />
                <circle cx="106.2" cy="142.2" r="44.7" fill="#91DFC8" />
                <circle cx="106.2" cy="52.5" r="45.3" fill="#253DE5" />
              </svg>
            </div>
            <div className="tm-schema-core-foot">
              <span className="tm-schema-pill">
                <span className="tm-schema-pill-dot"></span>
                Entendiendo tu negocio
              </span>
            </div>
          </div>

          {/* RIGHT — AI models */}
          <div className="tm-schema-col tm-schema-col--right">
            <span className="tm-schema-col-label">{t.aiLabel}</span>
            <div className="tm-schema-stack">
              <div className="tm-schema-card tm-schema-card--ai">
                <span className="tm-schema-ai-ico tm-schema-ai-ico--img">
                  <img src="brand/clients/claude.png" alt="Claude"/>
                </span>
                <span>Claude</span>
                <span className="tm-schema-card-meta">claude.ai</span>
              </div>
              <div className="tm-schema-card tm-schema-card--ai">
                <span className="tm-schema-ai-ico tm-schema-ai-ico--img">
                  <img src="brand/clients/chatgpt.png" alt="ChatGPT"/>
                </span>
                <span>ChatGPT</span>
                <span className="tm-schema-card-meta">chat.openai.com</span>
              </div>
              <div className="tm-schema-card tm-schema-card--ai">
                <span className="tm-schema-ai-ico tm-schema-ai-ico--img">
                  <img src="brand/clients/gemini.png" alt="Gemini"/>
                </span>
                <span>Gemini</span>
                <span className="tm-schema-card-meta">gemini.google.com</span>
              </div>
            </div>
          </div>

          {/* connectors (positioned over the columns) */}
          <svg className="tm-schema-wires" viewBox="0 0 1200 460" preserveAspectRatio="none" aria-hidden="true">
            <defs>
              <linearGradient id="wire-l" x1="320" y1="0" x2="600" y2="0" gradientUnits="userSpaceOnUse">
                <stop offset="0%"   stopColor="#253DE5" stopOpacity="0"/>
                <stop offset="40%"  stopColor="#253DE5" stopOpacity="0.55"/>
                <stop offset="100%" stopColor="#253DE5" stopOpacity="0.9"/>
              </linearGradient>
              <linearGradient id="wire-r" x1="600" y1="0" x2="880" y2="0" gradientUnits="userSpaceOnUse">
                <stop offset="0%"   stopColor="#5A6DF3" stopOpacity="0.9"/>
                <stop offset="60%"  stopColor="#5A6DF3" stopOpacity="0.55"/>
                <stop offset="100%" stopColor="#5A6DF3" stopOpacity="0"/>
              </linearGradient>
            </defs>
            {/* LEFT — 6 source cards, space-between */}
            {[44, 122, 200, 278, 356, 434].map((y, i) => (
              <path key={`l${i}`}
                    d={`M 320 ${y} C 460 ${y}, 500 216, 600 216`}
                    stroke="url(#wire-l)" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
            ))}
            {/* RIGHT — 3 AI cards, centered cluster */}
            {[170, 240, 310].map((y, i) => (
              <path key={`r${i}`}
                    d={`M 600 216 C 700 216, 740 ${y}, 880 ${y}`}
                    stroke="url(#wire-r)" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
            ))}
            {/* dots — 3 paths pairing every other left source to each AI */}
            {[0, 1, 2].map(i => (
              <circle key={`dot${i}`} r="3" fill="#5A6DF3">
                <animateMotion dur={`${3 + i * 0.5}s`} repeatCount="indefinite" begin={`${i * 0.6}s`}>
                  <mpath href={`#wire-path-${i}`}/>
                </animateMotion>
              </circle>
            ))}
            {[[44, 170], [200, 240], [356, 310]].map(([sourceY, aiY], i) => (
              <path key={`p${i}`} id={`wire-path-${i}`}
                    d={`M 320 ${sourceY} C 460 ${sourceY}, 500 216, 600 216 C 700 216, 740 ${aiY}, 880 ${aiY}`}
                    stroke="none" fill="none"/>
            ))}
          </svg>
        </div>
        </div>

        {!compact && <p className="tm-schema-footer">{t.footer || '\u00A0'}</p>}
      </div>
    </section>
  );
};

Object.assign(window, { SchemaDiagram });