// Section 00 — Cover (niche version: fundraising for a military unit via MindMe)
// Military-themed cover: deep olive field, stencil mono detailing, tactical markers.
function SectionCover() {
  const OLIVE = '#2E3327';
  const OLIVE_2 = '#373D2D';
  const CREAM = '#ECE8DA';
  const MUTE = 'rgba(236,232,218,0.62)';
  const LINE = 'rgba(236,232,218,0.20)';
  const KHAKI = '#9AA17C';
  const mono = "'JetBrains Mono', ui-monospace, monospace";

  const [introOpen, setIntroOpen] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setIntroOpen(true), 1400);
    return () => clearTimeout(t);
  }, []);
  const closeIntro = () => setIntroOpen(false);

  // Small L-shaped corner tick
  const Tick = ({ corner }) => {
    const base = { position: 'absolute', width: 16, height: 16, pointerEvents: 'none', borderColor: KHAKI, borderStyle: 'solid', borderWidth: 0 };
    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 }} />;
  };

  return (
    <section
      className="section"
      data-screen-label="00 Cover"
      style={{
        padding: 0,
        position: 'relative',
        minHeight: '100vh',
        height: '100vh',
        overflow: 'hidden',
        background: OLIVE,
        color: CREAM,
      }}>

      {/* Tactical map overlay */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        backgroundImage:
          `radial-gradient(120% 90% at 70% 30%, rgba(154,161,124,0.10), transparent 70%)`,
        opacity: 1,
      }} />
      {/* Diagonal stencil hazard stripe, top-right accent */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: 0, right: 0, width: '38%', height: 6, zIndex: 1, pointerEvents: 'none',
        background: `repeating-linear-gradient(135deg, var(--accent) 0 14px, transparent 14px 28px)`,
        opacity: 0.9,
      }} />

      {/* Corner ticks */}
      <Tick corner="tl" /><Tick corner="tr" /><Tick corner="bl" /><Tick corner="br" />

      <div className="shell" style={{
        position: 'relative',
        zIndex: 2,
        height: '100%',
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.25fr) minmax(0, 0.75fr)',
        gridTemplateRows: 'auto auto 1fr auto',
        gridTemplateAreas: '"masthead masthead" "strip strip" "headline image" "footer footer"',
        gap: 'clamp(14px, 1.8vw, 24px) clamp(28px, 4vw, 64px)',
        paddingTop: 'clamp(48px, 5vw, 80px)',
        paddingBottom: 'clamp(20px, 2.5vw, 32px)',
      }}>



        {/* Masthead */}
        <Reveal style={{ gridArea: 'masthead' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center',
            gap: 'clamp(16px, 2vw, 32px)', borderBottom: `1px solid ${LINE}`, paddingBottom: 14,
          }}>
            <img src="uploads/mindme-logo.png" alt="MindMe superfood" style={{
              height: 'clamp(32px, 3.4vw, 48px)', width: 'auto', display: 'block', filter: 'brightness(0) invert(1)',
            }} />
            <span style={{
              justifySelf: 'center',
              fontFamily: mono, fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: OLIVE, background: 'var(--accent)', padding: '6px 14px', fontWeight: 700, whiteSpace: 'nowrap',
            }}>
              ◆ Перетворюємо покупки → допомогу
            </span>
            <span style={{ fontFamily: mono, letterSpacing: '0.12em', textTransform: 'uppercase', color: MUTE }}>
              <span className="masthead-city" style={{ fontSize: 10.5 }}>Київ · UA</span>
            </span>
          </div>
        </Reveal>

        {/* Tactical data strip */}
        <Reveal delay={150} className="cover-strip" style={{ gridArea: 'strip' }}>
          <div style={{
            display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '5px clamp(12px, 2.4vw, 34px)',
            fontFamily: mono, fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: KHAKI,
          }}>
            <span>СТАТУС: <span style={{ color: CREAM }}>активний</span></span>
            <span style={{ opacity: 0.4 }}>///</span>
            <span>КАНАЛ: <span style={{ color: CREAM }}>унікальний код</span></span>
            <span style={{ opacity: 0.4 }}>///</span>
            <span>ВНЕСОК: <span style={{ color: 'var(--accent)' }}>30% / замовлення</span></span>
          </div>
        </Reveal>

        {/* Headline */}
        <div style={{ gridArea: 'headline', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <Reveal delay={250}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 'clamp(16px, 2.2vw, 28px)',
              fontFamily: mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700, color: MUTE,
            }}>
              <span style={{ color: 'var(--accent)', fontWeight: 800 }}>01</span>
              <span style={{ width: 24, height: 1, background: KHAKI, display: 'inline-block' }} />
              Як це працює
            </span>
          </Reveal>

          <Reveal delay={350}>
            <h1 className="display" style={{
              fontSize: 'clamp(38px, 5.6vw, 96px)', fontWeight: 700, letterSpacing: '-0.045em',
              lineHeight: 0.92, marginBottom: 'clamp(18px, 2.2vw, 30px)', textWrap: 'balance', color: CREAM,
            }}>
              <span style={{ display: 'block' }}>перетворюємо</span>
              <span style={{ display: 'block' }}>покупки на</span>
              <span style={{ display: 'block', fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.04em', color: 'var(--accent)' }}>допомогу</span>
            </h1>
          </Reveal>

          <Reveal delay={500}>
            <p style={{
              fontSize: 'clamp(15px, 1.2vw, 19px)', lineHeight: 1.5,
              color: MUTE, maxWidth: '40ch', textWrap: 'pretty', fontWeight: 500,
            }}>
              Партнерська програма MindMe з військовими підрозділами та блогерами. Як це працює — на наступних сторінках.
            </p>
          </Reveal>
        </div>

        {/* Image column — framed like a recon plate */}
        <Reveal delay={420} style={{ gridArea: 'image', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <figure style={{
            position: 'relative', width: '100%', height: '100%',
            maxHeight: 'min(620px, 70vh)', overflow: 'hidden',
            background: OLIVE_2, border: `1px solid ${LINE}`, outline: `1px dashed ${KHAKI}`, outlineOffset: -7,
            boxShadow: '0 30px 60px -20px rgba(0,0,0,0.5)',
          }}>
            <img src="uploads/pasted-1782211081508-0.png" alt="Українські військові" data-zoomable="true" style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top',
            }} />
            {/* Recon corner brackets */}
            <span aria-hidden="true" style={{ position: 'absolute', top: 14, right: 14, width: 14, height: 14, borderTop: '2px solid rgba(236,232,218,0.75)', borderRight: '2px solid rgba(236,232,218,0.75)' }} />
            <span aria-hidden="true" style={{ position: 'absolute', bottom: 34, left: 14, width: 14, height: 14, borderBottom: '2px solid rgba(236,232,218,0.75)', borderLeft: '2px solid rgba(236,232,218,0.75)' }} />
            <div style={{
              position: 'absolute', top: 12, left: 12, padding: '5px 9px',
              background: 'var(--accent)', color: OLIVE, fontFamily: mono, fontSize: 9.5,
              fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
            }}>
              30% — підрозділу
            </div>
            <figcaption style={{
              position: 'absolute', left: 12, right: 12, bottom: 11,
              fontFamily: mono, fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase',
              color: CREAM, fontWeight: 700, textShadow: '0 1px 3px rgba(0,0,0,0.7)',
              display: 'flex', justifyContent: 'space-between',
            }}>
              <span>Щоденна покупка</span>
              <span>= підтримка</span>
            </figcaption>
          </figure>
        </Reveal>

        {/* Footer */}
        <Reveal delay={650} style={{ gridArea: 'footer' }} className="cover-footer">
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
            paddingTop: 14, borderTop: `1px solid ${LINE}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
              <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: KHAKI, flexShrink: 0 }}>Далі ▸</span>
              <span style={{ fontFamily: mono, fontSize: 11, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', color: CREAM }}>
                Бренд · продукти · як працює партнерство
              </span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: mono, fontWeight: 700, flexShrink: 0 }}>
              <span style={{ display: 'inline-block', width: 22, height: 1.5, background: KHAKI, animation: 'heroScrollLine 1.4s ease-in-out infinite' }} />
              <span style={{ letterSpacing: '0.1em', color: CREAM, fontSize: 12 }}>01 / 09</span>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        @keyframes introPop { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
        @keyframes introFade { from { opacity: 0; } to { opacity: 1; } }
        @media (max-width: 760px) { .cover-strip { display: none; } }
      `}</style>

      {introOpen && (
        <div onClick={closeIntro} style={{
          position: 'absolute', inset: 0, zIndex: 20,
          background: 'rgba(10,10,10,0.45)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 20, animation: 'introFade 240ms ease',
        }}>
        <div role="dialog" aria-label="Про презентацію" onClick={e => e.stopPropagation()} style={{
          position: 'relative',
          width: 'min(420px, calc(100vw - 40px))',
          background: '#FBF7F0', color: 'var(--ink)',
          border: '1px solid var(--line)',
          padding: 'clamp(28px, 4vw, 40px) clamp(26px, 3.5vw, 36px) clamp(28px, 3.5vw, 36px)',
          boxShadow: '0 40px 90px -20px rgba(10,10,10,0.6)',
          animation: 'introPop 360ms cubic-bezier(0.2, 0.8, 0.2, 1)',
        }}>
          <button onClick={closeIntro} aria-label="Закрити" style={{
            position: 'absolute', top: 12, right: 12,
            appearance: 'none', background: 'transparent', border: '1px solid var(--line)',
            color: 'var(--ink)', width: 26, height: 26, cursor: 'pointer',
            fontSize: 14, lineHeight: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'inherit',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = 'var(--accent)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--line)'; }}>×</button>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, marginBottom: 10, maxWidth: '22ch' }}>
            Це інтерактивна презентація
          </div>
          <p style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--ink-soft)', marginBottom: 16 }}>
            Натискай на продукти й блоки на слайдах, щоб відкрити деталі: склад, користь, комплекси та формати співпраці.
          </p>
          <button onClick={closeIntro} style={{
            appearance: 'none', background: 'var(--ink)', color: '#fff', border: 'none',
            padding: '9px 16px', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
            fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
          }}>Зрозуміло</button>
        </div>
        </div>
      )}
    </section>
  );
}

window.SectionCover = SectionCover;