const IslandArt = () => (
  <svg className="island-art" viewBox="0 0 520 520" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <defs>
      <radialGradient id="sky" cx="50%" cy="30%" r="70%">
        <stop offset="0%" stopColor="var(--sky)" stopOpacity=".5"/>
        <stop offset="100%" stopColor="var(--bg)" stopOpacity="0"/>
      </radialGradient>
      <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="var(--ocean)" stopOpacity=".35"/>
        <stop offset="100%" stopColor="var(--ocean)" stopOpacity=".15"/>
      </linearGradient>
      <linearGradient id="sand" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#F7E4B2"/>
        <stop offset="100%" stopColor="#E8C879"/>
      </linearGradient>
      <linearGradient id="grass" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="var(--mint)"/>
        <stop offset="100%" stopColor="var(--mint-deep)"/>
      </linearGradient>
    </defs>
    <rect width="520" height="520" fill="url(#sky)"/>
    <g className="cloud" style={{transformOrigin:"200px 80px"}}>
      <ellipse cx="130" cy="80" rx="38" ry="14" fill="#fff" opacity=".85"/>
      <ellipse cx="160" cy="72" rx="26" ry="12" fill="#fff" opacity=".85"/>
    </g>
    <g className="cloud cloud-2" style={{transformOrigin:"400px 120px"}}>
      <ellipse cx="400" cy="120" rx="32" ry="12" fill="#fff" opacity=".8"/>
      <ellipse cx="424" cy="112" rx="22" ry="10" fill="#fff" opacity=".8"/>
    </g>
    {/* Water */}
    <ellipse cx="260" cy="420" rx="240" ry="56" fill="url(#water)"/>
    {/* Sand */}
    <ellipse cx="260" cy="400" rx="200" ry="56" fill="url(#sand)"/>
    {/* Island base */}
    <ellipse cx="260" cy="370" rx="170" ry="42" fill="url(#grass)"/>
    {/* Texture */}
    <ellipse cx="230" cy="366" rx="18" ry="4" fill="#fff" opacity=".2"/>
    <ellipse cx="310" cy="374" rx="14" ry="3" fill="#fff" opacity=".18"/>
    {/* Palm trunk */}
    <path d="M170 370 Q176 310 162 250" stroke="#8B5E3C" strokeWidth="9" fill="none" strokeLinecap="round"/>
    {/* Palm leaves */}
    <g className="float">
      <path d="M160 250 Q110 220 96 250 Q130 250 160 258" fill="#4F9E7E"/>
      <path d="M160 250 Q210 220 226 248 Q190 254 162 258" fill="#4F9E7E"/>
      <path d="M162 250 Q140 210 118 200 Q146 220 162 256" fill="#3F8A6A"/>
      <path d="M162 248 Q184 208 210 196 Q186 222 164 256" fill="#5FAE8E"/>
      <circle cx="155" cy="260" r="4" fill="#C97A3D"/>
      <circle cx="170" cy="266" r="3" fill="#C97A3D"/>
    </g>
    {/* Signpost */}
    <g>
      <rect x="296" y="260" width="8" height="120" fill="#9E6B3D"/>
      <rect x="290" y="376" width="20" height="6" fill="#6E4A2A"/>
      {/* Sign 1 */}
      <g transform="translate(280,272) rotate(-4)">
        <rect width="92" height="34" rx="5" fill="#C79367" stroke="#6E4A2A" strokeWidth="2"/>
        <rect x="4" y="4" width="84" height="26" rx="3" fill="#FFF6E2"/>
        <text x="46" y="22" textAnchor="middle" fontSize="11" fontWeight="800" fill="#6E4A2A" fontFamily="Nunito">AI · ML</text>
      </g>
      {/* Sign 2 */}
      <g transform="translate(306,310) rotate(3)">
        <rect width="88" height="32" rx="5" fill="#7FC8A9" stroke="#2E6B52" strokeWidth="2"/>
        <rect x="4" y="4" width="80" height="24" rx="3" fill="#FFFBEF"/>
        <text x="44" y="21" textAnchor="middle" fontSize="11" fontWeight="800" fill="#2E6B52" fontFamily="Nunito">DATA SCIENCE</text>
      </g>
      {/* Sign 3 */}
      <g transform="translate(278,346) rotate(-2)">
        <rect width="94" height="32" rx="5" fill="#FAE9C6" stroke="#9E6B3D" strokeWidth="2"/>
        <rect x="4" y="4" width="86" height="24" rx="3" fill="#FFF"/>
        <text x="47" y="21" textAnchor="middle" fontSize="11" fontWeight="800" fill="#9E6B3D" fontFamily="Nunito">BLOCKCHAIN · CLOUD</text>
      </g>
    </g>
    {/* Small bushes */}
    <g>
      <ellipse cx="380" cy="378" rx="22" ry="10" fill="#3F8A6A"/>
      <ellipse cx="395" cy="374" rx="14" ry="8" fill="#5FAE8E"/>
      <circle cx="388" cy="370" r="4" fill="#E08B6E"/>
      <circle cx="398" cy="368" r="3" fill="#F4C95D"/>
    </g>
    {/* Flag on palm */}
    <path d="M162 250 L168 252 L168 240 Z" fill="#E08B6E"/>
  </svg>
);

const Hero = ({ onNav }) => (
  <section className="section hero" id="top">
    <div>
      <div className="hero-badge">
        <span className="dot"><Icon name="compass" size={14} color="#fff"/></span>
        {window.LAB.badge_en}
      </div>
      <h1>Welcome to <em>{window.LAB.island_name_en}</em></h1>
      <p className="hero-tag">{window.LAB.tagline_en}</p>
      <div className="hero-readout">
        <div>&gt; <b>init</b> netdb.island --pillars=4 --status=active</div>
        <div>&gt; loading <b>AI</b> · <b>DataScience</b> · <b>Blockchain</b> · <b>Cloud</b> modules</div>
        <div>&gt; signal: <b>online</b> · node: ncku.csie.65602 <span className="blink">▌</span></div>
      </div>
      <div className="hero-ctas">
        <a href="#research" className="btn btn-primary" onClick={(e)=>{e.preventDefault(); onNav("research");}}>
          Explore the island <Icon name="arrow" size={16}/>
        </a>
        <a href="#papers" className="btn btn-ghost" onClick={(e)=>{e.preventDefault(); onNav("papers");}}>
          Read our papers
        </a>
      </div>
    </div>
    <div className="hero-art"><IslandArt/></div>
  </section>
);
window.Hero = Hero;
