import React from "react";
import { createRoot } from "react-dom/client";
import {
  ArrowUpRight,
  Bot,
  BrainCircuit,
  Boxes,
  Globe2,
  Mail,
  MapPin,
  Phone,
  Sparkles,
  Workflow,
  Zap,
} from "lucide-react";
import "./styles.css";

const contacts = [
  { icon: Mail, label: "Email", value: "1968589075@qq.com", href: "mailto:1968589075@qq.com" },
  { icon: Phone, label: "Phone", value: "15587543527", href: "tel:15587543527" },
  { icon: MapPin, label: "Location", value: "深圳 · 龙岗", href: "#contact" },
];

const stats = [
  { value: "100K+", label: "单月 GMV / USD" },
  { value: "80%", label: "视觉资产成本降低" },
  { value: "50%", label: "运营人效提升" },
  { value: "95%", label: "店铺好评率" },
];

const projects = [
  {
    index: "01",
    title: "美客多智能约仓 Agent",
    type: "Supply Chain Automation",
    imageClass: "warehouse",
    summary:
      "针对 Mercado Libre 海外仓放仓无序、秒级抢占的问题，构建 24 小时自动监控与零延迟约仓流程。",
    points: ["影刀 RPA 多线程监控", "动态验证码识别", "Webhook 异步通知", "无人值守抢仓"],
    metric: "100% 自动化",
  },
  {
    index: "02",
    title: "跨模态电商主图 AIGC 工作流",
    type: "AI Creative Pipeline",
    imageClass: "aigc",
    summary:
      "基于 Stable Diffusion 的 Latent Space 特征保持能力，设计可控、批量、高保真的电商视觉生产线。",
    points: ["卖点图/场景图生成", "多语种模特本地化", "非破坏性风格迁移", "Tapnow 集成"],
    metric: "成本 -80%",
  },
  {
    index: "03",
    title: "Dify + RAG 智能客服机器人",
    type: "Customer Service Agent",
    imageClass: "support",
    summary:
      "挂载 SKU 说明书、平台规则与物流政策知识库，处理多语言、跨时区售后咨询与工单分流。",
    points: ["多模态 Agent", "RAG 检索增强", "Prompt 路由打分", "长记忆客诉处理"],
    metric: "80%+ 常见问题解决",
  },
  {
    index: "04",
    title: "Temu 本地仓自动发货工作流",
    type: "Order Fulfillment System",
    imageClass: "fulfillment",
    summary:
      "打通 Temu 后台与本地仓 ERP，完成订单抓取、库存检测、批量打单、单号回填的履约闭环。",
    points: ["Python API 调度", "RPA 异构系统串联", "批量打单出库", "秒级响应"],
    metric: "错误率趋近 0",
  },
];

const strengths = [
  {
    icon: Bot,
    title: "Agent 从 0 到 1 搭建",
    text: "熟悉 OpenClaw、Dify、Codex、Cursor 与 LLM APIs，能把业务 SOP 拆成可执行的 Agent、知识库与工作流。",
  },
  {
    icon: Workflow,
    title: "AI + RPA 自动化架构",
    text: "理解跨境电商后台、ERP、通知系统之间的真实断点，擅长用 Python、Webhook 与影刀完成低成本串联。",
  },
  {
    icon: Sparkles,
    title: "商业视觉 AIGC",
    text: "用 Stable Diffusion、MJ、Nano Banana、Image 2 等工具处理主图、卖点图、场景图与本地化素材生产。",
  },
  {
    icon: Globe2,
    title: "跨境运营业务判断",
    text: "具备 Mercado Libre 与 Temu 运营经验，能从履约、Listing、客服、物流周期等环节识别 AI 改造机会。",
  },
  {
    icon: BrainCircuit,
    title: "复杂问题结构化",
    text: "985 药学背景训练出的严谨分析能力，让技术方案不是炫技，而是服务明确的交付、成本与效率指标。",
  },
  {
    icon: Zap,
    title: "快速落地与复盘",
    text: "偏向先跑通闭环，再用数据校正流程：抢仓成功率、履约错误率、售后分流率都能成为优化依据。",
  },
];

function Navbar() {
  return (
    <header className="navbar">
      <a className="brand" href="#hero" aria-label="回到首页">
        <span className="brand-mark">LYJ</span>
        <span>AI Ops Portfolio</span>
      </a>
      <nav>
        <a href="#experience">经历</a>
        <a href="#projects">项目</a>
        <a href="#strengths">优势</a>
        <a href="#contact">联系</a>
      </nav>
      <a className="nav-cta" href="mailto:1968589075@qq.com">
        联系我 <ArrowUpRight size={16} />
      </a>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero section" id="hero">
      <video
        className="hero-video"
        src="https://videos.pexels.com/video-files/3129957/3129957-uhd_2560_1440_25fps.mp4"
        autoPlay
        muted
        loop
        playsInline
      />
      <div className="hero-fallback" aria-hidden="true" />
      <div className="hero-grid" aria-hidden="true" />
      <Navbar />
      <div className="container hero-content">
        <div className="eyebrow">
          <span className="pulse-dot" />
          Agent Developer / AI Designer / Cross-border Operator
        </div>
        <h1>
          把跨境电商业务，
          <span>重新用 AI 做一遍。</span>
        </h1>
        <p>
          我是吕俊源，专注 AI Agent 开发、AIGC 商业视觉与跨境运营自动化。擅长把履约、客服、Listing、
          内容生产这些真实业务环节，拆解成可以运行、可以复盘、可以扩张的智能工作流。
        </p>
        <div className="hero-actions">
          <a className="primary-btn" href="#projects">
            查看精选项目 <ArrowUpRight size={18} />
          </a>
          <a className="ghost-btn" href="mailto:1968589075@qq.com">
            预约沟通
          </a>
        </div>
      </div>
      <div className="hero-bottom">
        <span>Based in Shenzhen</span>
        <span>AI Transformation · E-commerce Automation · AIGC Workflow</span>
      </div>
    </section>
  );
}

function Experience() {
  return (
    <section className="section experience" id="experience">
      <div className="container two-column">
        <div className="portrait-card">
          <div className="portrait-orbit" />
          <div className="portrait">
            <span>吕</span>
          </div>
          <div className="portrait-caption">
            <strong>吕俊源</strong>
            <small>AI 数字化负责人 / 跨境运营</small>
          </div>
        </div>

        <div className="bio-panel">
          <div className="section-kicker">Experience</div>
          <h2>业务一线长出来的 AI 落地能力</h2>
          <p>
            2024 至 2026 年在武汉胖虎贸易有限公司负责 Mercado Libre 与 Temu 平台运营，并主导内部运营体系
            AI 化改造。我的优势不是只会调用工具，而是能站在业务目标、平台规则、团队成本与工程可行性之间，找到真正值得自动化的节点。
          </p>
          <div className="timeline">
            <div>
              <span>2024/03 - 2026/03</span>
              <strong>跨境运营 · AI 转型先行者</strong>
              <p>负责美客多店铺从 0 到 1 运营，单月 GMV 达成 10 万美元+，引入采集、上架、关键词优化与履约自动化。</p>
            </div>
            <div>
              <span>2019/09 - 2023/06</span>
              <strong>中国海洋大学 · 药学本科</strong>
              <p>985/211 理工科训练，形成严谨拆解复杂系统、验证变量与复盘结果的工作习惯。</p>
            </div>
          </div>
          <div className="contact-strip">
            {contacts.map(({ icon: Icon, label, value, href }) => (
              <a href={href} key={label}>
                <Icon size={18} />
                <span>{value}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
      <div className="container stat-row">
        {stats.map((item) => (
          <div className="stat-card" key={item.label}>
            <strong>{item.value}</strong>
            <span>{item.label}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Projects() {
  return (
    <section className="section projects" id="projects">
      <div className="container section-heading">
        <div>
          <div className="section-kicker">Selected Work</div>
          <h2>精选项目</h2>
        </div>
        <p>
          这些项目都来自跨境业务现场：不是概念 Demo，而是围绕效率、成本、响应速度与准确率做出的可交付系统。
        </p>
      </div>
      <div className="container project-grid">
        {projects.map((project) => (
          <article className="project-card" key={project.title}>
            <div className={`project-visual ${project.imageClass}`}>
              <span>{project.index}</span>
              <div className="visual-core" />
            </div>
            <div className="project-copy">
              <div className="project-type">{project.type}</div>
              <h3>{project.title}</h3>
              <p>{project.summary}</p>
              <div className="project-tags">
                {project.points.map((point) => (
                  <span key={point}>{point}</span>
                ))}
              </div>
              <div className="project-metric">
                <Boxes size={18} />
                {project.metric}
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function Strengths() {
  return (
    <section className="section strengths" id="strengths">
      <div className="container section-heading">
        <div>
          <div className="section-kicker">Capabilities</div>
          <h2>个人优势</h2>
        </div>
        <p>我更关心 AI 如何进入业务现场：理解需求、设计流程、接入工具、跑通闭环，再用数据继续打磨。</p>
      </div>
      <div className="container strength-grid">
        {strengths.map(({ icon: Icon, title, text }) => (
          <article className="strength-card" key={title}>
            <div className="icon-box">
              <Icon size={24} />
            </div>
            <h3>{title}</h3>
            <p>{text}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="section contact" id="contact">
      <div className="container contact-inner">
        <div className="section-kicker">Let&apos;s Build</div>
        <h2>
          如果你的业务也有重复流程、隐性成本和增长卡点，
          <span>我们可以一起把它 AI 化。</span>
        </h2>
        <p>
          我正在寻找个人及企业 AI 数字化、智能化转型的终极解决方案。每一项业务，都有用 AI 重新做一遍的潜力。
        </p>
        <div className="contact-actions">
          <a className="primary-btn" href="mailto:1968589075@qq.com">
            发送邮件 <Mail size={18} />
          </a>
          <a className="ghost-btn" href="tel:15587543527">
            电话沟通 <Phone size={18} />
          </a>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Hero />
      <Experience />
      <Projects />
      <Strengths />
      <Contact />
    </>
  );
}

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