import { BookOpen, Lightbulb, LineChart, Sparkles } from "lucide-react";

import type { BlogPageCopy } from "@/data/blogs.data";

export default function BlogsHero({ copy }: { copy: BlogPageCopy }) {
  return (
    <section className="relative overflow-hidden border-b border-[#edf0f7] bg-white py-14 sm:py-20">
      <div className="pointer-events-none absolute -left-20 top-0 h-72 w-72 rounded-full bg-[#eef0ff] blur-3xl" />
      <div className="pointer-events-none absolute right-0 top-10 h-80 w-80 rounded-full bg-[#edfbff] blur-3xl" />
      <div className="relative mx-auto grid max-w-[1360px] items-center gap-10 px-6 lg:grid-cols-[1fr_0.82fr] xl:px-8">
        <div>
          <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-[#e5e8fb] bg-white/85 px-3.5 py-2 text-md font-semibold text-[#5865ed] shadow-[0_4px_16px_rgba(65,75,135,0.06)]">
            <Sparkles size={15} className="text-[#6670ff]" />{copy.eyebrow}
            </div>
          <h1 className="max-w-150 text-[45px] font-extrabold leading-[1.09] tracking-[-0.020em] text-[#101a3c] sm:text-[56px] xl:text-5xl">{copy.title}</h1>
          <p className="mt-5 max-w-[720px] text-[15px] leading-7 text-[#6d7895] sm:text-[17px]">{copy.description}</p>
        </div>
        <div className="relative mx-auto w-full max-w-[480px] rounded-[28px] border border-[#e5e9f5] bg-white p-5 shadow-[0_24px_65px_rgba(54,67,123,0.13)]">
          <div className="rounded-2xl bg-gradient-to-br from-[#5d66ee] to-[#7958eb] p-5 text-white">
            <BookOpen size={28} />
            <p className="mt-8 text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#dfe2ff]">PureSaaS Editorial</p>
            <p className="mt-2 text-xl font-extrabold leading-7">{copy.latestDescription}</p>
          </div>
          <div className="mt-4 grid grid-cols-2 gap-3">
            <div className="rounded-xl bg-[#f7f8ff] p-4 text-[#616be4]"><LineChart size={20} /><p className="mt-2 text-[11px] font-bold">Business Growth</p></div>
            <div className="rounded-xl bg-[#f3fbf8] p-4 text-[#35a477]"><Lightbulb size={20} /><p className="mt-2 text-[11px] font-bold">Practical Ideas</p></div>
          </div>
        </div>
      </div>
    </section>
  );
}