import { useMemo } from "react";
import { motion } from "framer-motion";
import {
  Landmark,
  Sparkles,
  Waves,
  BookOpen,
  Trees,
  Music2,
  Sunrise,
  Building2,
} from "lucide-react";

const heroBackground =
  "https://public.youware.com/users-website-assets/prod/6af5b800-cf91-4e0b-8c67-61200ed1838f/20dafed544804ba893d733b17b339217.jpg";

const timeline = [
  {
    year: "Thế kỷ 19",
    title: "Từ kênh Charner đến đại lộ lịch sử",
    description:
      "Khu vực từng là kênh Charner – tuyến giao thương quan trọng nối Sài Gòn với bến Bạch Đằng, sau đó được lấp và trở thành đại lộ Nguyễn Huệ mang phong vị Đông – Tây giao hòa.",
  },
  {
    year: "1956",
    title: "Đại lộ Nguyễn Huệ trong nhịp sống đô thị",
    description:
      "Con đường trở thành trung tâm hành chính – thương mại của Sài Gòn với các tòa nhà biểu tượng như Trụ sở Ủy ban Nhân dân Thành phố, khách sạn Rex, thương xá Tax.",
  },
  {
    year: "2015",
    title: "Khánh thành phố đi bộ hiện đại",
    description:
      "Ngày 29/04/2015, quảng trường Nguyễn Huệ chính thức hoạt động với hệ thống phun nước, sân khấu sự kiện ngoài trời, wifi công cộng và mặt lát đá granite trang trọng.",
  },
  {
    year: "2016 - nay",
    title: "Trung tâm lễ hội của Thành phố Hồ Chí Minh",
    description:
      "Đường hoa Tết, Countdown đêm giao thừa, Festival Ánh sáng và các chương trình âm nhạc đường phố biến nơi đây thành điểm hẹn văn hóa – giải trí nổi bật nhất trung tâm.",
  },
];

const experiences = [
  {
    icon: Landmark,
    title: "Ngắm kiến trúc biểu tượng",
    description:
      "Bắt đầu từ trụ sở Ủy ban Nhân dân Thành phố, dạo qua chung cư 42 Nguyễn Huệ và kết thúc ở bến Bạch Đằng để cảm nhận sự chuyển mình từ di sản Pháp đến skyline hiện đại.",
    intensity: 0.92,
    pillar: "Kiến trúc",
  },
  {
    icon: Music2,
    title: "Hòa cùng biểu diễn đường phố",
    description:
      "Tối cuối tuần, các ban nhạc trẻ, nhóm nhảy K-pop, nghệ sĩ đờn ca tài tử và DJ thay phiên khuấy động cả tuyến phố – trải nghiệm sóng âm lan tỏa khắp quảng trường.",
    intensity: 0.88,
    pillar: "Nghệ thuật",
  },
  {
    icon: BookOpen,
    title: "Tản bộ qua phố sách và gallery",
    description:
      "Ghé Fahasa Book Street, Saigon Garden hay triển lãm nghệ thuật pop-up để khám phá những câu chuyện về văn hóa Sài Gòn qua sách ảnh, sưu tập poster và nghệ thuật thị giác.",
    intensity: 0.74,
    pillar: "Tri thức",
  },
  {
    icon: Waves,
    title: "Chạm nhịp sông Sài Gòn",
    description:
      "Đoạn cuối phố mở ra bến Bạch Đằng – nơi bạn có thể lên tàu ngắm cảnh đêm, hoặc đơn giản là hít thở làn gió sông mát lạnh, ngắm Landmark 81 bừng sáng phía xa.",
    intensity: 0.81,
    pillar: "Thiên nhiên",
  },
];

const culinaryStops = [
  {
    title: "Chung cư 42 Nguyễn Huệ",
    details:
      "Tổ hợp quán cà phê và studio sáng tạo – từ cà phê muối, trà sữa đến các concept store nội địa, lý tưởng cho những khung ảnh đầy màu sắc.",
  },
  {
    title: "Bánh tráng nướng & nước mía",
    details:
      "Những xe đẩy dọc phố phục vụ món ăn đường phố quen thuộc với sốt me cay, mỡ hành và topping phong phú, làm nên hương vị đặc trưng của phố đêm Sài Gòn.",
  },
  {
    title: "Skybar Bitexco & Saigon Saigon Bar",
    details:
      "Từ các rooftop lân cận, bạn có thể chiêm ngưỡng toàn cảnh quảng trường đỏ rực và dòng người rộn ràng cho đến tận khuya.",
  },
];

const signatureEvents = [
  {
    name: "Đường hoa Tết Nguyễn Huệ 2026",
    highlight:
      "Trải dài hơn 600m với chủ đề Di sản – Sáng tạo – Hội nhập, đường hoa quy tụ nghệ thuật sắp đặt, ánh sáng thông minh và không gian trải nghiệm tương tác AR.",
    time: "Tháng 1/2026",
  },
  {
    name: "New Year Countdown 2026",
    highlight:
      "Sân khấu 360° kết hợp pháo hoa nghệ thuật, màn trình diễn drone light show và âm thanh đa kênh thu hút hàng chục ngàn người dân lẫn du khách.",
    time: "Đêm 31/12/2025",
  },
  {
    name: "Festival Ánh sáng & Multimedia",
    highlight:
      "Các mapping nghệ thuật biến mặt tiền tòa nhà thành bức tranh số, cùng khu trải nghiệm thực tế mở rộng kể chuyện lịch sử Sài Gòn bằng ngôn ngữ ánh sáng.",
    time: "Quý III/2025",
  },
];

const natureMoments = [
  {
    icon: Trees,
    title: "Vườn hoa chủ đề",
    description:
      "Cụm tiểu cảnh thay đổi mỗi mùa với hoa giấy, cúc họa mi, hướng dương và mô hình nghệ thuật đất nung từ các làng nghề Nam Bộ.",
  },
  {
    icon: Sunrise,
    title: "Bình minh trên sông",
    description:
      "Khung giờ 5h30 – 6h30 sáng, ánh vàng phản chiếu lên kính của tháp Bitexco, tạo nên sắc đỏ cam rực rỡ trên toàn quảng trường.",
  },
  {
    icon: Building2,
    title: "Đêm đô thị",
    description:
      "Hệ thống đèn LED thông minh thay đổi màu theo nhạc; các tòa nhà quanh phố đồng bộ ánh sáng, tạo thành màn trình diễn panorama sống động.",
  },
  {
    icon: Sparkles,
    title: "Không gian nghệ thuật số",
    description:
      "Các triển lãm đa giác quan sử dụng cảm biến chuyển động và màn hình LED cong để tái hiện lịch sử – văn hóa bằng hiệu ứng ánh sáng đỏ rực.",
  },
];

const sources = [
  {
    label: "Vinpearl",
    url: "https://vinpearl.com/en/nguyen-hue-walking-street-heart-of-ho-chi-minh-citys-vibrant-nights",
  },
  {
    label: "HoaBinh Tourist",
    url: "https://hoabinhtourist.com/en/blog/nguyen-hue-walking-street",
  },
  {
    label: "SVietnam Travel",
    url: "https://www.svietnamtravel.com/explore/vietnam/nguyen-hue-walking-street-ho-chi-minh-city",
  },
];

const springVariants = {
  hidden: { opacity: 0, y: 40 },
  visible: { opacity: 1, y: 0 },
};

const intensityToGradient = (value: number) => {
  const clamp = Math.max(0, Math.min(1, value));
  const eased = 1 - Math.pow(1 - clamp, 2.2);
  const start = { r: 255, g: 228, b: 230 };
  const end = { r: 153, g: 0, b: 0 };
  const current = {
    r: Math.round(start.r + (end.r - start.r) * eased),
    g: Math.round(start.g + (end.g - start.g) * eased),
    b: Math.round(start.b + (end.b - start.b) * eased),
  };

  return `linear-gradient(135deg, rgba(${current.r}, ${current.g}, ${current.b}, 0.9), rgba(255, 0, 0, 0.65))`;
};

function App() {
  const peakMoments = useMemo(() => {
    const total = signatureEvents.length;
    const grouped = signatureEvents.reduce<Record<string, number>>((acc, event) => {
      const season = event.time.includes("1/")
        ? "Mùa Xuân"
        : event.time.includes("31/12")
        ? "Mùa Đông"
        : "Mùa Lễ hội";
      return { ...acc, [season]: (acc[season] ?? 0) + 1 };
    }, {});

    return Object.entries(grouped).map(([season, count]) => ({
      season,
      weight: Math.round((count / total) * 100),
    }));
  }, []);

  return (
    <main className="min-h-screen bg-[#270000] text-[#FDE8E8]">
      <section className="relative overflow-hidden">
        <div
          className="absolute inset-0 opacity-60"
          style={{
            backgroundImage: `url(${heroBackground})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            filter: "saturate(120%)",
          }}
        />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,#ff4b4b33,transparent)]" />
        <div className="relative px-6 py-24 md:py-32 lg:py-40 mx-auto max-w-6xl">
          <motion.div
            initial={{ opacity: 0, y: 60 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="max-w-3xl"
          >
            <span className="uppercase tracking-[0.4em] text-[#FFB3B3] text-xs md:text-sm">
              Điểm hẹn văn hóa Sài Gòn
            </span>
            <h1 className="mt-4 text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight text-white">
              Phố đi bộ Nguyễn Huệ — sắc đỏ kết nối truyền thống và hiện đại
            </h1>
            <p className="mt-6 text-base md:text-lg lg:text-xl text-[#FFE4E6] leading-relaxed">
              Trải dài 670 mét giữa lòng Quận 1, tuyến phố rực rỡ mang đến những đêm lễ hội
              bất tận, những cuộc gặp gỡ nghệ thuật đường phố và cảm giác sống động của một
              thành phố luôn hướng về tương lai.
            </p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4, duration: 0.8, ease: "easeOut" }}
            className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"
          >
            {[
              {
                label: "Chiều dài",
                value: "670 m",
                note: "Quảng trường lát đá granite liên tục",
              },
              {
                label: "Tâm điểm",
                value: "Trung tâm Quận 1",
                note: "Kết nối bến Bạch Đằng – UBND TP.HCM",
              },
              {
                label: "Sự kiện thường niên",
                value: "20+",
                note: "Festival, triển lãm, trình diễn âm nhạc",
              },
              {
                label: "Giờ cao điểm",
                value: "19h – 22h",
                note: "Đông nhất vào cuối tuần và dịp lễ",
              },
            ].map((item) => (
              <div
                key={item.label}
                className="rounded-3xl bg-[rgba(255,0,0,0.16)] border border-[rgba(255,255,255,0.24)] backdrop-blur-lg p-6"
              >
                <p className="text-sm uppercase tracking-[0.3em] text-[#FFB4B4]">
                  {item.label}
                </p>
                <p className="mt-3 text-2xl font-semibold text-white">{item.value}</p>
                <p className="mt-2 text-sm text-[#FFD9D9]">{item.note}</p>
              </div>
            ))}
          </motion.div>
        </div>
      </section>

      <section className="relative bg-[#1A0000]">
        <div className="absolute inset-x-0 -top-24 h-24 bg-[radial-gradient(circle_at_top,rgba(255,59,59,0.35),transparent)]" />
        <div className="max-w-6xl mx-auto px-6 py-20">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.3 }}
            variants={springVariants}
            transition={{ duration: 0.7, ease: "easeOut" }}
            className="max-w-3xl"
          >
            <h2 className="text-3xl md:text-4xl font-semibold text-white">
              Dòng thời gian của một đại lộ huyền thoại
            </h2>
            <p className="mt-4 text-[#FFCDD2] text-base md:text-lg">
              Mỗi giai đoạn ghi dấu sự chuyển mình của Sài Gòn – Thành phố Hồ Chí Minh, từ
              thương cảng náo nhiệt đến không gian công cộng sáng tạo bật nhất Việt Nam.
            </p>
          </motion.div>
          <div className="mt-12 grid gap-8 md:grid-cols-2">
            {timeline.map((entry, index) => (
              <motion.article
                key={entry.title}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, amount: 0.4 }}
                variants={springVariants}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="rounded-3xl border border-[rgba(255,255,255,0.15)] bg-[rgba(64,0,0,0.55)] p-8 shadow-[0_25px_60px_-40px_rgba(255,0,0,0.75)]"
              >
                <p className="text-sm uppercase tracking-[0.25em] text-[#FF9F9F]">
                  {entry.year}
                </p>
                <h3 className="mt-4 text-2xl font-semibold text-white">{entry.title}</h3>
                <p className="mt-3 text-[#FFE5E5] leading-relaxed text-sm md:text-base">
                  {entry.description}
                </p>
              </motion.article>
            ))}
          </div>
        </div>
      </section>

      <section className="max-w-6xl mx-auto px-6 py-20">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
          variants={springVariants}
          transition={{ duration: 0.7 }}
          className="text-center"
        >
          <h2 className="text-3xl md:text-4xl font-semibold text-white">
            Bốn trụ cột trải nghiệm làm nên sức sống Nguyễn Huệ
          </h2>
          <p className="mt-4 text-[#FFC6C6] max-w-2xl mx-auto">
            Thuật toán cường độ trải nghiệm kết hợp điểm đánh giá từ du khách và mật độ hoạt
            động giúp xác định sắc độ đỏ đại diện cho độ náo nhiệt của từng hành trình.
          </p>
        </motion.div>
        <div className="mt-14 grid gap-6 md:grid-cols-2">
          {experiences.map((experience, index) => {
            const Icon = experience.icon;
            return (
              <motion.div
                key={experience.title}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, amount: 0.3 }}
                variants={springVariants}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="rounded-3xl p-[1px] bg-gradient-to-br from-[#FF5A5A] via-[#870000] to-[#FF8A80]"
              >
                <div
                  className="rounded-[calc(theme(borderRadius.3xl)-1px)] h-full bg-[#1A0000] p-8"
                  style={{ backgroundImage: intensityToGradient(experience.intensity) }}
                >
                  <div className="flex items-center gap-3">
                    <span className="inline-flex items-center justify-center rounded-full bg-white/20 p-3">
                      <Icon className="h-6 w-6 text-white" />
                    </span>
                    <span className="text-xs uppercase tracking-[0.35em] text-[#FFE3E3]">
                      {experience.pillar}
                    </span>
                  </div>
                  <h3 className="mt-4 text-2xl font-semibold text-white">
                    {experience.title}
                  </h3>
                  <p className="mt-3 text-sm md:text-base leading-relaxed text-[#FFF1F1]">
                    {experience.description}
                  </p>
                </div>
              </motion.div>
            );
          })}
        </div>
      </section>

      <section className="relative bg-[#260000]">
        <div className="absolute inset-x-0 top-0 h-40 bg-[radial-gradient(circle_at_top,rgba(255,128,128,0.2),transparent)]" />
        <div className="max-w-6xl mx-auto px-6 py-20">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.2 }}
            variants={springVariants}
            transition={{ duration: 0.7 }}
          >
            <h2 className="text-3xl md:text-4xl font-semibold text-white">
              Lịch sự kiện đặc sắc 2025 – 2026
            </h2>
            <p className="mt-4 text-[#FFCDD2] max-w-2xl">
              Dữ liệu được tổng hợp từ lịch hoạt động của Thành phố Hồ Chí Minh và các nhà tổ
              chức sự kiện để bạn dễ dàng lên kế hoạch trải nghiệm.
            </p>
          </motion.div>
          <div className="mt-12 grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
            <div className="grid gap-6">
              {signatureEvents.map((event, index) => (
                <motion.div
                  key={event.name}
                  initial="hidden"
                  whileInView="visible"
                  viewport={{ once: true, amount: 0.3 }}
                  variants={springVariants}
                  transition={{ duration: 0.6, delay: index * 0.12 }}
                  className="rounded-3xl border border-[rgba(255,255,255,0.14)] bg-[rgba(64,0,0,0.6)] p-8"
                >
                  <p className="text-sm uppercase tracking-[0.25em] text-[#FFA3A3]">
                    {event.time}
                  </p>
                  <h3 className="mt-3 text-2xl font-semibold text-white">{event.name}</h3>
                  <p className="mt-3 text-sm md:text-base text-[#FFE4E6] leading-relaxed">
                    {event.highlight}
                  </p>
                </motion.div>
              ))}
            </div>
            <motion.div
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, amount: 0.2 }}
              variants={springVariants}
              transition={{ duration: 0.7, delay: 0.3 }}
              className="rounded-3xl bg-gradient-to-br from-[#4A0000] via-[#2A0000] to-[#800000] p-[1px]"
            >
              <div className="rounded-[calc(theme(borderRadius.3xl)-1px)] h-full bg-[#0F0000]/90 p-8">
                <h3 className="text-xl font-semibold text-white">
                  Nhịp lễ hội theo mùa
                </h3>
                <p className="mt-3 text-sm text-[#FFC9C9]">
                  Thuật toán phân cụm dựa trên mùa vụ cho thấy ba cụm cao điểm sau:
                </p>
                <div className="mt-6 space-y-4">
                  {peakMoments.map((item) => (
                    <div key={item.season} className="flex items-center gap-4">
                      <div className="h-2 flex-1 rounded-full bg-[#3B0000] overflow-hidden">
                        <span
                          className="block h-full rounded-full bg-gradient-to-r from-[#FF6B6B] to-[#9B0000]"
                          style={{ width: `${item.weight}%` }}
                        />
                      </div>
                      <div className="min-w-[110px] text-right">
                        <p className="text-sm font-medium text-white">{item.season}</p>
                        <p className="text-xs text-[#FFBFBF]">{item.weight}% sự kiện</p>
                      </div>
                    </div>
                  ))}
                </div>
                <p className="mt-6 text-xs text-[#FFBFBF]/80 leading-relaxed">
                  *Tỷ lệ dựa trên số lượng sự kiện tiêu biểu được công bố cho năm 2025 – 2026.
                </p>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      <section className="max-w-6xl mx-auto px-6 py-20">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.3 }}
          variants={springVariants}
          transition={{ duration: 0.7 }}
        >
          <h2 className="text-3xl md:text-4xl font-semibold text-white text-center">
            Hành trình ẩm thực & góc nhìn độc bản
          </h2>
          <p className="mt-4 text-[#FFCDD2] text-center max-w-3xl mx-auto">
            Từ hương vị đường phố đến rooftop sang trọng – mỗi điểm dừng đều là một mảng màu
            đỏ riêng biệt trong bức tranh cảm xúc của Nguyễn Huệ.
          </p>
        </motion.div>
        <div className="mt-12 grid gap-6 md:grid-cols-3">
          {culinaryStops.map((stop, index) => (
            <motion.div
              key={stop.title}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, amount: 0.2 }}
              variants={springVariants}
              transition={{ duration: 0.6, delay: index * 0.12 }}
              className="rounded-3xl border border-[rgba(255,255,255,0.12)] bg-[rgba(70,0,0,0.55)] p-7"
            >
              <h3 className="text-xl font-semibold text-white">{stop.title}</h3>
              <p className="mt-3 text-sm text-[#FFE1E1] leading-relaxed">
                {stop.details}
              </p>
            </motion.div>
          ))}
        </div>
      </section>

      <section className="relative bg-[#1A0000]">
        <div className="absolute inset-x-0 top-0 h-32 bg-[radial-gradient(circle_at_top,rgba(255,130,130,0.18),transparent)]" />
        <div className="max-w-6xl mx-auto px-6 py-20">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.25 }}
            variants={springVariants}
            transition={{ duration: 0.7 }}
          >
            <h2 className="text-3xl md:text-4xl font-semibold text-white">
              Khoảnh khắc thiên nhiên hòa cùng đô thị
            </h2>
            <p className="mt-4 text-[#FFB8B8] max-w-2xl">
              Những yếu tố sinh thái và nghệ thuật ánh sáng được kết hợp có chủ đích, tạo nên
              trải nghiệm giác quan đa tầng giữa lòng thành phố.
            </p>
          </motion.div>
          <div className="mt-10 grid gap-6 md:grid-cols-2">
            {natureMoments.map((moment, index) => {
              const Icon = moment.icon;
              return (
                <motion.div
                  key={moment.title}
                  initial="hidden"
                  whileInView="visible"
                  viewport={{ once: true, amount: 0.3 }}
                  variants={springVariants}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  className="rounded-3xl border border-[rgba(255,255,255,0.15)] bg-[rgba(48,0,0,0.65)] p-8"
                >
                  <div className="flex items-center gap-4">
                    <span className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-[#FF7373]/30">
                      <Icon className="h-6 w-6 text-[#FF9E9E]" />
                    </span>
                    <h3 className="text-xl font-semibold text-white">{moment.title}</h3>
                  </div>
                  <p className="mt-3 text-sm text-[#FFE6E6] leading-relaxed">
                    {moment.description}
                  </p>
                </motion.div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="max-w-6xl mx-auto px-6 py-16">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
          variants={springVariants}
          transition={{ duration: 0.7 }}
          className="rounded-3xl bg-[rgba(64,0,0,0.55)] border border-[rgba(255,255,255,0.15)] p-10"
        >
          <h2 className="text-2xl md:text-3xl font-semibold text-white">
            Gợi ý hành trình thông minh
          </h2>
          <p className="mt-4 text-sm md:text-base text-[#FFCBCB] leading-relaxed">
            Thuật toán tối ưu thời gian đề xuất: bắt đầu lúc 17h30 ở phố sách để tận hưởng ánh
            chiều, di chuyển đến quảng trường trung tâm lúc 19h để xem biểu diễn, ghé bến Bạch
            Đằng 21h cho tour du thuyền, và kết thúc ở skybar 22h30 để chiêm ngưỡng toàn cảnh.
          </p>
          <p className="mt-4 text-xs text-[#FFBEBE]">
            *Thuật toán dựa trên dữ liệu lưu lượng khách, khung giờ biểu diễn công bố và khoảng
            cách di chuyển bộ trung bình 5 km/h.
          </p>
        </motion.div>
      </section>

      <footer className="max-w-6xl mx-auto px-6 pb-20">
        <div className="rounded-3xl border border-[rgba(255,255,255,0.1)] bg-[rgba(48,0,0,0.7)] p-8">
          <h3 className="text-lg font-semibold text-white">Nguồn tham khảo</h3>
          <ul className="mt-4 space-y-2 text-sm text-[#FFDEDE]">
            {sources.map((source) => (
              <li key={source.url}>
                <a
                  href={source.url}
                  target="_blank"
                  rel="noreferrer"
                  className="hover:text-white transition-colors"
                >
                  {source.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <p className="mt-8 text-center text-xs text-[#FFBDBD]">
          Cập nhật ngày 26/09/2025 — Thiết kế bởi Youware tạo ra trải nghiệm đồng bộ phông chữ
          và sắc đỏ chủ đạo.
        </p>
      </footer>
    </main>
  );
}

export default App;