/* ─────────────────────────────────────────────────────────────────
   CorpSol — home page sections (part 1)
   Hero · Clients · Pain · Services · Vs
   ───────────────────────────────────────────────────────────────── */

// ── HERO ───────────────────────────────────────────────────────────────────
function Hero({ variant = 'split', onOpenModal }) {
  const t = useT();

  // Common header content
  const Eyebrow = () => <div className="cs-eyebrow cs-reveal">{t('hero.eyebrow')}</div>;
  const Heading = () => (
    <h1 className="cs-h1 cs-hero-h1 cs-reveal">
      {t('hero.h1.a')} <span className="cs-hero-accent">{t('hero.h1.b')}</span> {t('hero.h1.c')}
    </h1>
  );
  const Sub = () => <p className="cs-lead cs-reveal">{t('hero.sub')}</p>;
  const CTAs = () => (
    <div className="cs-hero-ctas cs-reveal">
      <button className="cs-btn cs-btn--primary cs-btn--lg" onClick={onOpenModal}>
        {t('hero.cta1')}
        <svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 8h12M9 3l5 5-5 5" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </button>
      <button className="cs-btn cs-btn--ghost cs-btn--lg" onClick={onOpenModal}>
        {t('hero.cta2')}
      </button>
    </div>
  );
  const Proof = () => (
    <div className="cs-hero-proof cs-reveal">
      {t('hero.proof').split('·').map((s, i, a) => (
        <React.Fragment key={i}>
          <span>{s.trim()}</span>
          {i < a.length - 1 && <span className="cs-hero-proof-dot">·</span>}
        </React.Fragment>
      ))}
    </div>
  );

  if (variant === 'stack') {
    return (
      <section className="cs-hero cs-hero--stack cs-dots">
        <div className="cs-container cs-container--wide">
          <Eyebrow />
          <Heading />
          <div className="cs-hero-stack-grid">
            <div>
              <Sub />
              <CTAs />
              <Proof />
            </div>
            <div className="cs-hero-stack-dash"><QuantaDash /></div>
          </div>
        </div>
      </section>
    );
  }
  if (variant === 'editorial') {
    return (
      <section className="cs-hero cs-hero--editorial">
        <div className="cs-container cs-container--wide">
          <Eyebrow />
          <h1 className="cs-hero-mega cs-reveal">
            {t('hero.h1.a')}{' '}
            <span className="cs-hero-accent">{t('hero.h1.b')}</span>{' '}
            {t('hero.h1.c')}
          </h1>
          <div className="cs-hero-editorial-row">
            <Sub />
            <div className="cs-hero-ed-actions">
              <CTAs />
              <Proof />
            </div>
          </div>
          <div className="cs-hero-ed-dash cs-reveal"><QuantaDash /></div>
        </div>
      </section>
    );
  }
  // default: split
  return (
    <section className="cs-hero cs-hero--split">
      <div className="cs-container cs-container--wide">
        <div className="cs-hero-grid">
          <div className="cs-hero-text">
            <Eyebrow />
            <Heading />
            <Sub />
            <CTAs />
            <Proof />
          </div>
          <div className="cs-hero-dash cs-reveal">
            <QuantaDash />
          </div>
        </div>
      </div>

      <style>{HERO_STYLES}</style>
    </section>
  );
}

const HERO_STYLES = `
  .cs-hero { padding-top: 60px; padding-bottom: 100px; overflow: hidden; }
  .cs-hero-h1 { margin-top: 24px; max-width: 16ch; }
  .cs-hero-mega {
    font-family: var(--font-display);
    font-size: clamp(56px, 11vw, 168px);
    line-height: 0.92;
    font-weight: 600;
    letter-spacing: -0.04em;
    margin-top: 32px;
    text-wrap: balance;
  }
  .cs-hero-accent { color: var(--c-accent); }
  .cs-lead { margin-top: 24px; }
  .cs-hero-ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
  .cs-hero-proof {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    margin-top: 32px;
    font-size: 13.5px; color: var(--c-faint);
    letter-spacing: -0.005em;
  }
  .cs-hero-proof-dot { color: var(--c-accent); }

  /* SPLIT */
  .cs-hero-grid {
    display: grid; gap: 64px;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
  }
  .cs-hero-dash { position: relative; }
  @media (max-width: 1100px) {
    .cs-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  @media (max-width: 600px) {
    .cs-hero { padding-top: 32px; padding-bottom: 56px; }
    .cs-hero-ctas { gap: 10px; }
    .cs-hero-ctas .cs-btn--lg { height: 48px; padding: 0 20px; font-size: 15px; }
  }

  /* STACK */
  .cs-hero--stack { padding-top: 80px; padding-bottom: 80px; background: var(--c-bg-soft); }
  .cs-hero-stack-grid {
    margin-top: 40px;
    display: grid; gap: 48px;
    grid-template-columns: 1fr 1.4fr;
    align-items: end;
  }
  .cs-hero-stack-dash { transform: translateY(-12px); }
  @media (max-width: 1000px) {
    .cs-hero-stack-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .cs-hero--stack { padding-top: 40px; padding-bottom: 48px; }
  }

  /* EDITORIAL */
  .cs-hero--editorial { padding-top: 100px; padding-bottom: 80px; }
  .cs-hero-editorial-row {
    display: grid; gap: 56px;
    grid-template-columns: 1fr 1fr;
    margin-top: 48px; align-items: end;
  }
  .cs-hero-ed-actions { display: flex; flex-direction: column; gap: 0; align-items: flex-end; }
  .cs-hero-ed-dash { margin-top: 64px; max-width: 1100px; margin-left: auto; margin-right: auto; }
  @media (max-width: 900px) {
    .cs-hero-editorial-row { grid-template-columns: 1fr; }
    .cs-hero-ed-actions { align-items: flex-start; }
  }
  @media (max-width: 600px) {
    .cs-hero--editorial { padding-top: 40px; padding-bottom: 48px; }
  }
`;

// ── CLIENTS — marquee ──────────────────────────────────────────────────────
const CLIENT_LIST = [
  { name: 'Yandex GO',       img: '/logos/yandex_go.png' },
  { name: 'Yandex Direct',   img: '/logos/yandex_direct.webp' },
  { name: 'Yandex Еда',      img: '/logos/Yandex_Eats_icon.svg.png' },
  { name: 'Yandex 360',      img: '/logos/yandex_360.webp' },
  { name: 'Yandex Maps',     img: '/logos/yandex_maps.webp' },
  { name: 'FitnessBlitz',    img: '/logos/fitnessblitz.webp' },
  { name: 'Home Credit',     img: '/logos/home_credit_bank.webp' },
  { name: 'Astana Hub',      img: '/logos/astana_hub.webp' },
  { name: 'UvU',             img: '/logos/uvu.webp' },
  { name: 'BTS Digital',     img: '/logos/bts_digital.webp' },
  { name: 'Freedom',         img: '/logos/freedom.webp' },
  { name: 'Zerde',           img: null },
  { name: 'Delivex',         img: null },
];

function ClientsStrip() {
  const t = useT();

  const renderItem = (c, key) => (
    <div key={key} className="cs-client-logo">
      {c.img && <img src={c.img} alt={c.name} className="cs-client-logo-img" />}
      <span>{c.name}</span>
    </div>
  );

  return (
    <section className="cs-clients">
      <div className="cs-container cs-container--wide">
        <div className="cs-clients-head cs-reveal">
          <h2 className="cs-h2">{t('clients.h2')}</h2>
        </div>
      </div>
      <div className="cs-marquee" style={{ marginTop: 48 }}>
        <div className="cs-marquee-track">
          {CLIENT_LIST.map((c, i) => renderItem(c, i))}
          {CLIENT_LIST.map((c, i) => renderItem(c, i + 100))}
        </div>
      </div>
      <div className="cs-container cs-container--wide" style={{ marginTop: 40 }}>
        <p className="cs-mute cs-reveal" style={{ maxWidth: '74ch', fontSize: 14.5 }}>{t('clients.sub')}</p>
      </div>
      <style>{`
        .cs-clients { padding: 64px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
        .cs-clients-head .cs-h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; max-width: 32ch; line-height: 1.15; }
        .cs-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
        .cs-marquee-track {
          display: flex; gap: 12px;
          width: max-content;
          animation: cs-marquee-scroll 38s linear infinite;
          will-change: transform;
        }
        .cs-marquee:hover .cs-marquee-track { animation-play-state: paused; }
        @keyframes cs-marquee-scroll {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .cs-client-logo {
          flex-shrink: 0;
          display: inline-flex; align-items: center; gap: 10px;
          padding: 0 28px;
          font-family: var(--font-display);
          font-weight: 600; font-size: 17px;
          color: var(--c-faint);
          letter-spacing: -0.01em;
          white-space: nowrap;
        }
        .cs-client-logo-img {
          height: 32px; width: auto;
          object-fit: contain;
          filter: grayscale(1) opacity(0.45);
          flex-shrink: 0;
        }
        @media (max-width: 600px) {
          .cs-client-logo { padding: 0 16px; font-size: 15px; }
          .cs-client-logo-img { height: 26px; }
        }
      `}</style>
    </section>
  );
}

// ── PAIN — 3×2 cards ───────────────────────────────────────────────────────
function PainSection({ onOpenModal }) {
  const t = useT();
  const items = [1, 2, 3, 4, 5, 6].map((i) => ({
    t: t(`pain.${i}.t`),
    d: t(`pain.${i}.d`),
  }));
  return (
    <section className="cs-section">
      <div className="cs-container cs-container--wide">
        <div className="cs-sec-head cs-reveal">
          <span className="cs-eyebrow">{t('pain.eyebrow')}</span>
          <h2 className="cs-h2">{t('pain.h2')}</h2>
        </div>
        <div className="cs-grid cs-grid--3">
          {items.map((it, i) => (
            <div key={i} className="cs-card cs-card--inset cs-pain-card cs-reveal">
              <div className="cs-pain-num">0{i + 1}</div>
              <h3 className="cs-pain-h">{it.t}</h3>
              <p className="cs-mute">{it.d}</p>
            </div>
          ))}
        </div>
        <div className="cs-pain-cta cs-reveal">
          <p>{t('pain.cta')}</p>
          <button className="cs-btn cs-btn--primary" onClick={onOpenModal}>{t('nav.cp')}</button>
        </div>
      </div>
      <style>{`
        .cs-pain-card { display: flex; flex-direction: column; gap: 14px; padding: 36px 28px; }
        [data-density="compact"] .cs-pain-card { padding: 24px 22px; }
        .cs-pain-num { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--c-accent); letter-spacing: 0.04em; }
        .cs-pain-h { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
        .cs-pain-cta {
          margin-top: 48px;
          display: flex; align-items: center; justify-content: space-between; gap: 24px;
          flex-wrap: wrap;
          padding: 28px 32px;
          background: var(--c-ink); color: var(--c-bg);
          border-radius: var(--r-lg);
        }
        [data-radius="sharp"] .cs-pain-cta { border-radius: 6px; }
        [data-radius="pill"] .cs-pain-cta { border-radius: var(--r-xl); }
        .cs-pain-cta p { font-family: var(--font-display); font-size: 22px; font-weight: 600; max-width: 36ch; letter-spacing: -0.02em; }
        .cs-pain-cta .cs-btn { background: var(--c-bg); color: var(--c-ink); }
        .cs-pain-cta .cs-btn:hover { background: var(--c-accent); color: var(--c-on-accent); }
      `}</style>
    </section>
  );
}

// ── SERVICES — 6 cards ─────────────────────────────────────────────────────
const SvcIcon = ({ i }) => {
  const icons = {
    1: <g><circle cx="14" cy="14" r="6" /><circle cx="32" cy="20" r="4" /><circle cx="22" cy="36" r="5" /><path d="M14 14 L32 20 M14 14 L22 36" strokeWidth="1.5" /></g>,
    2: <g><path d="M10 18 L10 36 Q10 38 12 38 L36 38 Q38 38 38 36 L38 18 M10 18 L24 28 L38 18 M10 18 Q10 14 14 14 L34 14 Q38 14 38 18" strokeWidth="1.5" /></g>,
    3: <g><path d="M8 38 L8 22 L16 22 L16 38 M18 38 L18 14 L26 14 L26 38 M28 38 L28 26 L36 26 L36 38" strokeWidth="1.8" /><path d="M6 40 L40 40" strokeWidth="1.8" /><path d="M10 14 L36 8" strokeWidth="1.6" strokeDasharray="2 3" /></g>,
    4: <g><rect x="14" y="10" width="20" height="30" rx="4" strokeWidth="1.5" /><path d="M20 18 L28 18 M20 22 L28 22 M20 28 L28 28 M20 32 L26 32" strokeWidth="1.5" /><circle cx="14" cy="22" r="2.5" fill="currentColor" stroke="none" /></g>,
    5: <g><rect x="6" y="10" width="36" height="22" rx="3" strokeWidth="1.5" /><path d="M6 28 L42 28" strokeWidth="1.5" /><path d="M18 38 L30 38 M20 32 L20 38 M28 32 L28 38" strokeWidth="1.5" strokeLinecap="round" /><circle cx="24" cy="20" r="4" strokeWidth="1.5" /></g>,
    6: <g><circle cx="20" cy="20" r="10" strokeWidth="1.5" /><path d="M27 27 L36 36" strokeWidth="1.8" strokeLinecap="round" /><path d="M18 16 L22 24 M16 22 L24 18" strokeWidth="1.5" strokeLinecap="round" /></g>,
  };
  return (
    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
      {icons[i]}
    </svg>
  );
};

function ServicesSection({ onOpenModal }) {
  const t = useT();
  return (
    <section className="cs-section" id="services">
      <div className="cs-container cs-container--wide">
        <div className="cs-sec-head cs-reveal">
          <span className="cs-eyebrow">{t('svc.eyebrow')}</span>
          <h2 className="cs-h2">{t('svc.h2')}</h2>
        </div>
        <div className="cs-grid cs-grid--3">
          {[1, 2, 3].map((i) => (
            <article key={i} className="cs-card cs-card--hover cs-svc-card cs-reveal">
              <div className="cs-svc-icon" aria-hidden="true"><SvcIcon i={i} /></div>
              <h3 className="cs-svc-t">{t(`svc.${i}.t`)}</h3>
              <p className="cs-mute" style={{ fontSize: 14.5 }}>{t(`svc.${i}.d`)}</p>
              <button className="cs-svc-more" onClick={onOpenModal}>
                {t('svc.more')}
                <svg width="14" height="14" viewBox="0 0 16 16"><path d="M3 8h10M8 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </button>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .cs-svc-card { display: flex; flex-direction: column; gap: 16px; padding: 32px 28px; min-height: 320px; }
        [data-density="compact"] .cs-svc-card { min-height: 260px; padding: 24px 22px; }
        .cs-svc-icon { color: var(--c-accent); }
        .cs-svc-t { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; }
        .cs-svc-more {
          margin-top: auto;
          display: inline-flex; align-items: center; gap: 6px;
          padding: 0; border: 0; background: transparent; cursor: pointer;
          font: inherit; color: var(--c-accent); font-weight: 600; font-size: 14px;
          align-self: flex-start;
        }
        .cs-svc-more:hover { gap: 10px; }
      `}</style>
    </section>
  );
}

// ── VS — table comparison ──────────────────────────────────────────────────
function VsSection() {
  const t = useT();
  const rows = [1, 2, 3, 4, 5, 6].map((i) => [t(`vs.row${i}.a`), t(`vs.row${i}.b`)]);
  return (
    <section className="cs-section" style={{ background: 'var(--c-bg-soft)' }}>
      <div className="cs-container cs-container--wide">
        <div className="cs-sec-head cs-reveal">
          <span className="cs-eyebrow">{t('vs.eyebrow')}</span>
          <h2 className="cs-h2">{t('vs.h2')}</h2>
        </div>
        <div className="cs-vs">
          <div className="cs-vs-head">
            <div className="cs-vs-cell cs-vs-cell--head cs-vs-cell--a">{t('vs.col1')}</div>
            <div className="cs-vs-cell cs-vs-cell--head cs-vs-cell--b">
              <Logo size={52} />
            </div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="cs-vs-row cs-reveal">
              <div className="cs-vs-cell cs-vs-cell--a">
                <span className="cs-vs-x" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 16 16"><path d="M4 4L12 12M12 4L4 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
                </span>
                <span>{r[0]}</span>
              </div>
              <div className="cs-vs-cell cs-vs-cell--b">
                <span className="cs-vs-check" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 16 16"><path d="M3 8L7 12L13 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
                </span>
                <span>{r[1]}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .cs-vs {
          margin-top: 16px;
          background: var(--c-bg);
          border-radius: var(--r-lg);
          box-shadow: var(--shadow-sm);
        }
        [data-radius="sharp"] .cs-vs { border-radius: 6px; }
        .cs-vs-head, .cs-vs-row {
          display: grid; grid-template-columns: 1fr 1fr;
        }
        .cs-vs-row + .cs-vs-row, .cs-vs-row:first-child { border-top: 1px solid var(--c-line); }
        .cs-vs-cell {
          padding: 22px 28px;
          display: flex; align-items: flex-start; gap: 12px;
          font-size: 15px; line-height: 1.45;
        }
        .cs-vs-cell--a { color: var(--c-faint); }
        .cs-vs-cell--b { color: var(--c-bg); background: var(--c-ink); }
        .cs-vs-row + .cs-vs-row .cs-vs-cell--b { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
        .cs-vs-cell--head {
          padding: 20px 28px;
          font-family: var(--font-display);
          font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
        }
        .cs-vs-cell--head.cs-vs-cell--a { color: var(--c-faint); background: var(--c-bg-soft); }
        .cs-vs-cell--head.cs-vs-cell--b { background: var(--c-ink); color: var(--c-bg); }
        .cs-vs-x, .cs-vs-check {
          display: inline-flex; align-items: center; justify-content: center;
          width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
        }
        .cs-vs-x { background: var(--c-bg-muted); color: var(--c-faint); }
        .cs-vs-check { background: var(--c-accent); color: #fff; }
        /* Explicit corner radii on corner cells — don't rely on overflow:hidden (iOS Safari bug) */
        .cs-vs-head .cs-vs-cell--a { border-top-left-radius: var(--r-lg); }
        .cs-vs-head .cs-vs-cell--b { border-top-right-radius: var(--r-lg); }
        .cs-vs-row:last-child .cs-vs-cell--a { border-bottom-left-radius: var(--r-lg); }
        .cs-vs-row:last-child .cs-vs-cell--b { border-bottom-right-radius: var(--r-lg); }
        [data-radius="sharp"] .cs-vs-head .cs-vs-cell--a,
        [data-radius="sharp"] .cs-vs-head .cs-vs-cell--b,
        [data-radius="sharp"] .cs-vs-row:last-child .cs-vs-cell--a,
        [data-radius="sharp"] .cs-vs-row:last-child .cs-vs-cell--b { border-radius: 0; }
        @media (max-width: 700px) {
          .cs-vs-cell { padding: 16px 18px; font-size: 14px; }
          .cs-vs-cell--head { padding: 14px 18px; font-size: 11.5px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, ClientsStrip, PainSection, ServicesSection, VsSection });