import React, { useState, useEffect } from 'react';
import { 
  Play, 
  Mic2, 
  Users, 
  Target, 
  Award, 
  Video, 
  ArrowRight, 
  Briefcase,
  Instagram,
  Facebook,
  Youtube,
  Menu,
  X,
  CheckCircle2,
  Globe2,
  Lightbulb,
  BarChart3
} from 'lucide-react';

// Mock Data based on the PDF content
const guestTypes = [
  {
    title: "企業家訪談",
    subtitle: "Enterprise",
    desc: "呈現企業成長歷程、關鍵決策與翻盤思維。以第一視角分享管理、擴張、品牌與組織升級的真實故事。",
    icon: <Briefcase className="w-8 h-8 text-amber-500" />
  },
  {
    title: "名人訪談",
    subtitle: "Celebrity",
    desc: "透過真實人生故事、轉折與選擇，展示影響力的形成過程與背後的價值觀，挖掘光環之外的真實與力量。",
    icon: <Award className="w-8 h-8 text-amber-500" />
  },
  {
    title: "創業者訪談",
    subtitle: "Startup",
    desc: "聚焦創業初期的困境、試錯與突破，分享從零到一的策略、執行與心智模型，成為正在努力者的同行力量。",
    icon: <Lightbulb className="w-8 h-8 text-amber-500" />
  }
];

const programSteps = [
  {
    step: "01",
    title: "榮耀開場",
    subtitle: "建立受訪者高度",
    desc: "用過往成功經歷、高光時刻做開場，打造「值得學習的角色」而非單純曝光。"
  },
  {
    step: "02",
    title: "回到起點",
    subtitle: "讓人物變得真實有溫度",
    desc: "探討事業最痛的時刻、最孤單的決策，建立情感共鳴與人性深度。"
  },
  {
    step: "03",
    title: "決策瞬間",
    subtitle: "商業方法論拆解",
    desc: "關鍵決策 × 破局策略 × 心智模型，形成可以流傳與複製的「決策方法論」。"
  },
  {
    step: "04",
    title: "結語啟發",
    subtitle: "精神高度與價值延伸",
    desc: "617 旁白 × 受訪者肖像 × 感性收束，讓受訪者成為啟發他人的「時代導師」。"
  }
];

const valueProps = [
  {
    title: "品牌故事升級",
    desc: "將企業價值、文化與信念透過敘事傳遞到市場與消費者心裡。",
  },
  {
    title: "老闆人設定位",
    desc: "塑造有智慧、有溫度、有決策高度的意見領袖形象。",
  },
  {
    title: "內容長尾傳播",
    desc: "拆解為短影音 & 金句圖卡，形成持續擴散與曝光。",
  },
  {
    title: "強大資源鏈結",
    desc: "透過同學會的企業家聯盟，對接商務、網紅、VC 等強大資源。",
  }
];

const audienceStats = [
  { label: "核心年齡", value: "30歲+", desc: "具備消費力與決策權" },
  { label: "男女比例", value: "6:4", desc: "男性 60% / 女性 40%" },
  { label: "核心區域", value: "一線城市", desc: "北上廣深、台北" },
  { label: "職業分佈", value: "決策者", desc: "創業者、高管、自由職人" },
];

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name: "節目介紹", href: "#intro" },
    { name: "敘事邏輯", href: "#methodology" },
    { name: "主持人 617", href: "#host" },
    { name: "受訪價值", href: "#value" },
  ];

  return (
    <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-slate-900 shadow-lg py-3' : 'bg-transparent py-5'}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center">
          <div className="flex items-center">
            <span className="text-2xl font-bold tracking-tighter text-white">
              617<span className="text-amber-500">同學會</span>
            </span>
          </div>
          
          {/* Desktop Nav */}
          <div className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <a 
                key={link.name} 
                href={link.href} 
                className="text-sm font-medium text-slate-300 hover:text-amber-400 transition-colors"
              >
                {link.name}
              </a>
            ))}
            <button className="bg-amber-600 hover:bg-amber-700 text-white px-5 py-2 rounded-full text-sm font-medium transition-colors flex items-center">
              <Mic2 className="w-4 h-4 mr-2" /> 預約訪談
            </button>
          </div>

          {/* Mobile Menu Button */}
          <div className="md:hidden">
            <button onClick={() => setIsOpen(!isOpen)} className="text-white">
              {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Nav */}
      {isOpen && (
        <div className="md:hidden absolute top-full left-0 w-full bg-slate-900 shadow-xl py-4 px-4 flex flex-col space-y-4 border-t border-slate-800">
          {navLinks.map((link) => (
            <a 
              key={link.name} 
              href={link.href} 
              onClick={() => setIsOpen(false)}
              className="text-slate-300 font-medium block py-2 border-b border-slate-800 hover:text-amber-500"
            >
              {link.name}
            </a>
          ))}
          <button className="w-full bg-amber-600 text-white py-3 rounded-lg font-medium">
            預約訪談
          </button>
        </div>
      )}
    </nav>
  );
};

const Hero = () => (
  <div className="relative min-h-screen flex items-center justify-center bg-slate-950 overflow-hidden">
    {/* Background Decorative Elements */}
    <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
       {/* Subtle grid pattern */}
       <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
       <div className="absolute -top-24 -left-24 w-96 h-96 rounded-full bg-blue-900/20 blur-3xl"></div>
       <div className="absolute bottom-0 right-0 w-[500px] h-[500px] rounded-full bg-amber-900/10 blur-3xl"></div>
    </div>

    <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-20">
      <div className="inline-flex items-center px-4 py-2 rounded-full bg-slate-800/50 border border-amber-500/30 text-amber-400 mb-8 backdrop-blur-md animate-fade-in-up">
        <Globe2 className="w-4 h-4 mr-2" />
        兩岸商業觀點 × 資源鏈結 × 深度人物訪談
      </div>
      
      <h1 className="text-5xl md:text-7xl font-extrabold text-white tracking-tight mb-6 leading-tight">
        以<span className="text-amber-500">兩岸視角</span><br className="md:hidden" />
        拆解可複製的<br/>
        <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-yellow-500">人生方法論</span>
      </h1>
      
      <p className="mt-6 max-w-3xl mx-auto text-xl text-slate-400 mb-12 leading-relaxed font-light">
        我們相信：每一位穿越低谷仍選擇前行的人，都值得被世界看見與學習。<br/>
        《617同學會》專注拆解企業家面對重大抉擇時的思考方式與翻盤策略。
      </p>
      
      <div className="flex flex-col sm:flex-row justify-center gap-4">
        <button className="px-8 py-4 bg-amber-600 hover:bg-amber-700 text-white rounded-lg font-bold text-lg transition-all hover:scale-105 flex items-center justify-center shadow-lg shadow-amber-900/50">
          <Play className="w-5 h-5 mr-2 fill-current" />
          觀看最新訪談
        </button>
        <button className="px-8 py-4 bg-transparent hover:bg-white/5 text-white border border-slate-700 rounded-lg font-bold text-lg transition-all flex items-center justify-center">
          下載節目企劃書
        </button>
      </div>

      {/* Platform Logos Strip (Conceptual) */}
      <div className="mt-20 pt-10 border-t border-slate-800/50">
        <p className="text-slate-500 text-sm mb-6 uppercase tracking-widest">播出平台與合作夥伴</p>
        <div className="flex flex-wrap justify-center gap-8 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
          {['YouTube', 'TikTok', 'Bilibili', '小紅書', '視頻號', 'Facebook'].map((platform) => (
            <span key={platform} className="text-lg font-bold text-slate-300">{platform}</span>
          ))}
        </div>
      </div>
    </div>
  </div>
);

const IntroSection = () => (
  <section id="intro" className="py-24 bg-white relative">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="text-center mb-16">
        <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">關於《617同學會》</h2>
        <div className="w-20 h-1 bg-amber-500 mx-auto rounded-full"></div>
        <p className="mt-6 text-lg text-slate-600 max-w-3xl mx-auto leading-relaxed">
          這是一檔深度人物訪談節目。透過兩岸不同視角與背景的碰撞，提煉可被理解、可被借鑑、可被複製的成長心智與商業邏輯。
          讓每一位觀看者，都能在他人的故事裡找到答案、方向與前行的力量。
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {guestTypes.map((item, index) => (
          <div key={index} className="bg-slate-50 p-8 rounded-2xl border border-slate-100 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group">
            <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition-transform">
              {item.icon}
            </div>
            <div className="text-xs font-bold text-amber-600 mb-2 uppercase tracking-wider">{item.subtitle}</div>
            <h3 className="text-2xl font-bold text-slate-900 mb-4">{item.title}</h3>
            <p className="text-slate-600 leading-relaxed">
              {item.desc}
            </p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const MethodologySection = () => (
  <section id="methodology" className="py-24 bg-slate-900 text-white relative overflow-hidden">
    {/* Background accent */}
    <div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-slate-800 to-transparent opacity-50"></div>
    
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div className="mb-16 md:w-1/2">
        <h2 className="text-3xl md:text-4xl font-bold mb-4">節目的敘事節奏</h2>
        <h3 className="text-xl text-amber-500 font-medium">打造「人設」的底層邏輯</h3>
        <p className="mt-6 text-slate-400 leading-relaxed">
          我們不只做訪談，更是在構建一個完整的商業與人生模型。從榮耀到低谷，再到反轉與昇華，四個步驟精準拆解受訪者的核心價值。
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {programSteps.map((step, index) => (
          <div key={index} className="bg-slate-800/50 backdrop-blur-sm p-6 rounded-xl border border-slate-700 hover:border-amber-500/50 transition-colors group">
            <div className="text-5xl font-black text-slate-700 mb-4 group-hover:text-amber-500/20 transition-colors">{step.step}</div>
            <h4 className="text-xl font-bold text-white mb-1">{step.title}</h4>
            <div className="text-sm text-amber-500 mb-4 font-medium">{step.subtitle}</div>
            <p className="text-slate-400 text-sm leading-relaxed">
              {step.desc}
            </p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const HostSection = () => (
  <section id="host" className="py-24 bg-white">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
        <div className="order-2 lg:order-1">
          <div className="inline-flex items-center px-3 py-1 rounded bg-amber-100 text-amber-800 text-xs font-bold mb-4">
            HOST / INTERVIEWER
          </div>
          <h2 className="text-4xl font-bold text-slate-900 mb-6">
            主持人 617 <span className="text-slate-400 text-2xl font-normal">劉易蓁</span>
          </h2>
          <h3 className="text-xl text-slate-700 font-medium mb-6 italic border-l-4 border-amber-500 pl-4">
            「他不是站在旁邊提問的主持人，而是真正踩在戰場上的企業家與操盤手。」
          </h3>
          
          <div className="space-y-6 text-slate-600 leading-relaxed">
            <p>
              台灣連續創業家，擁有 15+ 年商業操盤經驗。他理解創業者的壓力、掙扎、選擇與深度思考，因此能問出最核心的商業本質。
            </p>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-8 mt-8">
              {[
                "旗下電商品牌營收累計突破億元",
                "操盤社群內容累計觀看數達數億",
                "百家企業顧問與品牌策略指導",
                "跨兩岸市場操作能力與商業洞察",
                "超過百場企業級演講主講人",
                "暢銷書作者與雜誌出版人"
              ].map((item, i) => (
                <div key={i} className="flex items-start">
                  <CheckCircle2 className="w-5 h-5 text-amber-500 mr-2 flex-shrink-0 mt-0.5" />
                  <span className="text-sm font-medium text-slate-800">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        
        <div className="order-1 lg:order-2 relative">
          <div className="aspect-[3/4] rounded-2xl bg-slate-200 overflow-hidden relative z-10 shadow-2xl">
             {/* Placeholder for 617 Image */}
             <div className="w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 flex flex-col items-center justify-center text-slate-500">
                <Users className="w-24 h-24 mb-4 opacity-30 text-amber-500" />
                <span className="text-white/30 font-bold tracking-widest">617 PORTRAIT</span>
             </div>
          </div>
          {/* Decorative elements */}
          <div className="absolute -top-10 -right-10 w-40 h-40 bg-amber-100 rounded-full opacity-50 blur-2xl"></div>
          <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-blue-100 rounded-full opacity-50 blur-2xl"></div>
        </div>
      </div>
    </div>
  </section>
);

const AudienceValueSection = () => (
  <section id="value" className="py-24 bg-slate-50">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      
      {/* Audience Profile */}
      <div className="mb-20">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-slate-900">誰在觀看《617同學會》？</h2>
          <p className="text-slate-500 mt-2">匯聚兩岸最具成長動力的商業菁英群體</p>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {audienceStats.map((stat, index) => (
            <div key={index} className="bg-white p-6 rounded-xl text-center shadow-sm border border-slate-100">
              <div className="text-slate-400 text-xs font-bold mb-2">{stat.label}</div>
              <div className="text-2xl md:text-3xl font-black text-slate-800 mb-1">{stat.value}</div>
              <div className="text-amber-600 text-xs font-medium">{stat.desc}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Value for Guests */}
      <div className="bg-slate-900 rounded-3xl p-8 md:p-16 text-white relative overflow-hidden">
        <div className="absolute top-0 right-0 w-full h-full opacity-10 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-amber-500 via-slate-900 to-slate-900"></div>
        
        <div className="relative z-10">
          <div className="md:w-2/3 mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">參與訪談的核心價值</h2>
            <p className="text-lg text-slate-300 leading-relaxed">
              這不僅僅是一次曝光，而是「人物權威」與「品牌高認知」的深度構建。
              我們讓老闆成為品牌最好的代言人，將商業靈魂轉化為市場影響力。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {valueProps.map((prop, index) => (
              <div key={index} className="flex items-start p-6 bg-white/5 rounded-xl border border-white/10 hover:bg-white/10 transition-colors">
                <div className="mr-4 mt-1">
                  <Target className="w-6 h-6 text-amber-400" />
                </div>
                <div>
                  <h4 className="text-xl font-bold text-white mb-2">{prop.title}</h4>
                  <p className="text-slate-400 text-sm leading-relaxed">
                    {prop.desc}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="bg-slate-950 text-slate-400 py-16 border-t border-slate-900">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-4 gap-12">
      <div className="col-span-1 md:col-span-2">
        <span className="text-2xl font-bold text-white block mb-4">
          617<span className="text-amber-500">同學會</span>
        </span>
        <p className="max-w-sm text-sm leading-relaxed mb-6">
          申島會(上海)傳媒科技有限公司<br/>
          專注於打造兩岸商業觀點與資源鏈結的內容平台。
          我們致力於挖掘每一個值得被看見的故事，連結每一個渴望成長的靈魂。
        </p>
        <div className="flex space-x-4">
           <a href="#" className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-red-600 hover:text-white transition-colors"><Youtube className="w-5 h-5" /></a>
           <a href="#" className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-black hover:text-white transition-colors border border-slate-700"><div className="font-bold text-xs">Tik</div></a>
           <a href="#" className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 hover:text-white transition-colors"><Facebook className="w-5 h-5" /></a>
        </div>
      </div>

      <div>
        <h4 className="text-white font-bold mb-4">節目資訊</h4>
        <ul className="space-y-2 text-sm">
          <li><a href="#intro" className="hover:text-white transition-colors">節目介紹</a></li>
          <li><a href="#host" className="hover:text-white transition-colors">關於主持人</a></li>
          <li><a href="#value" className="hover:text-white transition-colors">受訪者價值</a></li>
          <li><a href="#" className="hover:text-white transition-colors">過往嘉賓</a></li>
        </ul>
      </div>

      <div>
        <h4 className="text-white font-bold mb-4">聯絡我們</h4>
        <ul className="space-y-2 text-sm">
          <li className="flex items-center"><Globe2 className="w-4 h-4 mr-2 text-amber-500" /> 上海市 / 台北市</li>
          <li className="flex items-center"><Briefcase className="w-4 h-4 mr-2 text-amber-500" /> 商務合作：contact@617class.com</li>
          <li className="mt-4 text-xs text-slate-500">
            申島會(上海)傳媒科技有限公司<br/>
            Copyright © 2024 All rights reserved.
          </li>
        </ul>
      </div>
    </div>
  </footer>
);

const App = () => {
  return (
    <div className="font-sans antialiased text-slate-900 bg-white selection:bg-amber-100 selection:text-amber-900">
      <Navigation />
      <main>
        <Hero />
        <IntroSection />
        <MethodologySection />
        <HostSection />
        <AudienceValueSection />
      </main>
      <Footer />
    </div>
  );
};

export default App;