// sections-a.jsx  — Quiz + Geography (map + legend)

const { useState, useEffect, useRef } = React;

/* =================================================================
   QUIZ
================================================================= */
function QuizCard({ item }){
  const [sel, setSel] = useState(null);
  return (
    <div className={"quiz-card" + (sel ? " is-active" : "")}>
      <div className="quiz-num">{item.n}</div>
      <h3 className="quiz-q">{item.q}</h3>
      <div className="quiz-opts">
        {['Yes','No','Unsure'].map(opt => (
          <button key={opt}
            className={"quiz-opt" + (sel===opt ? " is-sel" : "")}
            onClick={()=>setSel(opt)}>
            {opt}
          </button>
        ))}
      </div>
      <div className={"quiz-reveal" + (sel ? " is-open" : "")}>
        <div className="quiz-ans-label">The answer</div>
        <p className="quiz-ans">
          <span className="lede">{item.lede}</span>
          {item.ans}
        </p>
      </div>
    </div>
  );
}

function QuizSection(){
  return (
    <>
      {window.QUIZ_DATA.map(q => <QuizCard key={q.n} item={q} />)}
    </>
  );
}

/* =================================================================
   GEOGRAPHY MAP
   mapStyle: 'painted' | 'wireframe' | 'heat'
================================================================= */
function IranMap({ onHover, hovered, mapStyle='painted' }){
  const mp = window.iran_map_paths || {};
  const baseIds = ['p249edc40','p38c01880','p34c34280','p34918380','p2369380','p10834f00','p32152ec0','p27f14b00','p2856a00','p26cea100','p3c735e80','p47b5e00','p30f76300','p21edd100','p39b28670','p1cca6f80','p361d3f00','p1c5cf480','p1e33b600','p20cab980','p16321a00','p3b43b000','p3e4ef6f0','p850bf00','p368ad800','p1c7e6400','p32b70800'];

  const baseFill   = mapStyle==='wireframe' ? 'none'    : mapStyle==='heat' ? '#1c2e4a' : '#e8e2d5';
  const baseStroke = mapStyle==='wireframe' ? '#0b1f3a' : mapStyle==='heat' ? '#2a3d5c' : '#fff';
  const baseSW     = mapStyle==='wireframe' ? 0.8       : 0.5;

  const op = (id) => {
    if(!hovered) return 0.55;
    return hovered===id ? 0.92 : 0.25;
  };

  const regions = [
    { id:'gulf',      d:mp.p3f8b1480, fill:'#2a6090' },
    { id:'lut',       d:mp.p311cb00,  fill:'#d4a040' },
    { id:'kavir',     d:mp.p198a5800, fill:'#c8965a' },
    { id:'alborz',    d:mp.p3d283580, fill:'#4a7fb5' },
    { id:'khuzestan', d:mp.p392f57f0, fill:'#3a8a60' },
    { id:'zagros',    d:mp.peb7f980,  fill:'#7a5c8a' }
  ];

  return (
    <svg viewBox="0 0 1000.25 918.394" preserveAspectRatio="xMidYMid meet" fill="none">
      <g>
        {baseIds.map(id => mp[id] ? (
          <path key={id} d={mp[id]} fill={baseFill} stroke={baseStroke} strokeWidth={baseSW} strokeLinecap="round" strokeLinejoin="round" />
        ) : null)}
        {regions.map(r => r.d ? (
          <path key={r.id} d={r.d}
            fill={mapStyle==='wireframe' ? 'none' : r.fill}
            stroke={mapStyle==='wireframe' ? r.fill : 'none'}
            strokeWidth={mapStyle==='wireframe' ? 1.8 : 0}
            fillOpacity={op(r.id)}
            style={{cursor:'pointer',transition:'all 0.3s'}}
            onMouseEnter={()=>onHover(r.id)}
            onMouseLeave={()=>onHover(null)} />
        ) : null)}
        <ellipse cx="694.569" cy="704.05" rx="15" ry="15"
          fill={mapStyle==='wireframe' ? 'none' : '#2F3742'}
          stroke={mapStyle==='wireframe' ? '#2F3742' : 'none'}
          strokeWidth={2}
          fillOpacity={op('hormuz')}
          style={{cursor:'pointer'}}
          onMouseEnter={()=>onHover('hormuz')}
          onMouseLeave={()=>onHover(null)} />
      </g>
    </svg>
  );
}

function GeographySection({ mapStyle }){
  const [hov, setHov] = useState(null);
  const regions = window.REGIONS;
  const hovItem = regions.find(r => r.id===hov);

  return (
    <>
      <div className="map-svg-wrap">
        <IranMap onHover={setHov} hovered={hov} mapStyle={mapStyle} />
        <div className={"map-hover-pill" + (hov ? " is-open" : "")}>
          {hovItem ? hovItem.name.toUpperCase() : ""}
        </div>
      </div>
      <div>
        <div className="map-legend">
          <div className="legend-title">Map legend</div>
          {regions.map(r => (
            <div key={r.id} className="legend-row"
              onMouseEnter={()=>setHov(r.id)}
              onMouseLeave={()=>setHov(null)}>
              <div className="legend-dot" style={{background:r.color, opacity:0.75}}></div>
              <div>
                <div className="legend-name">{r.name}</div>
                <div className="legend-desc">{r.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { QuizSection, GeographySection });