// §9 Globe / Map — where Excelsa grows

function Globe(){
  const pins = [
    { name:"Sulu Archipelago", country:"Philippines", x: 76, y: 54, featured:true, note:"Our flagship farms" },
    { name:"Batangas",         country:"Philippines", x: 73, y: 51 },
    { name:"Lam Dong",         country:"Vietnam",     x: 70, y: 48 },
    { name:"South Sumatra",    country:"Indonesia",   x: 69, y: 56 },
    { name:"Meghalaya",        country:"India",       x: 63, y: 45 },
    { name:"Nyanza",           country:"Uganda",      x: 52, y: 55 },
    { name:"Cross River",      country:"Nigeria",     x: 47, y: 52 },
    { name:"Bombe",            country:"Liberia",     x: 43, y: 52 },
    { name:"Yangambi",         country:"DRC",         x: 50, y: 55 },
    { name:"Bolaven Plateau",  country:"Laos",        x: 69, y: 48 },
  ];
  return (
    <section id="map" className="paper-bg">
      <div className="wrap">
        <SectionHeader
          num="09"
          label="Origin · Geography"
          title='Where the <em>tropics</em> stay tropical.'
          lede="Excelsa follows a narrow equatorial belt — from Liberia across Central Africa, through South Asia, and into the Philippines and Indonesia. The Sulu and Batangas terroirs produce our flagship lots."
        />

        <Reveal delay={1} style={{ marginTop:70 }}>
          <div style={{ position:"relative", border:"1px solid var(--line)", background: "var(--paper-2)", padding: 24 }}>
            <WorldMap pins={pins}/>
            <div style={{ display:"flex", gap:24, marginTop:20, flexWrap:"wrap" }}>
              <LegendItem color="var(--copper)" label="Flagship origin"/>
              <LegendItem color="var(--sage)" label="Active production"/>
              <LegendItem dashed label="Native range (wild)"/>
            </div>
          </div>
        </Reveal>

        <Reveal delay={2}>
          <div className="grid g3" style={{ marginTop: 50, gap: 18 }}>
            {pins.slice(0,6).map(p => (
              <div key={p.name} className="card" style={{ padding:20, background: p.featured ? "var(--ink)" : "var(--cream-hi)", color: p.featured ? "var(--paper)" : "var(--ink)" }}>
                <div className="mono" style={{ fontSize:10, letterSpacing:"0.2em", opacity:.6 }}>{p.country.toUpperCase()}</div>
                <div style={{ fontFamily:"var(--serif)", fontSize:22, letterSpacing:"-0.015em", marginTop:4 }}>{p.name}</div>
                {p.note && <div className="hand" style={{ fontSize:18, color: p.featured ? "var(--copper-hi)" : "var(--sage-2)", marginTop:8 }}>{p.note}</div>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function LegendItem({ color, dashed, label }){
  return (
    <div className="flex" style={{ alignItems:"center", gap:10 }}>
      {dashed ? (
        <span style={{ display:"inline-block", width:20, height:2, backgroundImage:"repeating-linear-gradient(90deg, var(--copper-2) 0 4px, transparent 4px 8px)" }}/>
      ) : (
        <span style={{ width:10, height:10, borderRadius:"50%", background:color, border:"1px solid var(--ink)" }}/>
      )}
      <span className="mono" style={{ fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase", color:"var(--ink-3)" }}>{label}</span>
    </div>
  );
}

function WorldMap({ pins }){
  // Simplified continental silhouette; equatorial belt band
  return (
    <svg viewBox="0 0 1000 500" width="100%" style={{ display:"block" }} aria-hidden="true">
      {/* Graticule */}
      <g stroke="var(--line-2)" strokeWidth="0.5">
        {[0, 100, 200, 300, 400, 500].map(y => <line key={y} x1="0" x2="1000" y1={y} y2={y}/>)}
        {[0, 125, 250, 375, 500, 625, 750, 875, 1000].map(x => <line key={x} x1={x} x2={x} y1="0" y2="500"/>)}
      </g>

      {/* Equatorial coffee belt */}
      <rect x="0" y="210" width="1000" height="130" fill="rgba(177,98,44,0.08)"/>
      <line x1="0" y1="250" x2="1000" y2="250" stroke="var(--copper-2)" strokeDasharray="3 5" strokeWidth="0.7"/>
      <text x="10" y="246" fontFamily="var(--mono)" fontSize="9" fill="var(--copper-2)" letterSpacing="2">EQUATOR</text>

      {/* Continents (simplified) */}
      <g fill="var(--paper-3)" stroke="var(--ink-2)" strokeWidth="0.7">
        {/* Americas */}
        <path d="M150 120 Q 180 90, 220 110 Q 240 160, 220 220 Q 200 260, 240 310 Q 260 380, 240 430 Q 200 470, 180 440 Q 160 380, 170 340 Q 140 290, 160 240 Q 130 190, 150 120Z"/>
        {/* Europe + Africa */}
        <path d="M470 100 Q 520 85, 560 110 Q 580 140, 560 170 Q 590 210, 580 270 Q 560 330, 540 380 Q 510 420, 490 400 Q 470 360, 470 310 Q 450 260, 460 210 Q 440 160, 470 100Z"/>
        {/* Asia + Australia */}
        <path d="M620 90 Q 720 70, 820 100 Q 880 130, 870 180 Q 900 210, 880 240 Q 820 260, 780 250 Q 820 300, 780 330 Q 720 320, 680 290 Q 640 250, 640 200 Q 600 150, 620 90Z"/>
        <path d="M820 380 Q 880 370, 910 400 Q 900 430, 850 430 Q 820 420, 820 380Z"/>
      </g>

      {/* Pins */}
      {pins.map((p,i) => (
        <g key={i} transform={`translate(${p.x*10}, ${p.y*5})`}>
          <circle r={p.featured ? 8 : 5} fill={p.featured ? "var(--copper)" : "var(--sage)"} stroke="var(--ink)" strokeWidth="1"/>
          {p.featured && <circle r="14" fill="none" stroke="var(--copper)" strokeWidth="1" opacity="0.4"/>}
          <text x="10" y="3" fontFamily="var(--mono)" fontSize="10" fill="var(--ink)" letterSpacing="0.8">{p.name}</text>
        </g>
      ))}
    </svg>
  );
}

window.Globe = Globe;