export default function Onboarding() {
  const platforms = [
    { icon: "fa-brands fa-instagram", color: "#E4405F" },
    { icon: "fa-brands fa-facebook", color: "#1877F2" },
    { icon: "fa-brands fa-tiktok", color: "#000000" },
    { icon: "fa-brands fa-x-twitter", color: "#000000" },
    { icon: "fa-brands fa-linkedin", color: "#0A66C2" },
    { icon: "fa-brands fa-youtube", color: "#FF0000" },
    { icon: "fa-brands fa-pinterest", color: "#E60023" },
    { icon: "fa-brands fa-threads", color: "#000000" },
    { icon: "fa-brands fa-mastodon", color: "#6364FF" },
    { icon: "fa-brands fa-bluesky", color: "#0085FF" },
  ];

  const features = [
    { icon: "fa-solid fa-rotate", title: "Blog to Social", desc: "Blog posts go to social automatically" },
    { icon: "fa-solid fa-wand-magic-sparkles", title: "AI Captions", desc: "Platform-optimized captions with AI" },
    { icon: "fa-solid fa-chart-line", title: "Analytics", desc: "54+ metrics across all platforms" },
    { icon: "fa-solid fa-calendar-days", title: "Smart Scheduling", desc: "Optimal times for max engagement" },
  ];

  return (
    <div className="vr-max-w-2xl vr-mx-auto vr-mt-5">
      <div className="vr-bg-white vr-rounded-2xl vr-border vr-border-gray-200 vr-shadow-lg vr-overflow-hidden">
        {/* Hero */}
        <div className="vr-text-center vr-px-10 vr-pt-12 vr-pb-10" style={{ background: "linear-gradient(180deg, #fef5f8 0%, #ffffff 100%)" }}>
          <img
            src={`${viralyWP.pluginUrl}assets/images/viraly_logo.webp`}
            alt="Viraly"
            className="vr-h-11 vr-mx-auto vr-mb-6"
          />
          <h1 className="vr-text-2xl vr-font-bold vr-text-gray-900 vr-mb-3 vr-leading-tight">
            Share your blog posts<br />to social media, automatically
          </h1>
          <p className="vr-text-gray-500 vr-text-sm vr-max-w-lg vr-mx-auto vr-mb-7 vr-leading-relaxed">
            Connect your social accounts and Viraly will auto-share your WordPress posts to 10+ platforms.
          </p>

          {/* Platform icons */}
          <div className="vr-flex vr-justify-center vr-gap-4 vr-mb-8 vr-flex-wrap">
            {platforms.map((p) => (
              <i
                key={p.icon}
                className={`${p.icon} vr-text-xl hover:vr-scale-110 vr-transition-transform vr-cursor-default`}
                style={{ color: p.color, opacity: 0.85 }}
              />
            ))}
          </div>

          {/* CTA */}
          <a
            href={viralyWP.connectUrl}
            className="vr-inline-flex vr-items-center vr-gap-2.5 vr-px-9 vr-py-3.5 vr-bg-primary-600 vr-text-white vr-rounded-lg vr-font-semibold vr-text-base vr-shadow-lg hover:vr-bg-primary-700 hover:vr-shadow-xl vr-transition-all hover:vr--translate-y-0.5"
            style={{ boxShadow: "0 4px 16px rgba(224, 48, 88, 0.25)" }}
          >
            <i className="fa-solid fa-bolt vr-text-sm" />
            Connect to Viraly — It's Free
          </a>
          <p className="vr-text-gray-400 vr-text-xs vr-mt-3">
            Free to use. Your account is created automatically.
          </p>
        </div>

        {/* Features strip */}
        <div className="vr-grid vr-grid-cols-2 sm:vr-grid-cols-4 vr-border-t vr-border-gray-200">
          {features.map((f) => (
            <div
              key={f.title}
              className="vr-flex vr-flex-col vr-items-center vr-text-center vr-py-6 vr-px-4 vr-gap-2 vr-border-r vr-border-gray-200 last:vr-border-r-0"
            >
              <div className="vr-w-10 vr-h-10 vr-rounded-lg vr-flex vr-items-center vr-justify-center vr-mb-1" style={{ background: "linear-gradient(135deg, #E03058, #c41d45)" }}>
                <i className={`${f.icon} vr-text-white vr-text-sm`} />
              </div>
              <span className="vr-text-xs vr-font-bold vr-text-gray-900">{f.title}</span>
              <span className="vr-text-xs vr-text-gray-400 vr-leading-snug">{f.desc}</span>
            </div>
          ))}
        </div>
      </div>

      <p className="vr-text-center vr-text-gray-400 vr-text-xs vr-mt-5">
        Need help? Visit <a href="https://viraly.io" target="_blank" className="vr-text-primary-600 hover:vr-underline">viraly.io</a>
      </p>
    </div>
  );
}