/* global React, Icon, SectionHeader, Reveal */

// Past-employer logos (real brand marks) + the core enterprise system
// I worked on at each. Logos are loaded from Wikipedia/Wikimedia.
const COMPANIES = [
  { src: "https://id.wikipedia.org/wiki/Special:FilePath/ITM_logo.png",                          name: "Indo Tambangraya Megah Tbk" },
  { src: "https://en.wikipedia.org/wiki/Special:FilePath/AlamTri_logo.webp",                      name: "Alamtri / Adaro Energy" },
  { src: "https://commons.wikimedia.org/wiki/Special:FilePath/Logo_Pamapersada_Nusantara.png",    name: "Pamapersada Nusantara" },
];

const SKILLS = [
  { label: "Data Analytics",        icon: "bar-chart-3" },
  { label: "Power BI",              icon: "pie-chart" },
  { label: "Business Intelligence", icon: "trending-up" },
  { label: "AI Workflow Systems",   icon: "cpu" },
  { label: "Automation",            icon: "zap" },
  { label: "Process Improvement",   icon: "git-branch" },
  { label: "Digital Product",       icon: "layout-grid" },
  { label: "Dashboard Design",      icon: "layout-dashboard" },
  { label: "Reporting Automation",  icon: "file-bar-chart" },
];

function About() {
  return (
    <section id="about" className="section about">
      <div className="container">
        <div className="about-grid">
          {/* ----- LEFT: intro + companies ----- */}
          <div className="about-left">
            <Reveal>
              <SectionHeader
                eyebrow="About me"
                eyebrowIcon="user"
                title='Building <span class="grad">clarity</span> where there&rsquo;s complexity.'
                subtitle="Hi, I'm Dhany Indraswara — a Data Analytics Specialist, Business Intelligence Practitioner, Digital Product Enthusiast, and Content Creator."
              />
            </Reveal>

            <Reveal delay={80}>
              <p className="about-paragraph">
                Over the years, I've worked across <strong>mining, logistics,
                supply chain, operations</strong>, and enterprise digital
                transformation projects within Indonesia's largest energy and
                resources groups.
              </p>
            </Reveal>

            <Reveal delay={140}>
              <div>
                <span className="eyebrow" style={{ marginBottom: 14, background: "rgba(53,129,225,.08)", borderColor: "rgba(53,129,225,.18)", color: "#1F4D8C" }}>
                  <Icon name="building-2" size={12} />
                  Selected employers
                </span>
                <div className="logo-wall" style={{ marginTop: 14 }}>
                  {COMPANIES.map((c) => (
                    <div className="logo-card" key={c.name}>
                      <div className="logo-card-img">
                        <img className="emp-logo-img" src={c.src} alt={c.name} />
                      </div>
                      <div className="logo-sub">
                        <span className="logo-sub-sys">{c.name}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>

          {/* ----- RIGHT: skills + belief ----- */}
          <div>
            <Reveal delay={120}>
              <div className="about-skills glass-card">
                <h3 className="about-skills-title">Core expertise</h3>
                <div className="skills-cloud">
                  {SKILLS.map((s) => (
                    <span className="skill-chip" key={s.label}>
                      <Icon name={s.icon} size={14} />
                      {s.label}
                    </span>
                  ))}
                </div>
              </div>
            </Reveal>

            <Reveal delay={220}>
              <div className="belief-card">
                <div className="belief-card-icon">
                  <Icon name="quote" size={18} />
                </div>
                <p>
                  I believe technology should simplify work, improve clarity,
                  and create meaningful impact — not add more noise to it.
                </p>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

window.About = About;