import { useEffect, useRef } from "react";
import { Zap } from "lucide-react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

const FeaturesWidget = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://app.chatsku.com/widget/features-widget.js";
    script.async = true;
    containerRef.current?.appendChild(script);

    return () => {
      script.remove();
    };
  }, []);

  return (
    <div ref={containerRef} className="rounded-2xl border border-border bg-card p-6 shadow-2xl shadow-background glow-teal">
      <div id="chatsku-features" />
    </div>
  );
};

const Features = () => {
  return (
    <div className="min-h-screen flex flex-col bg-background bg-radial-teal">
      <Navbar />
      <main className="flex-1 pt-24 pb-0">
        {/* Header */}
        <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-10">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-primary/30 bg-primary/10 mb-4">
            <Zap className="w-3 h-3 text-primary" />
            <span className="text-xs font-semibold text-primary">Features</span>
          </div>
          <h1 className="font-display font-bold text-4xl sm:text-5xl text-foreground mb-4">
            Everything you need to <span className="text-gradient-teal">sell smarter</span>
          </h1>
          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
            Discover how ChatSKU turns your product catalog into an AI-powered sales assistant — ready in minutes, not months.
          </p>
        </section>

        {/* Widget */}
        <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 mb-16 flex justify-center">
          <FeaturesWidget />
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default Features;
