// Section 03 — Product system

// Bold figurative line icons — primitive shapes combined into symbols
const RoleIcon = ({ name, size = 44 }) => {
  const p = { width: size, height: size, viewBox: '0 0 32 32', fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'focus':
      // одне око з зіницею — концентрація погляду
      return (
        <svg {...p}>
          <path d="M2 16 Q 16 4, 30 16 Q 16 28, 2 16 Z" />
          <circle cx="16" cy="16" r="4.2" />
          <circle cx="16" cy="16" r="1.8" fill="currentColor" stroke="none" />
        </svg>
      );
    case 'energy':
      // трикутник вгору з сонцем-ядром на вершині — підйом, енергія
      return (
        <svg {...p}>
          <path d="M4 27 L 16 10 L 28 27 Z" />
          <circle cx="16" cy="6" r="2.6" />
          <path d="M16 0.8v1.6 M11 2l0.9 1.6 M21 2l-0.9 1.6 M7.5 4.8l1.4 1 M24.5 4.8l-1.4 1" />
        </svg>
      );
    case 'balance':
      // ваги: горизонтальна балка з різними формами + пивот-трикутник внизу
      return (
        <svg {...p}>
          <path d="M2 12 H 30" />
          <circle cx="8" cy="9" r="2.6" />
          <path d="M22 12 L 26 6 L 18 6 Z" />
          <path d="M16 12 V 22" />
          <path d="M12 27 L 20 27 L 16 21 Z" />
        </svg>
      );
    case 'daily':
      // арка з сонцем всередині — щоденний цикл, прохід дня
      return (
        <svg {...p}>
          <path d="M4 28 V 16 Q 4 7, 16 7 Q 28 7, 28 16 V 28" />
          <circle cx="16" cy="18" r="3.6" />
          <path d="M2 28 H 30" />
        </svg>
      );
    case 'beauty':
      // пелюстка-крапля з оком всередині — внутрішня краса
      return (
        <svg {...p}>
          <path d="M16 2 C 7 11, 6 22, 16 30 C 26 22, 25 11, 16 2 Z" />
          <path d="M10 19 Q 16 14, 22 19 Q 16 24, 10 19 Z" />
          <circle cx="16" cy="19" r="1.6" fill="currentColor" stroke="none" />
        </svg>
      );
    case 'evening':
      // гора-трикутник з місяцем над нею — вечір
      return (
        <svg {...p}>
          <path d="M2 27 L 16 11 L 30 27 Z" />
          <path d="M24 9 A 4.2 4.2 0 1 1 20 4.8 A 3.2 3.2 0 0 0 24 9 Z" />
        </svg>
      );
    case 'travel':
      // стрілка, що пронизує коло — рух, шлях
      return (
        <svg {...p}>
          <circle cx="11" cy="16" r="5.4" />
          <path d="M3 16 H 29" />
          <path d="M23 10 L 29 16 L 23 22" />
        </svg>
      );
    default:
      return null;
  }
};

function SectionSystem() {
  const roles = [
    { id: 'focus', label: 'Фокус і продуктивність' },
    { id: 'energy', label: 'Енергія та активність' },
    { id: 'balance', label: 'Баланс і спокій' },
    { id: 'daily', label: 'Щоденна підтримка' },
    { id: 'beauty', label: 'Краса зсередини' },
    { id: 'evening', label: 'Вечірній ритуал' },
    { id: 'travel', label: 'Формат у дорозі' },
  ];

  return (
    <section className="section section--alt" data-screen-label="03 System">
      <SectionMeta num="04" label="Продуктова система" />
      <div className="shell">

        <Reveal>
          <h2 className="display h-1" style={{ fontSize: 'clamp(34px, 4.2vw, 60px)', lineHeight: 1.04, letterSpacing: '-0.03em', marginBottom: 'clamp(28px, 3.2vw, 48px)', maxWidth: '18ch' }}>
            Система щоденних<br/>
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>функціональних</span> форматів.
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 'var(--gap-wide)', alignItems: 'start', marginBottom: 'clamp(36px, 4.5vw, 64px)' }}>
          <Reveal>
            <p className="lead" style={{ maxWidth: '46ch' }}>
              Лінійка побудована навколо звичних точок споживання протягом дня: кава, какао, матча, смузі.
            </p>
          </Reveal>
          <Reveal delay={150}>
            <p className="body-lg" style={{ color: 'var(--ink-soft)', maxWidth: '50ch' }}>
              Кожен продукт має свою роль у системі — від ранкової енергії до вечірнього ритуалу. Розвивається далі: у розробці снекова група та нові функціональні формати.
            </p>
          </Reveal>
        </div>

        {/* Roles grid */}
        <Reveal>
          <div className="sys-cards" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 'var(--gap-tight)', borderTop: '1px solid var(--ink)' }}>
            {roles.map((r, i) => (
              <div key={r.id} style={{
                padding: '24px 22px',
                borderRight: '1px solid var(--line)',
                borderBottom: '1px solid var(--line)',
                display: 'flex',
                flexDirection: 'column',
                gap: 14,
                minHeight: 148,
                position: 'relative',
                background: 'var(--bg-alt)',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <span className="eyebrow" style={{ fontSize: 11 }}>{String(i + 1).padStart(2, '0')}</span>
                  <div style={{ color: 'var(--accent)' }}>
                    <RoleIcon name={r.id} size={44} />
                  </div>
                </div>
                <div style={{ marginTop: 'auto', fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.01em' }}>
                  {r.label}
                </div>
              </div>
            ))}
            {/* Empty cell with arrow into expansion */}
            <div style={{
              padding: '24px 22px',
              borderRight: '1px solid var(--line)',
              borderBottom: '1px solid var(--line)',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              minHeight: 148,
              background: 'var(--ink)',
              color: 'var(--bg)',
            }}>
              <div className="eyebrow" style={{ color: 'inherit', opacity: 0.6 }}>+ Розширення</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, lineHeight: 1.05 }}>
                Снеки та нові<br/>функціональні формати
              </div>
            </div>
          </div>
          <div className="why-nav" aria-hidden="true">
            <button type="button" className="why-arrow" aria-label="Попередній" onClick={(e)=>{const s=e.currentTarget.closest('.why-nav').previousElementSibling; s.scrollBy({left:-s.clientWidth*0.75, behavior:'smooth'});}}>←</button>
            <button type="button" className="why-arrow" aria-label="Наступний" onClick={(e)=>{const s=e.currentTarget.closest('.why-nav').previousElementSibling; s.scrollBy({left:s.clientWidth*0.75, behavior:'smooth'});}}>→</button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.SectionSystem = SectionSystem;