/* global React, Section, SectionHeader, GlassCard, BrandIcon, Icon, useInView, useCountUp, formatThousands */

// Update these URLs with your real profile links.
const PLATFORMS = [
  {
    key: "ig", slug: "instagram", name: "Instagram",
    handle: "@dhanyindraswara",
    url: "https://www.instagram.com/dhanyindraswara/",
    count: "35,500+", delta: "+12% MoM", primary: true,
  },
  {
    key: "fb", slug: "facebook",  name: "Facebook",
    handle: "Dhany Indraswara",
    url: "https://www.facebook.com/dhany.indraswara",
    count: "21,000+", delta: "+4% MoM",
  },
  {
    key: "tt", slug: "tiktok",    name: "TikTok",
    handle: "@dhany.indraswara",
    url: "https://www.tiktok.com/@dhany.indraswara",
    count: "13,900+", delta: "+8% MoM",
  },
  {
    key: "tw", slug: "x",         name: "X / Twitter",
    handle: "@dhanyindraswara",
    url: "https://x.com/dhanyindraswara",
    count: "8,600+",  delta: "+3% MoM",
  },
  {
    key: "li", slug: "linkedin",  name: "LinkedIn",
    handle: "Dhany Indraswara",
    url: "https://www.linkedin.com/in/dhany-indraswara/",
    count: "3,400+",  delta: "+6% MoM",
  },
];

function SocialReach() {
  return (
    <Section id="reach" className="section--reach">
      <SectionHeader
        eyebrow="Social media reach"
        title="One creator, five active platforms."
        subtitle="Instagram is the primary surface for brand collaborations. Cross-platform amplification available on request."
      />

      <div className="reach-grid">
        {PLATFORMS.map((p) => (
          <a
            key={p.key}
            href={p.url}
            target="_blank"
            rel="noopener noreferrer"
            className={`reach-card glass-card ${p.primary ? "reach-card--primary" : ""}`}
            aria-label={`Visit ${p.name} profile (opens in a new tab)`}
          >
            {p.primary && <span className="reach-flag">Primary</span>}
            <div className="reach-icon reach-icon--brand">
              <BrandIcon name={p.slug} size={28} />
            </div>
            <div className="reach-count">{p.count}</div>
            <div className="reach-name">{p.name}</div>
            <div className="reach-handle">{p.handle}</div>
            <span className="reach-delta">{p.delta}</span>
            <span className="reach-visit">
              Visit profile <Icon name="arrow-up-right" size={14} />
            </span>
          </a>
        ))}
      </div>

      {/* Combined audience — punchy hero stats */}
      <ReachTotal />
    </Section>
  );
}

function ReachTotal() {
  const [ref, inView] = useInView({ threshold: 0.25 });
  const followers = useCountUp(82400, { active: inView, duration: 1800 });
  return (
    <div className="reach-total reach-total--big" ref={ref}>
      <div className="reach-total-left">
        <span className="reach-total-lbl">Combined audience</span>
        <div className="reach-total-num">
          <span>{formatThousands(followers)}</span>
          <span className="reach-total-plus">+</span>
        </div>
        <span className="reach-total-tag">engaged followers across 5 platforms</span>
      </div>
      <div className="reach-total-stats">
        <div className="rts-card">
          <div className="rts-n">3M<span>+</span></div>
          <div className="rts-l">Monthly impressions · all platforms</div>
        </div>
        <div className="rts-card rts-card--accent">
          <div className="rts-n">14%</div>
          <div className="rts-l">Avg engagement rate</div>
        </div>
        <div className="rts-card">
          <div className="rts-n">24h</div>
          <div className="rts-l">Median reply time</div>
        </div>
      </div>
    </div>
  );
}

window.SocialReach = SocialReach;