import { viralySsoUrl } from "../utils/sso";

export default function About() {
  const features = [
    { icon: "fa-solid fa-rotate", title: "Blog to Social", desc: "Share blog posts to social media automatically when you publish." },
    { icon: "fa-solid fa-calendar-days", title: "Smart Scheduling", desc: "Schedule posts at optimal times for maximum engagement." },
    { icon: "fa-solid fa-wand-magic-sparkles", title: "AI Captions", desc: "Generate platform-optimized captions and hashtags with AI." },
    { icon: "fa-solid fa-chart-line", title: "Analytics", desc: "Track performance with 54+ metrics across all platforms." },
  ];

  const platforms = [
    { icon: "fa-brands fa-instagram", name: "Instagram", color: "#E4405F" },
    { icon: "fa-brands fa-facebook", name: "Facebook", color: "#1877F2" },
    { icon: "fa-brands fa-tiktok", name: "TikTok", color: "#000000" },
    { icon: "fa-brands fa-x-twitter", name: "X", color: "#000000" },
    { icon: "fa-brands fa-linkedin", name: "LinkedIn", color: "#0A66C2" },
    { icon: "fa-brands fa-pinterest", name: "Pinterest", color: "#E60023" },
    { icon: "fa-brands fa-youtube", name: "YouTube", color: "#FF0000" },
    { icon: "fa-brands fa-threads", name: "Threads", color: "#000000" },
    { icon: "fa-brands fa-mastodon", name: "Mastodon", color: "#6364FF" },
    { icon: "fa-brands fa-bluesky", name: "Bluesky", color: "#0085FF" },
  ];

  return (
    <div className="vr-space-y-5">
      {/* Hero */}
      <div className="vr-rounded-xl vr-border vr-border-gray-200 vr-shadow-sm vr-overflow-hidden" style={{ background: "linear-gradient(135deg, #fef5f8 0%, #ffffff 50%, #f5f0ff 100%)" }}>
        <div className="vr-text-center vr-py-10 vr-px-6">
          <img
            src={`${viralyWP.pluginUrl}assets/images/viraly_logo.webp`}
            alt="Viraly"
            className="vr-h-10 vr-mx-auto vr-mb-4"
          />
          <h1 className="vr-text-2xl vr-font-bold vr-text-gray-900 vr-mb-2">Social Media Management for WordPress</h1>
          <p className="vr-text-gray-500 vr-text-sm vr-max-w-lg vr-mx-auto">
            Auto-share your blog posts, schedule social content, track analytics, and grow your audience — all from your WordPress dashboard.
          </p>
        </div>
      </div>

      {/* Features */}
      <div className="vr-bg-white vr-rounded-xl vr-border vr-border-gray-200 vr-shadow-sm vr-p-7">
        <h2 className="vr-text-lg vr-font-bold vr-text-gray-900 vr-mb-5">Features</h2>
        <div className="vr-grid vr-grid-cols-1 sm:vr-grid-cols-2 vr-gap-4">
          {features.map((f) => (
            <div key={f.title} className="vr-flex vr-gap-4 vr-p-5 vr-bg-gray-50 vr-rounded-lg vr-border vr-border-gray-100">
              <div className="vr-w-10 vr-h-10 vr-rounded-lg vr-flex vr-items-center vr-justify-center vr-flex-shrink-0" style={{ background: "linear-gradient(135deg, #E03058, #c41d45)" }}>
                <i className={`${f.icon} vr-text-white vr-text-sm`} />
              </div>
              <div>
                <h3 className="vr-text-sm vr-font-semibold vr-text-gray-900">{f.title}</h3>
                <p className="vr-text-xs vr-text-gray-500 vr-mt-1 vr-leading-relaxed">{f.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Platforms */}
      <div className="vr-bg-white vr-rounded-xl vr-border vr-border-gray-200 vr-shadow-sm vr-p-7">
        <h2 className="vr-text-lg vr-font-bold vr-text-gray-900 vr-mb-5">Supported Platforms</h2>
        <div className="vr-grid vr-grid-cols-2 sm:vr-grid-cols-5 vr-gap-3">
          {platforms.map((p) => (
            <div key={p.name} className="vr-flex vr-flex-col vr-items-center vr-gap-2 vr-py-5 vr-px-3 vr-bg-gray-50 vr-rounded-lg vr-border vr-border-gray-100 hover:vr-border-primary-200 vr-transition-colors">
              <i className={`${p.icon} vr-text-2xl`} style={{ color: p.color }} />
              <span className="vr-text-xs vr-font-semibold vr-text-gray-700">{p.name}</span>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div className="vr-rounded-xl vr-border vr-border-primary-200 vr-p-7" style={{ background: "linear-gradient(135deg, #fef5f8 0%, #ffffff 100%)" }}>
        <h2 className="vr-text-lg vr-font-bold vr-text-primary-600 vr-mb-2">Ready to grow your audience?</h2>
        <p className="vr-text-sm vr-text-gray-500 vr-mb-5">Open the full Viraly dashboard to access all features.</p>
        <a
          href={viralySsoUrl("/scheduler/calendar/all")}
          target="_blank"
          className="vr-inline-flex vr-items-center vr-gap-2 vr-px-6 vr-py-2.5 vr-bg-primary-600 vr-text-white vr-rounded-lg vr-text-sm vr-font-semibold hover:vr-bg-primary-700 vr-transition-colors"
        >
          <i className="fa-solid fa-arrow-up-right-from-square vr-text-xs" />
          Open Viraly Dashboard
        </a>
      </div>

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