/* global React */
const { useState } = React;

// ============ MARQUEE ============
function Marquee() {
  const items = ["חיפוי אקוסטי", "★", "אקוסטיקה מקצועית", "★", "PODCAST READY", "★", "GAMING ROOMS", "★", "STUDIO GRADE", "★", "תוצרת איטליה", "★"];
  return (
    <div className="marquee">
      <div className="marquee__track">
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i} className="marquee__item">{it === "★" ? <span className="star" /> : it}</span>
        ))}
      </div>
    </div>
  );
}

// ============ USE CASES ============
function UseCases() {
  const cases = [
    { num:"01", title:"חדר גיימינג", sub:"אפס הד, מקס פוקוס. שומע את הצעדים לפני האויב.", chip:"GAMING", viz: <CaseVizGaming /> },
    { num:"02", title:"אולפן הקלטות", sub:"איכות סטודיו, בלי תקציב סטודיו. רקורדינג נקי.", chip:"STUDIO", viz: <CaseVizStudio /> },
    { num:"03", title:"סלון / הום-סינמה", sub:"באס שלא מהדהד, דיאלוגים שלא מתפזרים.", chip:"HOME", viz: <CaseVizLiving /> },
    { num:"04", title:"חדר תינוק", sub:"שינה רציפה. מסנן את הרעש מבחוץ — והבכי מבפנים.", chip:"NURSERY", viz: <CaseVizBaby /> },
  ];
  return (
    <section className="section" id="cases" data-screen-label="02 Use cases">
      <div className="wrap">
        <div className="section__head">
          <div>
            <span className="eyebrow">Use cases</span>
            <h2 className="section-title" style={{marginTop:24}}>חדר אחד.<br/>אינסוף סיבות.</h2>
          </div>
          <p className="head-right">
            לא משנה אם אתה סטרימר, מפיק, אבא טרי או סתם אוהב סאונד נקי —
            פאנל אחד פותר את הבעיה. ככה זה נראה ב-4 חדרים שונים.
          </p>
        </div>
        <div className="cases">
          {cases.map(c => (
            <div className="case" key={c.num}>
              <div className="case__viz">{c.viz}</div>
              <div className="case__bg" />
              <span className="case__num">{c.num} / 04</span>
              <span className="case__chip">{c.chip}</span>
              <div className="case__content">
                <div className="case__title">{c.title}</div>
                <div className="case__sub">{c.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseVizGaming() {
  return (
    <svg viewBox="0 0 200 240" style={{width:'100%',height:'100%'}}>
      <defs>
        <linearGradient id="gg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#1a1a1a"/><stop offset="1" stopColor="#0a0a0a"/>
        </linearGradient>
      </defs>
      <rect width="200" height="240" fill="url(#gg)"/>
      {/* hex panel pattern */}
      {Array.from({length: 8}).map((_, r) => 
        Array.from({length: 6}).map((_, c) => {
          const x = c*32 + (r%2)*16 + 10;
          const y = r*22 + 10;
          return <polygon key={`${r}-${c}`} points={`${x},${y} ${x+14},${y} ${x+21},${y+12} ${x+14},${y+24} ${x},${y+24} ${x-7},${y+12}`} fill="none" stroke="#2a2a2a" strokeWidth="0.8"/>;
        })
      )}
      {/* RGB glow */}
      <circle cx="100" cy="120" r="60" fill="var(--volt)" opacity="0.15"/>
      <text x="100" y="125" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fill="var(--volt)" letterSpacing="2">-30dB</text>
    </svg>
  );
}
function CaseVizStudio() {
  return (
    <svg viewBox="0 0 200 240" style={{width:'100%',height:'100%'}}>
      <rect width="200" height="240" fill="#1a1a1a"/>
      {/* mic shape */}
      <g transform="translate(100, 80)">
        <rect x="-18" y="-10" width="36" height="80" rx="18" fill="#2a2a2a" stroke="var(--copper)" strokeWidth="1"/>
        <line x1="0" y1="80" x2="0" y2="110" stroke="#5a5a56" strokeWidth="2"/>
        <rect x="-25" y="110" width="50" height="6" rx="3" fill="#5a5a56"/>
      </g>
      {/* waveform */}
      <g transform="translate(20, 200)">
        {Array.from({length: 30}).map((_, i) => {
          const h = 6 + Math.abs(Math.sin(i*0.7)) * 22;
          return <rect key={i} x={i*5.5} y={-h/2} width="2.5" height={h} fill="var(--volt)" opacity="0.8"/>;
        })}
      </g>
    </svg>
  );
}
function CaseVizLiving() {
  return (
    <svg viewBox="0 0 200 240" style={{width:'100%',height:'100%'}}>
      <rect width="200" height="240" fill="#1a1a1a"/>
      {/* Couch silhouette */}
      <g transform="translate(20, 130)">
        <rect x="0" y="20" width="160" height="50" rx="12" fill="#2a2a2a"/>
        <rect x="0" y="0" width="40" height="40" rx="10" fill="#333"/>
        <rect x="120" y="0" width="40" height="40" rx="10" fill="#333"/>
        <rect x="40" y="5" width="80" height="30" rx="6" fill="#262626"/>
      </g>
      {/* sound from above */}
      {[40, 70, 100].map((r,i) => (
        <circle key={i} cx="100" cy="20" r={r} fill="none" stroke="var(--copper)" strokeWidth="0.8" opacity={0.4 - i*0.1}/>
      ))}
      <circle cx="100" cy="20" r="5" fill="var(--copper)"/>
    </svg>
  );
}
function CaseVizBaby() {
  return (
    <svg viewBox="0 0 200 240" style={{width:'100%',height:'100%'}}>
      <rect width="200" height="240" fill="#1a1a1a"/>
      {/* moon */}
      <circle cx="60" cy="60" r="30" fill="var(--volt)" opacity="0.9"/>
      <circle cx="72" cy="55" r="28" fill="#1a1a1a"/>
      {/* zzz */}
      <text x="120" y="55" fontFamily="var(--font-display)" fontSize="32" fill="var(--text)" opacity="0.8">z</text>
      <text x="140" y="80" fontFamily="var(--font-display)" fontSize="22" fill="var(--text)" opacity="0.5">z</text>
      <text x="155" y="100" fontFamily="var(--font-display)" fontSize="14" fill="var(--text)" opacity="0.3">z</text>
      {/* crib bars */}
      <g transform="translate(40, 150)">
        <line x1="0" y1="0" x2="120" y2="0" stroke="#5a5a56" strokeWidth="2"/>
        {Array.from({length: 9}).map((_,i) => <line key={i} x1={i*15} y1="0" x2={i*15} y2="50" stroke="#5a5a56" strokeWidth="1.5"/>)}
        <line x1="0" y1="50" x2="120" y2="50" stroke="#5a5a56" strokeWidth="2"/>
      </g>
    </svg>
  );
}

// ============ BIG TEXT ============
function BigText() {
  return (
    <section className="bigtext" data-screen-label="03 Manifesto">
      <div className="wrap">
        <div className="bigtext__inner">
          רעש זה <span className="copper">זיהום</span>.<br/>
          סאונד טוב זה <span className="volt">בריאות נפשית</span>.<br/>
          <span className="dim">PRIME הוא ההבדל בין השניים — באיזה קיר שתרצה.</span>
        </div>
      </div>
    </section>
  );
}

window.Marquee = Marquee;
window.UseCases = UseCases;
window.BigText = BigText;