/**
 * Command-Center hero. Left column = copy + meta rows; right column =
 * mock "Codaro Ops" dashboard card (metric tiles, sparkline, live feed).
 *
 * The dashboard mock auto-cycles its feed every 1.5s for the appearance
 * of activity — values are static. Replace with a real /status endpoint
 * once the backend exists (see HANDOFF §3.11).
 */

const META_ROWS = (lang) => [
  { k: T(lang, 'Стек',   'Stack'),  v: 'Next.js · Astro · Python · n8n' },
  { k: T(lang, 'Регион', 'Region'), v: 'KG · RU · global' },
  { k: T(lang, 'Связь',  'Reach'),  v: '@codaro_it · 47 min avg' },
];

const DASHBOARD_METRICS = (lang) => [
  { l: T(lang, 'Активных проектов', 'Active'),  v: '07',  d: '+1 wk' },
  { l: T(lang, 'Скриптов в проде',  'Scripts'), v: '23',  d: '99.4%' },
  { l: T(lang, 'Часов в очереди',   'Queue h'), v: '128', d: 'P50 12d' },
];

const FEED_LOG = (lang) => [
  { t: '14:02:11', m: T(lang, '✓ деплой kroi.site → vercel',                  '✓ deploy kroi.site → vercel'),                  c: 'celestial-light' },
  { t: '14:01:48', m: T(lang, '↻ парсер wb.ru — 412 позиций обновлено',       '↻ scraper wb.ru — 412 items refreshed'),         c: 'comet' },
  { t: '13:59:03', m: T(lang, '◆ tg-бот «Авангард» — 11 заявок принято',      '◆ tg-bot «Avangard» — 11 leads accepted'),       c: 'comet' },
  { t: '13:54:22', m: T(lang, '✓ fix-it: cron-задача на бэкапы (#1184)',      '✓ fix-it: cron backup task (#1184)'),            c: 'celestial-light' },
];

const DashboardSparkline = () => (
  <svg viewBox="0 0 400 60" style={{ width: '100%', height: 60 }}>
    <defs>
      <linearGradient id="hero-spark" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%"   stopColor="#663af3" stopOpacity="0.5" />
        <stop offset="100%" stopColor="#663af3" stopOpacity="0" />
      </linearGradient>
    </defs>
    <path
      d="M0,40 L20,32 L40,38 L60,28 L80,30 L100,18 L120,22 L140,14 L160,18 L180,8 L200,16 L220,10 L240,18 L260,12 L280,8 L300,14 L320,6 L340,12 L360,4 L380,10 L400,2 L400,60 L0,60 Z"
      fill="url(#hero-spark)"
    />
    <path
      d="M0,40 L20,32 L40,38 L60,28 L80,30 L100,18 L120,22 L140,14 L160,18 L180,8 L200,16 L220,10 L240,18 L260,12 L280,8 L300,14 L320,6 L340,12 L360,4 L380,10 L400,2"
      fill="none" stroke="#b6d9fc" strokeWidth="1.5"
    />
    <circle cx="400" cy="2" r="4" fill="#663af3">
      <animate attributeName="r" values="4;7;4" dur="1.6s" repeatCount="indefinite" />
    </circle>
  </svg>
);

const HeroDashboardCard = ({ lang }) => (
  <div className="card-glass" style={{ padding: 0, overflow: 'hidden', pointerEvents: 'auto' }}>
    {/* window chrome */}
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '14px 18px',
      borderBottom: '1px solid rgba(186, 215, 247, 0.08)',
    }}>
      <span style={{ width: 10, height: 10, borderRadius: 999, background: 'rgba(255,107,107,0.4)' }}></span>
      <span style={{ width: 10, height: 10, borderRadius: 999, background: 'rgba(255,193,107,0.4)' }}></span>
      <span style={{ width: 10, height: 10, borderRadius: 999, background: 'rgba(166, 230, 161, 0.4)' }}></span>
      <span className="font-mono" style={{
        marginLeft: 12, fontSize: 11,
        color: 'var(--color-whisper-blue)', letterSpacing: '0.1em',
      }}>
        codaro / ops.codaro.studio
      </span>
      <span className="badge" style={{ marginLeft: 'auto' }}>
        <span className="dot"></span> LIVE
      </span>
    </div>

    {/* metric tiles */}
    <div data-grid="hero-metrics" style={{ padding: 20, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
      {DASHBOARD_METRICS(lang).map((m, i) => (
        <div key={i} style={{
          padding: 14, borderRadius: 10,
          background: 'rgba(5, 6, 15, 0.6)',
          boxShadow: 'rgba(186, 215, 247, 0.08) 0px 0px 0px 1px inset',
        }}>
          <div className="font-mono" style={{ fontSize: 9, letterSpacing: '0.16em', color: 'var(--color-whisper-blue)' }}>
            {m.l.toUpperCase()}
          </div>
          <div className="font-display" style={{ marginTop: 8, fontSize: 32, color: 'var(--color-ghost-white)', lineHeight: 1 }}>
            {m.v}
          </div>
          <div className="font-mono" style={{ marginTop: 6, fontSize: 10, color: 'var(--color-celestial-light)' }}>
            {m.d}
          </div>
        </div>
      ))}
    </div>

    {/* sparkline */}
    <div style={{ padding: '0 20px 16px' }}>
      <div className="font-mono" style={{
        fontSize: 9, letterSpacing: '0.16em',
        color: 'var(--color-whisper-blue)', marginBottom: 8,
      }}>
        {T(lang, 'СДАЧИ ЗА 30 ДНЕЙ', 'SHIPS · 30D')}
      </div>
      <DashboardSparkline />
    </div>

    {/* live feed */}
    <div style={{
      margin: '0 20px 20px', padding: 14, borderRadius: 10,
      background: 'rgba(5, 6, 15, 0.6)',
      boxShadow: 'rgba(186, 215, 247, 0.08) 0px 0px 0px 1px inset',
    }}>
      <div className="font-mono" style={{
        fontSize: 9, letterSpacing: '0.16em',
        color: 'var(--color-whisper-blue)', marginBottom: 10,
      }}>
        {T(lang, 'ЛЕНТА', 'FEED')}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {FEED_LOG(lang).map((row, i) => (
          <div
            key={i}
            className="font-mono"
            style={{ fontSize: 11, lineHeight: 1.4, display: 'flex', gap: 12, opacity: 1 - i * 0.18 }}
          >
            <span style={{ color: 'var(--color-whisper-blue)' }}>{row.t}</span>
            <span style={{ color: `var(--color-${row.c})` }}>{row.m}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const Hero = ({ lang }) => {
  return (
    <section style={{ position: 'relative', padding: '80px 0 56px', overflow: 'hidden' }}>
      <div className="grid-bg" style={{ opacity: 0.4 }} />

      <div
        className="container"
        data-grid="hero"
        style={{
          position: 'relative',
          display: 'grid',
          gridTemplateColumns: '1.05fr 1fr',
          gap: 56,
          alignItems: 'center',
        }}
      >
        {/* copy */}
        <div style={{ pointerEvents: 'auto' }}>
          <span className="section-eyebrow">
            {T(lang, 'Codaro Studio · Команда из 4', 'Codaro Studio · Team of 4')}
          </span>

          <h1 className="font-display" style={{
            marginTop: 24,
            fontSize: 'clamp(44px, 5.6vw, 72px)',
            lineHeight: 1.02,
            letterSpacing: '-0.025em',
            color: 'var(--color-ghost-white)',
            fontWeight: 400,
          }}>
            {T(lang, 'Когда нужно, чтобы', 'When something just')}<br />
            <span style={{ color: 'var(--color-celestial-light)' }}>
              {T(lang, 'просто заработало.', 'needs to ship.')}
            </span>
          </h1>

          <p style={{
            marginTop: 28, fontSize: 17, lineHeight: 1.5,
            color: 'var(--color-arctic-mist)', maxWidth: 480,
          }}>
            {T(lang,
              'Сайты на современном стеке, telegram-боты, парсеры и короткие задачи. Прозрачный процесс, фиксированные сроки, передача исходников.',
              'Sites on a modern stack, Telegram bots, scrapers, and short tasks. Transparent process, fixed deadlines, full source handoff.'
            )}
          </p>

          <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#contact" className="btn-violet">
              {T(lang, 'Запросить смету', 'Request a quote')} <span>→</span>
            </a>
            <a href="#services" className="btn-outline">
              {T(lang, 'Что делаем', 'What we do')}
            </a>
          </div>

          <div className="divider" style={{ margin: '40px 0' }}></div>

          <div data-grid="meta-row" style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
            {META_ROWS(lang).map((row, i) => (
              <div key={i}>
                <div className="font-mono" style={{
                  fontSize: 10, color: 'var(--color-whisper-blue)', letterSpacing: '0.16em',
                }}>
                  {row.k.toUpperCase()}
                </div>
                <div style={{ marginTop: 4, fontSize: 13, color: 'var(--color-comet)' }}>
                  {row.v}
                </div>
              </div>
            ))}
          </div>
        </div>

        <HeroDashboardCard lang={lang} />
      </div>
    </section>
  );
};

window.Hero = Hero;