/* global React, Icon, BrandIcon, SectionHeader, Reveal, useInView, useCountUp, formatThousands */

const PLATFORMS = [
  { name: "Instagram", handle: "@dhanyindraswara", count: 35500, badge: "Primary",  brand: "instagram" },
  { name: "Facebook",  handle: "/dhany.indraswara", count: 21000, brand: "facebook" },
  { name: "TikTok",    handle: "@dhanyindraswara", count: 16500, brand: "tiktok"   },
  { name: "X / Twitter", handle: "@dhanyindra",    count:  8600, brand: "x"        },
  { name: "LinkedIn",  handle: "/in/dhanyindraswara", count: 3400, brand: "linkedin" },
];

const TOPICS = [
  "Data Analytics", "AI", "Automation", "Power BI",
  "Business Systems", "Dashboard Design", "Productivity", "Digital Growth",
];

function AnimatedCount({ end, suffix = "" }) {
  const [ref, inView] = useInView({ threshold: 0.35 });
  const v = useCountUp(end, { active: inView, duration: 1800 });
  return <span ref={ref}>{formatThousands(v)}{suffix}</span>;
}

function Creator() {
  return (
    <section id="creator" className="section creator">
      <div className="container">
        <Reveal>
          <SectionHeader
            eyebrow="Content creator"
            eyebrowIcon="megaphone"
            title='An <span class="grad">85K+ audience</span> of analysts &amp; pros.'
            subtitle="Educational content on data, BI, and AI — built for working analysts, BI developers, and business professionals across Indonesia and beyond."
          />
        </Reveal>

        <div className="creator-grid">
          {/* ----- LEFT: dark summary card ----- */}
          <Reveal delay={80}>
            <div className="creator-summary">
              <span className="eyebrow">
                <Icon name="users" size={12} />
                Combined audience
              </span>
              <div>
                <div className="creator-summary-num">
                  <AnimatedCount end={85000} /><span className="plus">+</span>
                </div>
                <div className="creator-summary-lbl" style={{ marginTop: 10 }}>
                  Engaged followers across five platforms
                </div>
              </div>

              <div className="creator-quick">
                <div className="creator-quick-tile">
                  <div className="creator-quick-n">3M<span className="plus">+</span></div>
                  <div className="creator-quick-l">Monthly impressions</div>
                </div>
                <div className="creator-quick-tile is-accent">
                  <div className="creator-quick-n" style={{ color: "#D6FD91" }}>14%</div>
                  <div className="creator-quick-l">Avg engagement</div>
                </div>
                <div className="creator-quick-tile">
                  <div className="creator-quick-n">24h</div>
                  <div className="creator-quick-l">Median reply time</div>
                </div>
              </div>

              <div className="creator-topics">
                <div className="creator-topics-title">I post about</div>
                <div className="topics-cloud">
                  {TOPICS.map(t => (
                    <span className="topic-chip" key={t}>{t}</span>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>

          {/* ----- RIGHT: platform breakdown ----- */}
          <Reveal delay={160}>
            <div className="platforms">
              {PLATFORMS.map((p, i) => (
                <a className={`platform-card ${i === 0 ? "is-primary" : ""}`} key={p.name} href="#">
                  <div className="platform-icon">
                    <BrandIcon name={p.brand} size={26} />
                  </div>
                  <div>
                    <div className="platform-name">{p.name}</div>
                    <div className="platform-handle">{p.handle}</div>
                    {p.badge && <span className="platform-badge">{p.badge}</span>}
                  </div>
                  <div className="platform-count">
                    {formatThousands(p.count)}<span className="plus">+</span>
                  </div>
                  <div className="platform-arrow">
                    <Icon name="arrow-up-right" size={18} />
                  </div>
                </a>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Creator = Creator;