// Section 09 — Partnership with military units & bloggers (coupon program)
// Military-themed to match the cover: olive field, stencil mono labels, khaki detailing.
function SectionPartner() {
  const OLIVE = '#2E3327';
  const OLIVE_2 = '#373D2D';
  const OLIVE_3 = '#222619';
  const CREAM = '#ECE8DA';
  const MUTE = 'rgba(236,232,218,0.62)';
  const FAINT = 'rgba(236,232,218,0.42)';
  const LINE = 'rgba(236,232,218,0.20)';
  const KHAKI = '#9AA17C';
  const mono = "'JetBrains Mono', ui-monospace, monospace";

  const steps = [
    { n: '01', t: 'Підрозділ / блогер отримує власний унікальний код купона.' },
    { n: '02', t: 'Код поширюється і самим підрозділом серед своєї аудиторії, і через канали MindMe.' },
    { n: '03', t: 'Кожна покупка за кодом фіксується автоматично.' },
    { n: '04', t: '30% від суми кожного замовлення за купоном спрямовується підрозділу.', accent: true },
  ];

  const supports = [
    {
      eyebrow: 'Матеріали для поширення',
      body: 'Ми готуємо для вас усе необхідне, щоб розповісти про співпрацю своїй аудиторії: спеціальні пости, банери та готову інформацію про деталі програми. Вам не треба нічого вигадувати — берете готове й ділитесь.',
    },
    {
      eyebrow: 'Прозорість і контроль',
      body: 'Кожен підрозділ-блогер має власну сторінку, де в будь-який момент видно стан співпраці:',
      list: ['кількість покупок за кодом', 'загальний розмір замовлень', 'суму внеску, що накопичилась'],
      foot: 'Виплати спрямовуються підрозділу раз на тиждень або при накопиченні цільової суми. Усе фіксується автоматично — звіряти нарахування можна самостійно на своїй сторінці в будь-який час.',
    },
  ];

  const Tick = ({ corner }) => {
    const base = { position: 'absolute', width: 16, height: 16, pointerEvents: 'none', borderColor: KHAKI, borderStyle: 'solid', borderWidth: 0, zIndex: 3 };
    const pos = {
      tl: { top: 14, left: 14, borderTopWidth: 2, borderLeftWidth: 2 },
      tr: { top: 14, right: 14, borderTopWidth: 2, borderRightWidth: 2 },
      bl: { bottom: 14, left: 14, borderBottomWidth: 2, borderLeftWidth: 2 },
      br: { bottom: 14, right: 14, borderBottomWidth: 2, borderRightWidth: 2 },
    }[corner];
    return <span aria-hidden="true" style={{ ...base, ...pos }} />;
  };

  const eyebrow = (text, color = KHAKI) => (
    <div style={{ fontFamily: mono, fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, color }}>{text}</div>
  );

  // Accordion on mobile only; desktop renders every section expanded.
  const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' && window.matchMedia('(max-width: 760px)').matches);
  const [openSec, setOpenSec] = useState(0);
  useEffect(() => {
    const mq = window.matchMedia('(max-width: 760px)');
    const on = () => setIsMobile(mq.matches);
    mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, []);

  const AccSection = ({ idx, title, children }) => {
    if (!isMobile) return children;
    const open = openSec === idx;
    return (
      <div style={{ border: `1px solid ${LINE}`, marginBottom: 7, background: open ? 'transparent' : OLIVE_2 }}>
        <button onClick={() => setOpenSec(open ? -1 : idx)} aria-expanded={open} style={{
          appearance: 'none', cursor: 'pointer', width: '100%', textAlign: 'left',
          background: 'transparent', border: 'none', color: CREAM,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, padding: '13px 14px',
        }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, letterSpacing: '-0.01em' }}>{title}</span>
          <span aria-hidden="true" style={{ color: 'var(--accent)', fontSize: 14, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>▾</span>
        </button>
        {open && <div style={{ padding: '0 14px 14px' }}>{children}</div>}
      </div>
    );
  };

  return (
    <section className="section" data-screen-label="07 Partner" style={{ position: 'relative', background: OLIVE, color: CREAM, overflow: 'hidden' }}>

      {/* Hazard stripe + corner ticks */}
      <div aria-hidden="true" style={{ position: 'absolute', top: 0, right: 0, width: '38%', height: 6, zIndex: 2, background: `repeating-linear-gradient(135deg, var(--accent) 0 14px, transparent 14px 28px)`, opacity: 0.9 }} />
      <Tick corner="tl" /><Tick corner="tr" /><Tick corner="bl" /><Tick corner="br" />

      <div className="shell" style={{ position: 'relative', zIndex: 1 }}>

        {/* Military header */}
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, borderBottom: `1px solid ${LINE}`, paddingBottom: 12, marginBottom: 'clamp(18px, 2.4vw, 30px)' }}>
            <span style={{ fontFamily: mono, fontSize: 14, fontWeight: 800, color: 'var(--accent)' }}>08</span>
            <span style={{ width: 26, height: 1, background: KHAKI }} />
            <span style={{ fontFamily: mono, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700, color: CREAM }}>Партнерська програма · підрозділи та блогери</span>

          </div>
        </Reveal>

        {/* Headline */}
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.15fr)', gap: 'var(--gap-wide)', alignItems: 'end', marginBottom: 'clamp(18px, 2.4vw, 30px)' }}>
            <h2 className="display h-3" style={{ maxWidth: '18ch', lineHeight: 1.04, letterSpacing: '-0.02em', color: CREAM }}>
              Купон, який перетворює покупку на <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>внесок</span>.
            </h2>
            <p style={{ maxWidth: '52ch', fontSize: 15, lineHeight: 1.5, color: MUTE }}>
              Підрозділ або військовий блогер отримує власний унікальний код. Його аудиторія купує за цим кодом зі знижкою — а частина кожного замовлення автоматично йде на підтримку підрозділу.
            </p>
          </div>
        </Reveal>

        {/* How it works — 4 steps */}
        <AccSection idx={0} title="Як це працює">
        <Reveal delay={80}>
          <div style={{ marginBottom: 'clamp(14px, 1.8vw, 22px)' }}>
            {!isMobile && <div style={{ marginBottom: 12 }}>{eyebrow('▸ Як це працює')}</div>}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'clamp(10px, 1.2vw, 16px)' }}>
              {steps.map((s) => (
                <div key={s.n} style={{
                  background: s.accent ? 'var(--accent)' : OLIVE_2,
                  color: s.accent ? OLIVE : CREAM,
                  border: '1px solid ' + (s.accent ? 'var(--accent)' : LINE),
                  padding: 'clamp(14px, 1.6vw, 20px)',
                  display: 'flex', flexDirection: 'column', gap: 12, minHeight: 132,
                }}>
                  <span style={{ fontFamily: mono, fontSize: 'clamp(22px, 2.2vw, 30px)', fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 0.9, color: s.accent ? OLIVE : 'var(--accent)' }}>{s.n}</span>
                  <p style={{ fontSize: 13.5, lineHeight: 1.4, color: s.accent ? OLIVE : CREAM, fontWeight: s.accent ? 700 : 400, marginTop: 'auto' }}>{s.t}</p>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
        </AccSection>

        {/* Key numbers plaque + buyer perk */}
        <AccSection idx={1} title="Цифри програми">
        <Reveal delay={140}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.25fr)', gap: 'clamp(16px, 2vw, 28px)',
            border: '1px solid var(--accent)',
            background: 'color-mix(in srgb, var(--accent) 16%, ' + OLIVE + ')',
            padding: 'clamp(18px, 2.2vw, 28px)', marginBottom: 'clamp(14px, 1.8vw, 22px)', alignItems: 'center',
          }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(16px, 2vw, 28px)' }}>
              {[
                { big: '30%', label: 'підрозділу', d: 'з суми кожного замовлення за купоном — автоматично' },
                { big: '−10%', label: 'покупцю', d: 'знижка на замовлення за кодом' },
              ].map((row, k) => (
                <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <span style={{ fontFamily: mono, fontSize: 'clamp(32px, 3.8vw, 50px)', fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--accent)', lineHeight: 0.85 }}>{row.big}</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em', marginTop: 6, color: CREAM }}>{row.label}</span>
                  <span style={{ fontSize: 12.5, lineHeight: 1.35, color: MUTE }}>{row.d}</span>
                </div>
              ))}
            </div>
            <div style={{ borderLeft: `1px solid ${LINE}`, paddingLeft: 'clamp(16px, 2vw, 28px)' }}>
              <div style={{ marginBottom: 8 }}>{eyebrow('Що отримує покупець', 'var(--accent)')}</div>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: CREAM }}>
                Це люди, які хочуть підтримати справу простою щоденною покупкою — підписники, родина, друзі, прихильники. Знижка тут — жест подяки, а сам внесок робить підрозділ сильнішим.
              </p>
            </div>
          </div>
        </Reveal>
        </AccSection>

        {/* Support blocks: materials + transparency */}
        <AccSection idx={2} title="Підтримка партнера">
        <Reveal delay={200}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'clamp(12px, 1.5vw, 18px)', marginBottom: 'clamp(14px, 1.8vw, 22px)' }}>
            {supports.map((b, i) => (
              <div key={i} style={{ border: `1px solid ${LINE}`, background: OLIVE_2, padding: 'clamp(16px, 1.8vw, 22px)', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {eyebrow(b.eyebrow, 'var(--accent)')}
                <p style={{ fontSize: 13.5, lineHeight: 1.5, color: MUTE }}>{b.body}</p>
                {b.list && (
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 5 }}>
                    {b.list.map((li, k) => (
                      <li key={k} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 9, alignItems: 'baseline', fontSize: 13.5, lineHeight: 1.4, color: CREAM }}>
                        <span style={{ color: 'var(--accent)', fontWeight: 700 }}>—</span>
                        <span>{li}</span>
                      </li>
                    ))}
                  </ul>
                )}
                {b.foot && <p style={{ fontSize: 12.5, lineHeight: 1.45, color: CREAM, marginTop: 'auto', background: OLIVE_3, borderLeft: '3px solid var(--accent)', padding: '10px 12px' }}>{b.foot}</p>}
              </div>
            ))}
          </div>
        </Reveal>
        </AccSection>

        {/* Military / veteran personal discount — set apart, darkest panel */}
        <AccSection idx={3} title="Військовим і ветеранам">
        <Reveal delay={260}>
          <div style={{
            background: OLIVE_3, color: CREAM,
            border: `1px solid ${LINE}`, borderLeft: '4px solid var(--accent)',
            padding: 'clamp(18px, 2.2vw, 28px)',
            display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)', gap: 'clamp(18px, 2.4vw, 34px)', alignItems: 'center',
            marginBottom: 'clamp(18px, 2.4vw, 30px)',
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{ fontFamily: mono, fontSize: 'clamp(36px, 4.2vw, 56px)', fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--accent)', lineHeight: 0.85 }}>−30%</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
                {eyebrow('Окремо', 'var(--accent)')}
                <h3 className="display" style={{ fontSize: 'clamp(18px, 1.9vw, 24px)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05, color: CREAM }}>Знижка для військових і ветеранів</h3>
              </div>
              <p style={{ fontSize: 13.5, lineHeight: 1.5, color: MUTE, maxWidth: '70ch' }}>
                Особиста знижка на замовлення для військовослужбовців та учасників бойових дій — за наявності документа, що підтверджує статус. Знижка не діє автоматично: щоб отримати її, напишіть нам у дірект.
              </p>
              <p style={{ fontSize: 12, lineHeight: 1.45, color: FAINT, maxWidth: '70ch' }}>
                Це окрема умова, не частина партнерської програми. Тут немає відрахувань підрозділу — це особиста підтримка тих, хто захищає.
              </p>
            </div>
          </div>
        </Reveal>
        </AccSection>

        {/* CTA */}
        <AccSection idx={4} title="Долучитись">
        <Reveal delay={320}>
          <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 'clamp(14px, 2vw, 28px)', borderTop: `1px solid ${LINE}`, paddingTop: 'clamp(16px, 2vw, 24px)' }}>
            <div style={{ maxWidth: '46ch' }}>
              <h3 className="display" style={{ fontSize: 'clamp(20px, 2.2vw, 30px)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05, marginBottom: 6, color: CREAM }}>
                Хочете долучитись?
              </h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.5, color: MUTE }}>
                Напишіть нам — обговоримо деталі й видамо унікальний код для вашого підрозділу.
              </p>
            </div>
            <a href="https://www.instagram.com/mindme.ua/" target="_blank" rel="noopener noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'var(--accent)', color: OLIVE, textDecoration: 'none',
              fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em',
              padding: '14px 26px', whiteSpace: 'nowrap',
            }}>
              Зв’язатися з MindMe
              <span aria-hidden="true" style={{ fontSize: 17 }}>→</span>
            </a>
          </div>
        </Reveal>
        </AccSection>

      </div>
    </section>
  );
}

window.SectionPartner = SectionPartner;