// Main app for CHTC 30+ Landing v2 (React)
const { useState, useEffect, useRef } = React;

// ---------- Tiny icon set (no Lucide dep needed) ----------
const Icon = ({ d, size = 20, stroke = 1.6, className = "" }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" className={className}>
    {d}
  </svg>;

const Icons = {
  Calendar: <Icon d={<><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4" /></>} />,
  ArrowRight: <Icon d={<path d="M5 12h14M13 5l7 7-7 7" />} />,
  Book: <Icon d={<><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></>} />,
  Cpu: <Icon d={<><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3" /></>} />,
  Leaf: <Icon d={<><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.5 2c.5 5 .5 10-1 14a7.5 7.5 0 0 1-7.5 4z" /><path d="M2 21c0-3 1.85-5.36 5.08-6" /></>} />,
  Sparkles: <Icon d={<><path d="M12 3l1.9 5.7L19.6 11l-5.7 1.9L12 19l-1.9-5.7L4.4 11l5.7-2.1z" /></>} />,
  Clock: <Icon d={<><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>} />,
  Badge: <Icon d={<><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76z" /><path d="M9 12l2 2 4-4" /></>} />,
  Compass: <Icon d={<><circle cx="12" cy="12" r="10" /><path d="M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36z" /></>} />,
  Monitor: <Icon d={<><rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8M12 17v4" /></>} />,
  Hands: <Icon d={<><path d="M11 11V6a2 2 0 0 0-4 0v6M15 11V4a2 2 0 0 0-4 0v7M19 11V6a2 2 0 0 0-4 0v5M19 11h-2v9a2 2 0 0 0 4 0v-7a2 2 0 0 0-2-2zM5 11H3a2 2 0 0 0-2 2v3a6 6 0 0 0 6 6h4" /></>} />,
  Sprout: <Icon d={<><path d="M7 20h10M10 20c.62-1.83 1.5-3 3-4M2 12s2-2 5-2 5 2 5 2-2 2-5 2-5-2-5-2zM22 8s-2-2-5-2-5 2-5 2 2 2 5 2 5-2 5-2z" /></>} />,
  Flask: <Icon d={<><path d="M10 2v7.5L4.4 19.4A2 2 0 0 0 6.2 22h11.6a2 2 0 0 0 1.8-2.6L14 9.5V2M9 2h6" /></>} />,
  Scan: <Icon d={<><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M7 12h10" /></>} />,
  Chart: <Icon d={<><path d="M3 3v18h18M7 14l4-4 4 4 5-5" /></>} />,
  Infinity: <Icon d={<><path d="M18.178 8c-2.034 0-3.667 1.79-4.178 4-.51 2.21-2.144 4-4.178 4-3.012 0-5.456-1.79-5.456-4S6.81 8 9.822 8c2.034 0 3.667 1.79 4.178 4 .51 2.21 2.144 4 4.178 4 3.012 0 5.456-1.79 5.456-4s-2.444-4-5.456-4z" /></>} />,
  Drop: <Icon d={<><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" /></>} />,
  Gift: <Icon d={<><polyline points="20 12 20 22 4 22 4 12" /><rect x="2" y="7" width="20" height="5" /><path d="M12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" /></>} />,
  Users: <Icon d={<><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" /></>} />,
  Award: <Icon d={<><circle cx="12" cy="8" r="6" /><path d="M15.5 13.5L17 22l-5-3-5 3 1.5-8.5" /></>} />,
  Building: <Icon d={<><rect x="4" y="2" width="16" height="20" rx="2" /><path d="M9 22v-4h6v4M8 6h.01M16 6h.01M8 10h.01M16 10h.01M8 14h.01M16 14h.01" /></>} />,
  Pin: <Icon d={<><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></>} />,
  Phone: <Icon d={<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />} />,
  Mail: <Icon d={<><rect x="2" y="4" width="20" height="16" rx="2" /><path d="M2 6l10 8 10-8" /></>} />,
  Plus: <Icon d={<path d="M12 5v14M5 12h14" />} />,
  Check: <Icon d={<><circle cx="12" cy="12" r="10" /><path d="M9 12l2 2 4-4" /></>} />,
  Activity: <Icon d={<path d="M22 12h-4l-3 9L9 3l-3 9H2" />} />,
  GraduationCap: <Icon d={<><path d="M22 10v6M2 10l10-5 10 5-10 5z" /><path d="M6 12v5c3 3 9 3 12 0v-5" /></>} />,
  Heart: <Icon d={<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />} />,
  MessageCircle: <Icon d={<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />} />
};

// ---------- NAV ----------
function Nav() {
  return (
    <nav className="fixed top-0 inset-x-0 z-50 nav-blur border-b border-ink/5">
      <div className="max-w-7xl mx-auto px-6 lg:px-10 h-16 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-full bg-tech text-white flex items-center justify-center font-serif-tc font-bold text-sm tracking-wider">30+</div>
          <div className="leading-tight">
            <div className="font-serif-tc font-semibold text-ink text-[15px]">智慧樂活與妝品科技學分學程</div>
            <div className="text-[11px] text-ink-muted tracking-wider">CHTC · SMART WELLNESS × BEAUTY TECH</div>
          </div>
        </a>
        <div className="hidden lg:flex items-center gap-8 text-sm text-ink-soft">
          <a href="#pain" className="hover:text-tech transition">混成學習</a>
          <a href="#curriculum" className="hover:text-tech transition">課程地圖</a>
          <a href="#benefits" className="hover:text-tech transition">入學福利</a>
          <a href="#facility" className="hover:text-tech transition">教學場域</a>
          <a href="#faq" className="hover:text-tech transition">常見問題</a>
        </div>
        <a href="https://forms.gle/TExTJjkqE7C89PUy5" target="_blank" rel="noopener" className="btn-primary text-sm font-medium px-5 py-2.5 rounded-full inline-flex items-center gap-2">
          {Icons.Calendar}<span>立即報名</span>
        </a>
      </div>
    </nav>);

}

// ---------- HERO ----------
function Hero() {
  return (
    <section id="top" className="relative pt-32 pb-24 lg:pt-36 lg:pb-32 overflow-hidden bg-white">
      <div className="absolute inset-0 grain"></div>
      <div className="absolute top-0 right-0 w-[420px] h-[420px] rounded-full opacity-30 blur-3xl"
      style={{ background: "radial-gradient(circle, #1F73C7 0%, transparent 70%)" }}></div>
      <div className="absolute bottom-0 left-0 w-[480px] h-[480px] rounded-full opacity-25 blur-3xl"
      style={{ background: "radial-gradient(circle, #B5C0A4 0%, transparent 70%)" }}></div>

      <div className="relative max-w-7xl mx-auto px-6 lg:px-10 grid lg:grid-cols-12 gap-12 items-center">
        <div className="lg:col-span-7 reveal">
          <div className="flex items-center gap-3 mb-7 flex-wrap">
            <span className="seal text-tech">教育部 30+ 大學計畫補助</span>
            <span className="text-[11px] tracking-[0.2em] text-ink-muted">2026 秋季招生</span>
          </div>

          <h1 className="font-serif-tc font-medium text-[40px] sm:text-[52px] lg:text-[64px] leading-[1.12] text-ink tracking-tight">
            <span className="block">30<span className="font-display italic font-normal text-tech">+</span> 職涯再造</span>
            <span className="block">用 <span className="text-tech">AI 科技</span>與<span className="text-sage-deep italic font-display">科學實證</span></span>
            <span className="block">翻轉你的美力人生。</span>
          </h1>

          <p className="mt-8 text-base lg:text-[17px] text-ink-soft leading-[1.9] max-w-xl">
            為美容產業、長照工作者與社區居民量身打造的<span className="text-ink font-medium">學分學程</span>。
            <span className="text-tech font-medium">16 學分</span>正式學程．<span className="text-sage-deep font-medium">混成學習</span>．取得學分可累計四年制學位。
          </p>

          <div className="mt-10 flex flex-col sm:flex-row gap-4">
            <a href="https://forms.gle/TExTJjkqE7C89PUy5" target="_blank" rel="noopener" className="btn-primary px-8 py-4 rounded-full font-medium inline-flex items-center justify-center gap-2 group">
              {Icons.Calendar}<span>立即報名 30+ 學程</span>
              <span className="group-hover:translate-x-1 transition">{Icons.ArrowRight}</span>
            </a>
            <a href="#curriculum" className="px-8 py-4 rounded-full font-medium border border-ink/15 text-ink hover:border-ink/40 hover:bg-beige transition inline-flex items-center justify-center gap-2">
              {Icons.Book}<span>查看課程地圖</span>
            </a>
          </div>

          <div className="mt-14 grid grid-cols-3 gap-6 max-w-xl pt-8 border-t border-ink/10">
            <div>
              <div className="font-display text-4xl text-tech leading-none">16</div>
              <div className="text-xs text-ink-muted mt-2 tracking-wider">CREDITS · 學分</div>
            </div>
            <div>
              <div className="font-display text-4xl text-sage-deep leading-none">1+2</div>
              <div className="text-xs text-ink-muted mt-2 tracking-wider">CORE + MODULES</div>
            </div>
            <div>
              <div className="font-display text-4xl text-ink leading-none">100<span className="text-2xl">+</span></div>
              <div className="text-xs text-ink-muted mt-2 tracking-wider">YEAR LIFE</div>
            </div>
          </div>
        </div>

        <div className="lg:col-span-5 reveal">
          <HeroVisual />
        </div>
      </div>

      {/* Trust marquee */}
      <div className="relative mt-20 lg:mt-28 border-y border-ink/10 py-6 overflow-hidden bg-beige/40">
        <div className="flex gap-12 marquee-track whitespace-nowrap text-ink-muted text-sm tracking-wider items-center">
          {Array(2).fill(0).map((_, r) =>
          <React.Fragment key={r}>
              <span className="flex items-center gap-2">{Icons.Award}<span>教育部 30+ 大學計畫補助</span></span><span>·</span>
              <span className="flex items-center gap-2">{Icons.Building}<span>中華科技大學生技系</span></span><span>·</span>
              <span className="flex items-center gap-2">{Icons.Badge}<span>16 學分正式學程</span></span><span>·</span>
              <span className="flex items-center gap-2">{Icons.Users}<span>30+ 在職友善</span></span><span>·</span>
              <span className="flex items-center gap-2">{Icons.GraduationCap}<span>學位學分可累計</span></span><span>·</span>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

}

function HeroVisual() {
  return (
    <div className="relative aspect-[4/5] w-full max-w-[480px] mx-auto">
      <div className="absolute inset-0 grid grid-cols-2 rounded-[28px] overflow-hidden shadow-2xl shadow-ink/20">
        {/* TECH */}
        <div className="relative bg-ink overflow-hidden">
          <div className="absolute inset-0 orb-tech opacity-90"></div>
          <svg className="absolute inset-0 w-full h-full opacity-30" viewBox="0 0 200 400" preserveAspectRatio="none">
            <defs>
              <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="white" strokeWidth="0.3" />
              </pattern>
            </defs>
            <rect width="200" height="400" fill="url(#grid)" />
          </svg>
          {/* Scalp scan circle */}
          <div className="absolute top-12 left-1/2 -translate-x-1/2 floaty-slow">
            <svg width="120" height="120" viewBox="0 0 120 120">
              <circle cx="60" cy="60" r="52" fill="none" stroke="rgba(255,255,255,0.2)" strokeDasharray="2 4" />
              <circle cx="60" cy="60" r="44" fill="rgba(255,255,255,0.05)" stroke="rgba(181,192,164,0.6)" strokeWidth="1" />
              {[...Array(12)].map((_, i) => {
                const a = i / 12 * Math.PI * 2;
                return <circle key={i} cx={60 + Math.cos(a) * 30} cy={60 + Math.sin(a) * 30} r="2" fill="#B5C0A4" opacity={0.5 + Math.random() * 0.5} />;
              })}
              <circle cx="60" cy="60" r="3" fill="#fff" />
              <text x="60" y="105" textAnchor="middle" fill="#fff" fontSize="8" fontFamily="monospace" letterSpacing="2">SCALP · AI</text>
            </svg>
          </div>
          <div className="absolute bottom-20 left-4 right-4 floaty">
            <div className="bg-white/10 backdrop-blur border border-white/20 rounded-2xl p-3.5 text-white">
              <div className="flex items-center gap-2 text-[10px] tracking-[0.2em] text-white/70 uppercase">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                AI Scalp Image
              </div>
              <div className="font-serif-tc text-sm mt-1.5">毛囊密度</div>
              <div className="font-display text-2xl font-light leading-tight">87<span className="text-sm">/cm²</span></div>
              <div className="mt-2 h-1.5 bg-white/15 rounded-full overflow-hidden">
                <div className="h-full bg-gradient-to-r from-emerald-300 to-cyan-300 rounded-full" style={{ width: "78%" }}></div>
              </div>
            </div>
          </div>
          <div className="absolute bottom-5 left-5 text-white/90">
            <div className="text-[9px] tracking-[0.3em] uppercase">Module 02</div>
            <div className="font-serif-tc text-base mt-1">AI 科技</div>
          </div>
          <span className="absolute bottom-6 right-6 text-white/60">{Icons.Cpu}</span>
        </div>

        {/* WELLNESS */}
        <div className="relative overflow-hidden" style={{ background: "linear-gradient(160deg, #EDEAE0 0%, #C5D0B4 60%, #889977 100%)" }}>
          <div className="absolute -top-10 -right-10 w-48 h-48 rounded-full opacity-40" style={{ background: "radial-gradient(circle, #F5F5F0, transparent 70%)" }}></div>
          <div className="absolute bottom-20 -left-10 w-40 h-40 rounded-full opacity-50" style={{ background: "radial-gradient(circle, #D9D5C7, transparent 70%)" }}></div>

          {/* botanical */}
          <svg className="absolute top-8 left-1/2 -translate-x-1/2 floaty" width="100" height="120" viewBox="0 0 100 120">
            <path d="M50 110 Q50 60 50 20" stroke="#5F6E52" strokeWidth="1.5" fill="none" />
            <ellipse cx="35" cy="55" rx="18" ry="8" fill="#889977" opacity="0.7" transform="rotate(-30 35 55)" />
            <ellipse cx="65" cy="40" rx="16" ry="7" fill="#5F6E52" opacity="0.8" transform="rotate(35 65 40)" />
            <ellipse cx="40" cy="80" rx="14" ry="6" fill="#889977" opacity="0.6" transform="rotate(-20 40 80)" />
            <circle cx="50" cy="20" r="6" fill="#F5F5F0" stroke="#5F6E52" strokeWidth="1" />
            <circle cx="50" cy="20" r="2" fill="#5F6E52" />
          </svg>

          <div className="absolute top-44 left-3 right-3 floaty-slow">
            <div className="bg-white/70 backdrop-blur border border-white/60 rounded-2xl p-3 text-ink">
              <div className="flex items-center gap-2 text-[10px] tracking-[0.2em] text-sage-deep uppercase">
                {Icons.Leaf}<span>Botanical</span>
              </div>
              <div className="font-serif-tc text-sm mt-1.5">薰衣草 · 迷迭香</div>
              <div className="text-[10px] text-ink-muted mt-0.5">純植萃 · 舒眠 · 清晰</div>
            </div>
          </div>

          {/* bottle */}
          <div className="absolute bottom-16 right-6 floaty">
            <div className="w-12 h-18 bg-white/80 rounded-t-full rounded-b-md flex items-end justify-center pb-1.5 shadow-md" style={{ height: "68px" }}>
              <div className="w-7 h-10 rounded bg-sage-deep/30 mb-1"></div>
            </div>
          </div>

          <div className="absolute bottom-5 left-5 text-ink">
            <div className="text-[9px] tracking-[0.3em] uppercase text-sage-deep">Module 01</div>
            <div className="font-serif-tc text-base mt-1">智慧樂活</div>
          </div>
          <span className="absolute bottom-6 right-6 text-sage-deep">{Icons.Sparkles}</span>
        </div>
      </div>

      {/* Center medallion */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
        <div className="w-24 h-24 rounded-full bg-white shadow-xl flex items-center justify-center">
          <div className="w-20 h-20 rounded-full border border-ink/15 flex flex-col items-center justify-center text-ink">
            <div className="font-display text-3xl leading-none">30<span className="italic text-tech">+</span></div>
            <div className="text-[8px] tracking-[0.2em] mt-1 text-ink-muted">CHTC</div>
          </div>
        </div>
      </div>

      <div className="absolute -bottom-5 -left-5 bg-white rounded-2xl shadow-xl border border-ink/5 px-5 py-3 hidden sm:block">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-full bg-beige flex items-center justify-center text-tech">{Icons.GraduationCap}</div>
          <div>
            <div className="text-[10px] tracking-[0.2em] text-ink-muted uppercase">Certified</div>
            <div className="font-serif-tc text-sm text-ink font-medium">中華科技大學</div>
          </div>
        </div>
      </div>
    </div>);

}

// ---------- PAIN / HYBRID ----------
function PainHybrid() {
  const pains = [
  { icon: Icons.Clock, num: "01", title: "白天上班、晚上顧家，根本沒空進修。", note: "傳統實體班時段固定，難以兼顧。" },
  { icon: Icons.Badge, num: "02", title: "想要正式學歷背書，不只是短期證書。", note: "短期班含金量低，市場辨識度有限。" },
  { icon: Icons.Compass, num: "03", title: "想轉職、想升級，但不知從何開始。", note: "美容、長照、健康產業正紅，但路徑混亂。" }];

  return (
    <section id="pain" className="py-24 lg:py-32 bg-beige relative">
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="max-w-3xl reveal">
          <div className="text-[11px] tracking-[0.3em] text-tech uppercase mb-4">Why hybrid learning</div>
          <h2 className="font-serif-tc text-3xl lg:text-5xl text-ink leading-[1.2]">
            想精進，總卡在「<span className="font-display italic text-ink-muted">時間</span>」<br className="sm:hidden" />這一關。
          </h2>
          <p className="mt-6 text-ink-soft leading-relaxed max-w-xl">
            我們重新設計了學習節奏：把進修融入週末工作坊與線上彈性課程，讓 30+ 的你也能無痛上路。
          </p>
        </div>

        <div className="mt-16 grid md:grid-cols-3 gap-6 lg:gap-8">
          {pains.map((p, i) =>
          <div key={i} className="reveal bg-white rounded-3xl p-8 lg:p-10 lift relative overflow-hidden">
              <div className="num-mark text-7xl text-beige-dark absolute top-4 right-6">{p.num}</div>
              <div className="w-12 h-12 rounded-full bg-beige flex items-center justify-center mb-6 relative text-tech">{p.icon}</div>
              <div className="text-xs tracking-[0.2em] text-ink-muted uppercase mb-3 relative">Pain · {p.num}</div>
              <h3 className="font-serif-tc text-xl text-ink relative leading-snug">{p.title}</h3>
              <p className="text-sm text-ink-muted mt-4 leading-relaxed relative">{p.note}</p>
            </div>
          )}
        </div>

        {/* Solution */}
        <div className="reveal mt-16 lg:mt-20 bg-ink rounded-3xl p-10 lg:p-14 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-80 h-80 rounded-full opacity-20 blur-3xl" style={{ background: "radial-gradient(circle, #1F73C7, transparent 70%)" }}></div>
          <div className="relative grid lg:grid-cols-12 gap-10 items-center">
            <div className="lg:col-span-7">
              <div className="text-[11px] tracking-[0.3em] text-white/60 uppercase mb-4">Hybrid Learning · 混成學習</div>
              <h3 className="font-serif-tc text-white text-3xl lg:text-4xl leading-[1.3]">
                週末實作工作坊　＋　<span className="font-display italic text-sage-light">線上同步 / 錄影</span>
              </h3>
              <p className="text-white/70 mt-5 leading-[1.9] max-w-2xl">
                線上課程支援同步直播與錄影回放，缺課自動補課；週末於校內進行實作，讓技術扎實落地。
              </p>
            </div>
            <div className="lg:col-span-5">
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-white/5 border border-white/10 rounded-2xl p-5 text-white">
                  <span className="text-sage-light">{Icons.Monitor}</span>
                  <div className="font-serif-tc text-base mt-3">線上 30%</div>
                  <div className="text-white/60 text-xs mt-1.5 leading-relaxed">直播 + 錄影 · 隨時複習</div>
                </div>
                <div className="bg-white/5 border border-white/10 rounded-2xl p-5 text-white">
                  <span className="text-sage-light">{Icons.Hands}</span>
                  <div className="font-serif-tc text-base mt-3">實作 70%</div>
                  <div className="text-white/60 text-xs mt-1.5 leading-relaxed">週末工作坊 · 大師親授</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- CURRICULUM ----------
function Curriculum() {
  return (
    <section id="curriculum" className="py-24 lg:py-32 bg-white relative">
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal text-center max-w-2xl mx-auto">
          <div className="text-[11px] tracking-[0.3em] text-tech uppercase mb-4">Curriculum · 1 + 2</div>
          <h2 className="font-serif-tc text-3xl lg:text-5xl text-ink leading-[1.2]">
            一個核心，<span className="font-display italic text-tech">兩條路徑</span>，<br />16 學分一次到位。
          </h2>
          <p className="mt-6 text-ink-soft leading-relaxed">
            以「百年人生思維」串接<span className="text-sage-deep">身心樂活</span>與<span className="text-tech">AI 科技</span>，建構未來十年的職涯能力組合。
          </p>
        </div>

        <div className="reveal mt-16 lg:mt-20 max-w-5xl mx-auto">
          {/* Core */}
          <div className="relative bg-gradient-to-br from-beige to-beige-warm rounded-3xl p-8 lg:p-10 border border-ink/5 overflow-hidden">
            <div className="absolute top-6 right-8 num-mark text-7xl" style={{ color: "rgba(10,31,61,0.06)" }}>00</div>
            <div className="grid lg:grid-cols-12 gap-6 items-center relative">
              <div className="lg:col-span-1 flex lg:justify-center">
                <div className="w-14 h-14 rounded-full bg-ink text-white flex items-center justify-center">{Icons.Infinity}</div>
              </div>
              <div className="lg:col-span-7">
                <div className="text-[11px] tracking-[0.3em] text-ink-muted uppercase mb-2">Core · 共同核心</div>
                <h3 className="font-serif-tc text-2xl lg:text-3xl text-ink">百年人生思維</h3>
                <p className="text-sm text-ink-soft mt-2 leading-relaxed max-w-lg">
                  從哲學、健康經濟到生涯規劃，重新定義 30+ 之後的多階段職涯路徑。
                </p>
              </div>
              <div className="lg:col-span-4 flex lg:justify-end">
                <div className="inline-flex items-baseline gap-1 px-5 py-3 rounded-full bg-white border border-ink/10">
                  <span className="font-display text-3xl text-ink">2</span>
                  <span className="text-sm text-ink-muted">學分</span>
                </div>
              </div>
            </div>
          </div>

          {/* Connector */}
          <div className="hidden lg:flex justify-center -my-2">
            <svg width="240" height="50" viewBox="0 0 240 50" fill="none">
              <path d="M120 0 L120 20 L40 20 L40 50" stroke="#0A1F3D" strokeOpacity="0.15" />
              <path d="M120 0 L120 20 L200 20 L200 50" stroke="#0A1F3D" strokeOpacity="0.15" />
              <circle cx="120" cy="0" r="3" fill="#0A1F3D" />
              <circle cx="40" cy="50" r="3" fill="#889977" />
              <circle cx="200" cy="50" r="3" fill="#0055AA" />
            </svg>
          </div>

          <div className="grid lg:grid-cols-2 gap-6 mt-6 lg:mt-0">
            {/* Module 1 */}
            <div className="module-1 relative bg-white rounded-3xl p-8 lg:p-10 border border-sage/30 overflow-hidden">
              <div className="relative">
                <div className="flex items-start justify-between mb-6">
                  <div>
                    <div className="text-[11px] tracking-[0.3em] text-sage-deep uppercase mb-2">Module · 01</div>
                    <h3 className="font-serif-tc text-2xl lg:text-3xl text-ink">智慧樂活</h3>
                    <div className="font-display italic text-sage-deep text-lg mt-1">Wellness & Body Support</div>
                  </div>
                  <div className="text-right">
                    <div className="font-display text-5xl text-sage-deep leading-none">8</div>
                    <div className="text-xs text-ink-muted tracking-wider mt-1">CREDITS</div>
                  </div>
                </div>
                <p className="text-sm text-ink-soft leading-relaxed">芳療、植物科學、整體照護，建立全方位樂活與長照能力。</p>
                <div className="mt-6 space-y-3">
                  {[
                  { ic: Icons.Sprout, t: "植物科學概論", s: "植萃成分 · 萃取方法 · 應用案例" },
                  { ic: Icons.Drop, t: "芳香療法實務", s: "複方調配 · 身心應用 · 個案實作" },
                  { ic: Icons.Heart, t: "整體式健康照護", s: "經絡導引 · 居家保健 · 身心支持" }].
                  map((it, i) =>
                  <div key={i} className="flex items-start gap-3 p-3 rounded-xl hover:bg-sage/5 transition">
                      <div className="w-9 h-9 rounded-lg bg-sage/15 flex items-center justify-center flex-shrink-0 text-sage-deep">{it.ic}</div>
                      <div>
                        <div className="text-ink font-medium text-sm">{it.t}</div>
                        <div className="text-xs text-ink-muted mt-0.5">{it.s}</div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Module 2 */}
            <div className="module-2 relative bg-white rounded-3xl p-8 lg:p-10 border border-tech/25 overflow-hidden">
              <div className="relative">
                <div className="flex items-start justify-between mb-6">
                  <div>
                    <div className="text-[11px] tracking-[0.3em] text-tech uppercase mb-2">Module · 02</div>
                    <h3 className="font-serif-tc text-2xl lg:text-3xl text-ink">AI 與職涯轉型</h3>
                    <div className="font-display italic text-tech text-lg mt-1">AI & Career Transformation</div>
                  </div>
                  <div className="text-right">
                    <div className="font-display text-5xl text-tech leading-none">6</div>
                    <div className="text-xs text-ink-muted tracking-wider mt-1">CREDITS</div>
                  </div>
                </div>
                <p className="text-sm text-ink-soft leading-relaxed">以 AI 影像分析、服務設計與數位健康，讓傳統美業升級成數據驅動的精準服務。</p>
                <div className="mt-6 space-y-3">
                  {[
                  { ic: Icons.Scan, t: "AI 頭皮影像分析", s: "影像判讀 · 數據解讀 · 客製化建議" },
                  { ic: Icons.Sparkles, t: "服務設計與顧客經驗", s: "客戶輪廓 · 流程優化 · 商業模式" },
                  { ic: Icons.Activity, t: "數位健康管理", s: "穿戴裝置 · 數據追蹤 · 健康介入" }].
                  map((it, i) =>
                  <div key={i} className="flex items-start gap-3 p-3 rounded-xl hover:bg-tech/5 transition">
                      <div className="w-9 h-9 rounded-lg bg-tech/12 flex items-center justify-center flex-shrink-0 text-tech">{it.ic}</div>
                      <div>
                        <div className="text-ink font-medium text-sm">{it.t}</div>
                        <div className="text-xs text-ink-muted mt-0.5">{it.s}</div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

          {/* Total */}
          <div className="mt-10">
            <div className="flex items-center justify-center gap-4 lg:gap-8 flex-wrap">
              <div className="flex items-center gap-2 text-ink-muted text-sm">
                <span className="font-display text-2xl text-ink">2</span><span>核心</span>
              </div>
              <div className="text-ink/30 text-2xl font-light">+</div>
              <div className="flex items-center gap-2 text-ink-muted text-sm">
                <span className="font-display text-2xl text-sage-deep">8</span><span>樂活</span>
              </div>
              <div className="text-ink/30 text-2xl font-light">+</div>
              <div className="flex items-center gap-2 text-ink-muted text-sm">
                <span className="font-display text-2xl text-tech">6</span><span>科技</span>
              </div>
              <div className="text-ink/30 text-2xl font-light">=</div>
              <div className="inline-flex items-baseline gap-2 px-6 py-3 rounded-full bg-ink text-white">
                <span className="font-display text-3xl">16</span><span className="text-sm">學分總計</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- BENEFITS ----------
function Benefits() {
  const items = [
  {
    tag: "01 · Material Support", title: "專業器材與耗材免費使用",
    desc: "學員享有、按摩工具、AI 頭皮檢測儀等專業設備使用權，課程期間無須自備。",
    tags: ["原廠精油組", "按摩工具", "AI 檢測儀配件", "耗材補助"],
    icon: Icons.Drop, accent: "sage"
  },
  {
    tag: "02 · Master Collaboration", title: "業界大師親授｜尖端設備教學",
    desc: "師資網羅美容、芳療、生技、AI 各領域業界資深專家，並引進市值千萬的教學設備。",
    tags: ["業界專家", "尖端設備", "個案實作", "業師輔導"],
    icon: Icons.Users, accent: "tech"
  },
  {
    tag: "03 · Academic Path", title: "正式學分｜可累計四年制學位",
    desc: "修畢之 16 學分為中華科技大學正式學程學分，可累計四年制學位學程。",
    tags: ["正式學分", "可轉學位", "學分證明", "官方核發"],
    icon: Icons.GraduationCap, accent: "ink"
  }];

  return (
    <section id="benefits" className="py-24 lg:py-32 bg-beige relative">
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal grid lg:grid-cols-12 gap-10 items-end mb-14">
          <div className="lg:col-span-7">
            <div className="text-[11px] tracking-[0.3em] text-tech uppercase mb-4">Exclusive Benefits</div>
            <h2 className="font-serif-tc text-3xl lg:text-5xl text-ink leading-[1.2]">專屬入學福利｜<br />不只一張證書，<span className="font-display italic text-tech">一整套職涯</span>。</h2>
          </div>
          <div className="lg:col-span-5 text-ink-soft leading-relaxed">
            從學習工具、業師人脈到正式學位，三重保障幫你把每一份投入轉化為長期回報。
          </div>
        </div>

        <div className="grid lg:grid-cols-3 gap-6">
          {items.map((b, i) =>
          <div key={i} className="reveal lift bg-white rounded-3xl p-8 lg:p-10 relative overflow-hidden flex flex-col">
              <div className={`absolute top-0 left-0 right-0 h-1 ${b.accent === 'sage' ? 'bg-sage' : b.accent === 'tech' ? 'bg-tech' : 'bg-ink'}`}></div>
              <div className="text-[10px] tracking-[0.25em] text-ink-muted uppercase">{b.tag}</div>
              <div className={`mt-6 w-12 h-12 rounded-full ${b.accent === 'sage' ? 'bg-sage/15 text-sage-deep' : b.accent === 'tech' ? 'bg-tech/10 text-tech' : 'bg-ink/8 text-ink'} flex items-center justify-center`}>{b.icon}</div>
              <h3 className="font-serif-tc text-xl lg:text-2xl text-ink mt-5 leading-snug">{b.title}</h3>
              <p className="text-sm text-ink-soft mt-4 leading-[1.85] flex-1">{b.desc}</p>
              <div className="mt-6 flex flex-wrap gap-2">
                {b.tags.map((t, j) =>
              <span key={j} className="inline-flex items-center text-[11px] px-2.5 py-1 rounded-full bg-beige border border-ink/8 text-ink-soft">{t}</span>
              )}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- FACILITY ----------
function Facility() {
  return (
    <section id="facility" className="py-24 lg:py-32 bg-white relative">
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal grid lg:grid-cols-12 gap-10 items-end mb-14">
          <div className="lg:col-span-7">
            <div className="text-[11px] tracking-[0.3em] text-tech uppercase mb-4">Professional Facilities</div>
            <h2 className="font-serif-tc text-3xl lg:text-5xl text-ink leading-[1.2]">專業教學場域｜<br />學習場所即<span className="font-display italic text-sage-deep">業界現場</span>。</h2>
          </div>
          <div className="lg:col-span-5 text-ink-soft leading-relaxed">中華科技大學生技系兩大旗艦教室，將植萃藝術與生技實驗的氛圍融入日常教學。

          </div>
        </div>

        <div className="grid lg:grid-cols-2 gap-6">
          {/* Fragrance classroom */}
          <div className="reveal lift relative rounded-3xl overflow-hidden border border-ink/8">
            <div className="aspect-[5/4] relative" style={{ background: "linear-gradient(160deg, #EDEAE0 0%, #C5D0B4 60%, #889977 100%)" }}>
              <div className="absolute inset-0 opacity-50" style={{ backgroundImage: "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(circle at 70% 70%, rgba(95,110,82,0.4), transparent 50%)" }}></div>
              {/* shelf of bottles */}
              <div className="absolute bottom-10 left-10 right-10 flex items-end gap-3">
                {[60, 80, 50, 90, 70, 65, 85].map((h, i) =>
                <div key={i} className="flex-1 flex flex-col items-center">
                    <div className="w-full bg-white/80 rounded-t-full rounded-b-md flex items-end justify-center pb-1 shadow" style={{ height: `${h}px` }}>
                      <div className="w-2/3 rounded bg-sage-deep/30 mb-1" style={{ height: `${h * 0.55}px` }}></div>
                    </div>
                  </div>
                )}
              </div>
              <div className="absolute top-6 left-6">
                <div className="bg-white/80 backdrop-blur rounded-full px-4 py-1.5 text-[11px] tracking-[0.2em] text-sage-deep uppercase">Module 01 · Wellness</div>
              </div>
              <span className="absolute top-6 right-6 text-sage-deep">{Icons.Leaf}</span>
            </div>
            <div className="p-7 lg:p-9 bg-white">
              <h3 className="font-serif-tc text-2xl text-ink">香氛藝術多功能教室</h3>
              <div className="font-display italic text-sage-deep mt-1">Fragrance Art Multi-functional Classroom</div>
              <p className="text-sm text-ink-soft mt-4 leading-[1.9]">配備專業精油吧檯、調香實驗工作站、按摩照護與保健模擬區，讓芳療、按摩與身心支持的訓練在同一空間完成。</p>
              <div className="mt-5 flex flex-wrap gap-2">
                {["精油吧檯", "調香工作站", "按摩床位", "保健模擬區"].map((t, i) =>
                <span key={i} className="inline-flex items-center text-[11px] px-2.5 py-1 rounded-full bg-beige border border-ink/8 text-ink-soft">{t}</span>
                )}
              </div>
            </div>
          </div>

          {/* Cosmetic Biotech Lab */}
          <div className="reveal lift relative rounded-3xl overflow-hidden border border-ink/8">
            <div className="aspect-[5/4] relative bg-ink overflow-hidden">
              <div className="absolute inset-0 orb-tech opacity-90"></div>
              <svg className="absolute inset-0 w-full h-full opacity-25" viewBox="0 0 200 200" preserveAspectRatio="none">
                <defs>
                  <pattern id="grid2" width="20" height="20" patternUnits="userSpaceOnUse">
                    <path d="M 20 0 L 0 0 0 20" fill="none" stroke="white" strokeWidth="0.3" />
                  </pattern>
                </defs>
                <rect width="200" height="200" fill="url(#grid2)" />
              </svg>
              {/* lab bench - flasks */}
              <div className="absolute bottom-10 left-10 right-10 flex items-end justify-around gap-4">
                <svg width="60" height="100" viewBox="0 0 60 100">
                  <path d="M22 10 L22 35 L8 80 Q5 92 18 92 L42 92 Q55 92 52 80 L38 35 L38 10 Z" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.6)" />
                  <path d="M8 80 Q5 92 18 92 L42 92 Q55 92 52 80 Z" fill="rgba(181,192,164,0.6)" />
                  <line x1="20" y1="6" x2="40" y2="6" stroke="white" strokeWidth="2" />
                </svg>
                <svg width="50" height="80" viewBox="0 0 50 80">
                  <rect x="15" y="6" width="20" height="68" rx="2" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.6)" />
                  <rect x="15" y="40" width="20" height="34" fill="rgba(31,115,199,0.5)" />
                  <line x1="13" y1="6" x2="37" y2="6" stroke="white" strokeWidth="2" />
                </svg>
                <svg width="80" height="100" viewBox="0 0 80 100">
                  <rect x="10" y="20" width="60" height="50" rx="4" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.5)" />
                  <circle cx="40" cy="45" r="14" fill="none" stroke="rgba(181,192,164,0.8)" />
                  <circle cx="40" cy="45" r="6" fill="rgba(181,192,164,0.6)" />
                  <text x="40" y="14" textAnchor="middle" fill="white" fontSize="7" fontFamily="monospace" letterSpacing="2">AI · CAM</text>
                </svg>
                <svg width="50" height="90" viewBox="0 0 50 90">
                  <path d="M15 8 L15 30 L8 75 Q6 84 16 84 L34 84 Q44 84 42 75 L35 30 L35 8 Z" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.6)" />
                  <path d="M8 75 Q6 84 16 84 L34 84 Q44 84 42 75 Z" fill="rgba(31,115,199,0.4)" />
                </svg>
              </div>
              <div className="absolute top-6 left-6">
                <div className="bg-white/90 backdrop-blur rounded-full px-4 py-1.5 text-[11px] tracking-[0.2em] text-tech uppercase">Module 02 · Beauty Tech</div>
              </div>
              <span className="absolute top-6 right-6 text-white/70">{Icons.Flask}</span>
            </div>
            <div className="p-7 lg:p-9 bg-white">
              <h3 className="font-serif-tc text-2xl text-ink">妝品生技實驗室</h3>
              <div className="font-display italic text-tech mt-1">Cosmetic Biotech Lab</div>
              <p className="text-sm text-ink-soft mt-4 leading-[1.9]">配置 AI 頭皮影像分析設備、皮膚檢測儀、配方實驗工作站，串聯數據檢測、配方研發與顧客諮詢的完整服務流程。</p>
              <div className="mt-5 flex flex-wrap gap-2">
                {["AI 影像分析儀", "皮膚檢測儀", "配方實驗台", "數位諮詢區"].map((t, i) =>
                <span key={i} className="inline-flex items-center text-[11px] px-2.5 py-1 rounded-full bg-beige border border-ink/8 text-ink-soft">{t}</span>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- FAQ ----------
const FAQS = [
{ q: "上課方式為何？需要每天到校嗎？", a: "本學程採混成模式：約 30% 線上同步直播或錄影課程（可隨時複習），約 70% 為週末實作工作坊，於中華科技大學南港校區進行。對在職族非常友善。" },
{ q: "16 學分修完後可以取得什麼？", a: "修畢可獲中華科技大學官方核發之「學分修習證明」，且這 16 學分為正式學程學分，可累計轉入生技系四年制學位學程。" },
{ q: "我沒有美容或科技背景，可以報名嗎？", a: "完全可以。本學程為 30+ 跨領域學員設計，課程從基礎建立。長照工作者、社區照顧員、二度就業者皆為核心歡迎對象。" },
{ q: "學費與材料金如何負擔？", a: "本學程獲教育部 30+ 大學計畫補助。學員享專業器材與耗材免費使用，包含原廠精油、AI 頭皮分析等。實際金額依招生年度公告，請於說明會或 LINE 諮詢取得最新方案。" },
{ q: "招生對象有限制嗎？", a: "凡 30 歲以上、對美容、長照、健康或職涯轉型有興趣者皆可報名。歡迎在職人員、社區居民、二度就業者一同參與。" }];


function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="py-24 lg:py-32 bg-white relative">
      <div className="max-w-5xl mx-auto px-6 lg:px-10">
        <div className="reveal grid lg:grid-cols-12 gap-10 mb-14">
          <div className="lg:col-span-5">
            <div className="text-[11px] tracking-[0.3em] text-tech uppercase mb-4">FAQ</div>
            <h2 className="font-serif-tc text-3xl lg:text-5xl text-ink leading-[1.2]">常見問題 <span className="font-display italic text-ink-muted">Q&amp;A</span></h2>
            <p className="mt-6 text-ink-soft leading-relaxed">找不到你的問題？歡迎透過下方 LINE 直接詢問。</p>
          </div>
          <div className="lg:col-span-7 space-y-3">
            {FAQS.map((it, i) =>
            <div key={i}
            onClick={() => setOpen(open === i ? -1 : i)}
            className={`bg-white border rounded-2xl px-6 py-5 cursor-pointer transition ${open === i ? 'border-tech/40' : 'border-ink/10 hover:border-tech/30'}`}>
                <div className="flex items-start justify-between gap-4">
                  <div className="flex items-start gap-4">
                    <span className="num-mark text-tech text-xl mt-0.5">{String(i + 1).padStart(2, '0')}</span>
                    <h4 className="font-serif-tc text-ink text-lg font-medium leading-snug">{it.q}</h4>
                  </div>
                  <div className={`flex-shrink-0 w-8 h-8 rounded-full border border-ink/15 flex items-center justify-center text-ink-muted mt-0.5 transition-transform ${open === i ? 'rotate-45' : ''}`}>
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1.5v11M1.5 7h11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
                  </div>
                </div>
                <div className="overflow-hidden transition-all" style={{ maxHeight: open === i ? 400 : 0 }}>
                  <div className="pt-4 pl-9 text-ink-soft leading-[1.9] text-[15px]">{it.a}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ---------- CTA ----------
function CTA() {
  return (
    <section id="cta" className="relative py-24 lg:py-32 overflow-hidden bg-ink text-white">
      <div className="absolute top-0 left-0 w-[600px] h-[600px] rounded-full opacity-30 blur-3xl" style={{ background: "radial-gradient(circle, #0055AA, transparent 70%)" }}></div>
      <div className="absolute bottom-0 right-0 w-[500px] h-[500px] rounded-full opacity-25 blur-3xl" style={{ background: "radial-gradient(circle, #889977, transparent 70%)" }}></div>

      <div className="relative max-w-5xl mx-auto px-6 lg:px-10 text-center reveal">
        <div className="inline-flex items-center gap-2 text-[11px] tracking-[0.3em] text-white/60 uppercase mb-6 px-4 py-2 rounded-full border border-white/15">
          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
          2026 秋季招生中｜名額有限
        </div>

        <h2 className="font-serif-tc text-4xl lg:text-6xl leading-[1.15] tracking-tight">
          把 <span className="font-display italic text-sage-light">30+</span> 的下半場，<br />交給<span className="text-tech-light">最值得</span>的選擇。
        </h2>

        <p className="mt-8 text-white/70 text-lg leading-[1.9] max-w-2xl mx-auto">
          說明會中，我們會帶你逐一了解課程地圖、補助申請、學分轉換流程，並一對一回答你的個人狀況。
        </p>

        <div className="mt-12 flex flex-col sm:flex-row gap-4 justify-center">
          <a href="https://forms.gle/TExTJjkqE7C89PUy5" target="_blank" rel="noopener" className="px-9 py-4 rounded-full bg-white text-ink font-medium inline-flex items-center justify-center gap-2 hover:bg-beige transition group">
            {Icons.Calendar}<span>立即報名 30+ 學程</span>
            <span className="group-hover:translate-x-1 transition">{Icons.ArrowRight}</span>
          </a>
          <a href="https://line.me/R/ti/p/@640doniy" target="_blank" rel="noopener" className="btn-ghost px-9 py-4 rounded-full font-medium inline-flex items-center justify-center gap-2">
            {Icons.MessageCircle}<span>LINE 即時諮詢</span>
          </a>
        </div>

        <div className="mt-12 grid sm:grid-cols-2 gap-6 max-w-2xl mx-auto pt-12 border-t border-white/10">
          <div>
            <div className="text-sage-light flex justify-center mb-2">{Icons.Pin}</div>
            <div className="text-sm text-white/90 font-medium">中華科技大學</div>
            <div className="text-xs text-white/50 mt-1">台北市南港區研究院路三段 245 號</div>
          </div>
          <div>
            <div className="text-sage-light flex justify-center mb-2">{Icons.Mail}</div>
            <div className="text-sm text-white/90 font-medium break-all">judychen1018444@gmail.com</div>
            <div className="text-xs text-white/50 mt-1">24 小時內回覆</div>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="bg-beige border-t border-ink/10 py-10">
      <div className="max-w-7xl mx-auto px-6 lg:px-10 flex flex-col lg:flex-row items-center justify-between gap-4 text-sm text-ink-muted">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-full bg-tech text-white flex items-center justify-center font-serif-tc font-bold text-xs">30+</div>
          <span className="font-serif-tc">中華科技大學 · 智慧樂活與妝品科技學分學程</span>
        </div>
        <div className="text-xs">© 2026 CUST Education. 教育部 30+ 大學計畫補助.</div>
      </div>
    </footer>);

}

function StickyLine() {
  return (
    <a href="https://line.me/R/ti/p/@640doniy" target="_blank" rel="noopener" id="line-cta" className="fixed bottom-6 right-6 z-50 group">
      <div className="bg-[#06C755] hover:bg-[#05B04A] text-white rounded-full pl-4 pr-5 py-3 shadow-2xl shadow-emerald-900/30 flex items-center gap-2.5 transition-all">
        <div className="w-9 h-9 rounded-full bg-white flex items-center justify-center">
          <svg viewBox="0 0 24 24" className="w-5 h-5 fill-[#06C755]">
            <path d="M12 2C6.48 2 2 5.59 2 10c0 2.61 1.55 4.93 3.95 6.41-.17.6-.99 3.39-1.02 3.61 0 0-.02.17.09.24.11.06.24.01.24.01.31-.04 3.59-2.34 4.16-2.74.84.12 1.71.18 2.58.18 5.52 0 10-3.59 10-8s-4.48-8-10-8z" />
          </svg>
        </div>
        <div className="leading-tight">
          <div className="text-[10px] tracking-wider opacity-80">FREE 1:1</div>
          <div className="text-sm font-medium">LINE 諮詢</div>
        </div>
      </div>
      <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-ping"></div>
      <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></div>
    </a>);

}

// ---------- ROOT ----------
function App() {
  useEffect(() => {
    const io = new IntersectionObserver((es) => es.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}}), { threshold: 0.08 });
    document.querySelectorAll('.reveal').forEach((el) => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight && r.bottom > 0) el.classList.add('in');else
      io.observe(el);
    });
    return () => io.disconnect();
  }, []);
  return (
    <>
      <Nav />
      <Hero />
      <PainHybrid />
      <Curriculum />
      <Benefits />
      <Facility />
      <FAQ />
      <CTA />
      <Footer />
      <StickyLine />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);