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

function Bar({ label, pct, value, color = "#02A0C1", active }) {
  return (
    <div className="bar-row">
      <div className="bar-row-head">
        <span className="bar-label">{label}</span>
        <span className="bar-value">{value}</span>
      </div>
      <div className="bar-track">
        <div
          className="bar-fill"
          style={{ width: (active ? pct : 0) + "%", background: color }}
        />
      </div>
    </div>
  );
}

const TOP_ROLES = [
  { rank: "01", icon: "store",            name: "Business Owner & Ops",         pct: "32%" },
  { rank: "02", icon: "bar-chart-3",      name: "Data Analyst & BI Developer",  pct: "28%" },
  { rank: "03", icon: "graduation-cap",   name: "Learner / Employee non-IT",    pct: "18%" },
  { rank: "04", icon: "user",             name: "Student",                       pct: "12%" },
  { rank: "05", icon: "users",            name: "Others",                        pct: "10%" },
];

function AgeCard() {
  const [ref, inView] = useInView({ threshold: 0.35 });
  return (
    <GlassCard className={`audience-card ${inView ? "is-revealed" : ""}`}>
      <div ref={ref}>
        <h3 className="audience-card-title">By age</h3>
        <div className="bars">
          <Bar label="18–24" pct={28} value="28%" active={inView} />
          <Bar label="25–34" pct={46} value="46%" active={inView} />
          <Bar label="35–44" pct={18} value="18%" active={inView} />
          <Bar label="45+"   pct={8}  value="8%"  active={inView} />
        </div>
      </div>
    </GlassCard>
  );
}

function GenderCard() {
  const [ref, inView] = useInView({ threshold: 0.4 });
  const malePct = useCountUp(62, { active: inView, duration: 1600 });
  // ramp donut from 0% → 62% on view
  const donutPct = inView ? 62 : 0;
  return (
    <GlassCard className={`audience-card ${inView ? "is-revealed" : ""}`}>
      <div ref={ref}>
        <h3 className="audience-card-title">By gender</h3>
        <div className="donut-row">
          <div
            className="donut"
            style={{ background: `conic-gradient(#02A0C1 0 ${donutPct}%, #97D1C6 ${donutPct}% 100%)` }}
          >
            <div className="donut-inner">{malePct} / {Math.max(0, 100 - malePct)}</div>
          </div>
          <ul className="legend">
            <li><span className="dot" style={{ background: "#02A0C1" }} /> Male · 62%</li>
            <li><span className="dot" style={{ background: "#97D1C6" }} /> Female · 38%</li>
          </ul>
        </div>
      </div>
    </GlassCard>
  );
}

function RolesCard() {
  const [ref, inView] = useInView({ threshold: 0.3 });
  return (
    <GlassCard className={`audience-card ${inView ? "is-revealed" : ""}`}>
      <div ref={ref}>
        <h3 className="audience-card-title">Top roles</h3>
        <ul className="role-list role-list--ranked">
          {TOP_ROLES.map((r) => (
            <li key={r.rank}>
              <span className="role-rank">Top {r.rank}</span>
              <span className="role-icon"><Icon name={r.icon} size={16} /></span>
              <span className="role-name">{r.name}</span>
              <span className="role-pct">{r.pct}</span>
            </li>
          ))}
        </ul>
      </div>
    </GlassCard>
  );
}

function GeoCard() {
  const [ref, inView] = useInView({ threshold: 0.35 });
  return (
    <GlassCard className={`audience-card ${inView ? "is-revealed" : ""}`}>
      <div ref={ref}>
        <h3 className="audience-card-title">By geography</h3>
        <div className="geo-split">
          <div className="geo-bar">
            <div className="geo-seg geo-seg--id" style={{ width: inView ? "65%" : "0%" }}>
              <span>🇮🇩 Indonesia</span><span className="geo-pct">65%</span>
            </div>
            <div className="geo-seg geo-seg--intl" style={{ width: inView ? "35%" : "0%" }}>
              <span>🌐 International</span><span className="geo-pct">35%</span>
            </div>
          </div>
          <div className="geo-intl-list">
            <span className="geo-intl-title">Top international markets</span>
            <div className="geo-intl-chips">
              <span className="pill pill--soft pill--sm">🇲🇾 Malaysia</span>
              <span className="pill pill--soft pill--sm">🇸🇬 Singapore</span>
              <span className="pill pill--soft pill--sm">🇵🇭 Philippines</span>
              <span className="pill pill--soft pill--sm">🇺🇸 United States</span>
              <span className="pill pill--soft pill--sm">🇮🇳 India</span>
            </div>
          </div>
        </div>
      </div>
    </GlassCard>
  );
}

function Audience() {
  return (
    <Section id="audience" className="section--audience">
      <SectionHeader
        eyebrow="Audience snapshot"
        title="Working professionals who care about getting better at their craft."
        subtitle="Numbers are based on platform insights — Instagram primary, others representative."
      />

      <div className="audience-grid">
        <AgeCard />
        <GenderCard />
        <RolesCard />
        <GeoCard />
      </div>

      <p className="audience-foot">
        <Icon name="info" size={14} /> Demographics are based on platform insights — request the latest report for full breakdown.
      </p>
    </Section>
  );
}

window.Audience = Audience;