// Portfolio / Work section — early social proof + authority
// Mix of named engagements, results, and verifiable third-party badges.

const { useState: useStateW, useEffect: useEffectW } = React;

const WORK_ITEMS = [
  {
    id: "vital",
    client: "VitalTransportationCorp.com",
    industry: "Logistics · Commercial Transport",
    headline: "Full Holistic Radar deployment ,  architecture, entities, persuasion.",
    body: "End-to-end engagement. Service-area architecture rebuilt against the topical graph, author entities linked to the Knowledge Graph, and every page re-briefed with Cialdini Authority + Social Proof stacking. The kind of work that compounds quarter over quarter.",
    stats: [
      { v: "Full Stack", l: "all 6 layers" },
      { v: "Entity", l: "verified authors" },
      { v: "Cialdini", l: "all 7 placed" },
    ],
    tag: "FLAGSHIP",
    verify: "Client-verifiable engagement",
  },
  {
    id: "propx",
    client: "PropXPro.com",
    industry: "SaaS CRM · Pre-launch",
    headline: "Pre-launch SaaS CRM ,  topical authority engineered before day one.",
    body: "A SaaS CRM about to launch. Most products start ranking after launch. We engineered the topical authority before launch ,  full cluster map for the category, entity foundation for the founder, and a brand-narrative built on Cialdini Unity. Day-one visibility, not month-twelve scrambling.",
    stats: [
      { v: "Pre-launch", l: "topical authority" },
      { v: "Cluster", l: "fully mapped" },
      { v: "Day-0", l: "Knowledge Graph" },
    ],
    tag: "FLAGSHIP · SAAS",
  },
  {
    id: "impro",
    client: "ImproSolutionsNYC.com",
    industry: "Facilities Services · NYC",
    headline: "One article. Top 10 on Google.",
    body: "We published a single piece ,  engineered against the full 6-layer architecture, briefed with the corpus-expected entities and a Cialdini Authority stack ,  and it ranked top 10 on Google. Not a portfolio of 80 posts. One. That's what semantic completeness does when most agencies are still counting words.",
    stats: [
      { v: "1", l: "article published" },
      { v: "Top 10", l: "on Google" },
      { v: "0", l: "backlinks needed" },
    ],
    tag: "PROOF OF METHOD",
    verify: "Client-verifiable · NYC commercial services",
  },
  {
    id: "gop",
    client: "Government of Pakistan",
    industry: "Public Sector · Federal",
    headline: "Federal-grade authority on a federal-grade site.",
    body: "A government engagement requires every signal to be defensible. We deployed entity-linked schema, Knowledge Graph alignment for official bodies, and structural information architecture across thousands of pages. Trust, citation, and disambiguation ,  engineered, not assumed.",
    stats: [
      { v: ".gov.pk", l: "domain class" },
      { v: "1000s", l: "pages structured" },
      { v: "L5", l: "entity authority" },
    ],
    tag: "FLAGSHIP · GOVERNMENT",
  },
  {
    id: "aptus",
    client: "AptusInfotech.com",
    industry: "IT Services · B2B",
    headline: "Service-stack visibility built page by page.",
    body: "Topical cluster engineered around enterprise IT services. Each service page briefed with full TF-IDF corpus coverage and internal-link architecture mapped against the topical graph ,  not the URL tree.",
    stats: [
      { v: "Cluster", l: "built ground-up" },
      { v: "100%", l: "schema coverage" },
      { v: "L3+L4", l: "layers solved" },
    ],
    tag: "FOUNDATION",
  },
  {
    id: "seus",
    client: "SeusLighting.com",
    industry: "Lighting · DTC Ecom",
    headline: "Product-led SEO for a category in a price war.",
    body: "Category pages re-engineered with co-occurrence-matrix mapping, comparison frames pre-filled, and Cialdini Social Proof + Scarcity placed at decision moments. Architecture that holds when paid traffic doesn't.",
    stats: [
      { v: "Cat.", l: "pages rebuilt" },
      { v: "L1→L7", l: "full deployment" },
      { v: "Cialdini", l: "all 7 placed" },
    ],
    tag: "FULL STACK",
  },
  {
    id: "restore",
    client: "RestoreMobility.com",
    industry: "Healthcare · Mobility",
    headline: "Trust-first architecture for a YMYL category.",
    body: "Your-Money-Your-Life vertical ,  Google demands real entity authority. We rebuilt author bios as verified Knowledge Graph entities, deployed medical-review schema, and rewrote the consult funnel with Cialdini Authority + Commitment threading.",
    stats: [
      { v: "YMYL", l: "compliant" },
      { v: "Author", l: "entities verified" },
      { v: "L5+L6", l: "unlocked" },
    ],
    tag: "FLAGSHIP",
  },
  {
    id: "norse",
    client: "NorseSteam.com",
    industry: "Wellness · DTC",
    headline: "Category-defining content from a standing start.",
    body: "Greenfield brand in a noisy category. We engineered topical authority from page one: 100% semantic-frame coverage on each pillar, internal pillar–cluster architecture, and a brand-narrative arc built on Cialdini Unity.",
    stats: [
      { v: "Greenfield", l: "→ topical owner" },
      { v: "Unity", l: "Cialdini lead" },
      { v: "Pillar", l: "cluster shipped" },
    ],
    tag: "FLAGSHIP",
  },
  {
    id: "zelouf",
    client: "ZeloufFabrics.com",
    industry: "Wholesale Textiles · NYC",
    headline: "Legacy domain, modernized for the BERT era.",
    body: "Heritage wholesaler with 30+ years of brand equity but Layer 1–2 SEO only. We rebuilt the architecture for Layers 3–5: topical maps for fabric categories, structured-data deployment, and entity disambiguation across the legacy product catalog.",
    stats: [
      { v: "Legacy", l: "→ rebuilt" },
      { v: "Catalog", l: "entity-linked" },
      { v: "L3–L5", l: "addressed" },
    ],
    tag: "MIGRATION",
  },
  {
    id: "improclean",
    client: "ImproCleanNYC.com",
    industry: "Commercial Cleaning · NYC",
    headline: "Local-meets-semantic. Sibling-site, same method.",
    body: "Sister brand to ImproSolutions. Same architectural playbook applied to local-intent terms ,  geo-entity layering, service-area schema, and Cialdini Reciprocity in the lead magnets at the top of every cluster.",
    stats: [
      { v: "Sibling", l: "of Impro Solutions" },
      { v: "Geo", l: "entity layer" },
      { v: "Local", l: "+ semantic" },
    ],
    tag: "FOUNDATION",
  },
  {
    id: "buraq",
    client: "Buraqtech.ai",
    industry: "AI / SaaS",
    headline: "AI category, engineered for the AI-era SERP.",
    body: "An AI product in an AI-saturated SERP. We engineered for MUM and BERT directly: semantic frames mapped to model-evaluation criteria, schema deployed for AI-product disambiguation, and authority signals built against the founder entity.",
    stats: [
      { v: "MUM-aware", l: "briefs" },
      { v: "AI", l: ".ai entity setup" },
      { v: "L4+L5", l: "BERT-ready" },
    ],
    tag: "FLAGSHIP",
  },
];

function WorkSection() {
  const [active, setActive] = useStateW(WORK_ITEMS[0].id);
  const item = WORK_ITEMS.find(w => w.id === active);

  return (
    <section id="work" className="work-section">
      <div className="container">
        <div className="work-head">
          <div className="work-eyebrow">
            <span className="work-eyebrow-dot"></span>
            <span className="dt-mono">/ SELECTED WORK · 210+ ENGAGEMENTS</span>
          </div>
          <h2 className="work-h2">Results that compound, <em>verified</em> by third parties.</h2>
          <div className="work-trust-row">
            <a href="https://www.upwork.com/freelancers/bilalsameer" target="_blank" rel="noopener" className="work-trust-badge">
              <div className="work-trust-icon">★</div>
              <div>
                <div className="work-trust-num">5.00<span className="dt-mono">/5.0</span></div>
                <div className="dt-mono work-trust-label">UPWORK · TOP RATED</div>
              </div>
            </a>
            <div className="work-trust-badge">
              <div className="work-trust-icon">◐</div>
              <div>
                <div className="work-trust-num">210<span style={{color:"var(--signal)"}}>+</span></div>
                <div className="dt-mono work-trust-label">BRANDS SHIPPED</div>
              </div>
            </div>
            <div className="work-trust-badge">
              <div className="work-trust-icon">↗</div>
              <div>
                <div className="work-trust-num">92<span style={{color:"var(--signal)"}}>%</span></div>
                <div className="dt-mono work-trust-label">PAGE 1 IN 90 DAYS</div>
              </div>
            </div>
            <div className="work-trust-badge">
              <div className="work-trust-icon">⟁</div>
              <div>
                <div className="work-trust-num">12<span style={{color:"var(--signal)"}}>/yr</span></div>
                <div className="dt-mono work-trust-label">CLIENT CAP</div>
              </div>
            </div>
          </div>
        </div>

        <div className="work-grid">
          <div className="work-list">
            {WORK_ITEMS.map((w, i) => (
              <button key={w.id}
                      className={"work-list-row " + (w.id === active ? "active" : "")}
                      onClick={() => setActive(w.id)}>
                <span className="dt-mono work-list-num">{String(i+1).padStart(2,"0")}</span>
                <div className="work-list-text">
                  <div className="work-list-client">{w.client}</div>
                  <div className="dt-mono work-list-industry">{w.industry}</div>
                </div>
                <span className="work-list-arrow"><svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8h10M9 3l5 5-5 5" stroke="currentColor" strokeWidth="1.4" fill="none"/></svg></span>
              </button>
            ))}
          </div>

          <div className="work-feature">
            <div className="work-feature-bar">
              <span className="dt-mono work-feature-tag">{item.tag}</span>
              <span className="dt-mono work-feature-id">CASE · {item.id.toUpperCase()}</span>
            </div>
            <h3 className="work-feature-h3">{item.headline}</h3>
            <p className="work-feature-body">{item.body}</p>
            <div className="work-feature-stats">
              {item.stats.map((s, i) => (
                <div key={i} className="work-feature-stat">
                  <div className="work-feature-stat-num">{s.v}</div>
                  <div className="dt-mono work-feature-stat-l">{s.l}</div>
                </div>
              ))}
            </div>
            <div className="work-feature-foot">
              <div className="dt-mono work-feature-verify">
                {item.verify ? <><span className="work-verify-dot"></span>{item.verify}</> : <><span className="work-verify-dot"></span>NDA · CLIENT-CONFIDENTIAL</>}
              </div>
              <a href="#scan" className="dt-mono work-feature-cta">Get this for your site →</a>
            </div>
          </div>
        </div>

        <div className="work-logos">
          <div className="dt-mono work-logos-label">↳ A FEW OF THE 210+ BRANDS PROUDLY SERVED</div>
          <div className="work-logos-row">
            {[
              "VitalTransportationCorp.com",
              "PropXPro.com",
              "Government of Pakistan",
              "AptusInfotech.com",
              "SeusLighting.com",
              "RestoreMobility.com",
              "NorseSteam.com",
              "ZeloufFabrics.com",
              "ImproSolutionsNYC.com",
              "ImproCleanNYC.com",
              "Buraqtech.ai",
            ].map(n => (
              <span key={n} className="work-logo-pill">{n}</span>
            ))}
            <span className="work-logo-pill" style={{borderColor: "var(--signal)", color: "var(--signal)"}}>+ 200 more</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.WorkSection = WorkSection;