/* global React */

/* ---------------- Work / Case Studies ---------------- */
function Work() {
  const [filter, setFilter] = React.useState("All");
  const filters = ["All", "Product", "Web", "Brand", "App"];

  const cases = [
    {
      id: "bhealth", span: "span-7", viz: "viz-bhealth",
      img: "assets/portfolio-bhealth.png",
      mock: false,
      tag: "HEALTHTECH · 2023–2024",
      title: "bHealth EHR",
      industry: "Electronic Health Records",
      desc: "End-to-end EHR platform powering 50+ diagnostic centers, 120+ doctors and 200K+ users in Bangladesh.",
      chips: ["React Native", "Next.js", "Node.js", "Firebase"],
      cat: ["Product", "App"],
      stat: "200K"
    },
    {
      id: "geeoo", span: "span-5", viz: "viz-geeoo",
      img: "assets/portfolio-geeoo.png",
      tag: "E-COMMERCE · JAN–JUN 2023",
      title: "GEEOO",
      industry: "Electronics Distribution",
      desc: "A merchandising-first commerce stack for the country's largest electronics distributor.",
      chips: ["UI/UX", "Interface", "System Design"],
      cat: ["Product", "Web"],
      stat: "GO"
    },
    {
      id: "kabab", span: "span-4", viz: "viz-kabab",
      img: "assets/portfolio-kabab.png",
      tag: "F&B · 2024–RUNNING",
      title: "Kabab Factory",
      industry: "Restaurant Group",
      desc: "Branding plus a social-integrated ordering experience for the country's fastest-growing kabab chain.",
      chips: ["Brand", "Web", "Social"],
      cat: ["Brand", "Web"],
      stat: "KF"
    },
    {
      id: "flipper", span: "span-4", viz: "viz-flipper",
      img: "assets/portfolio-flipper.png",
      tag: "RE-COMMERCE",
      title: "Flipper",
      industry: "Refurbished Electronics",
      desc: "A trust-first interface for buying and trading certified pre-owned electronics.",
      chips: ["UI/UX", "Website", "System"],
      cat: ["Product", "Web"],
      stat: "01"
    },
    {
      id: "malique", span: "span-4", viz: "viz-malique",
      img: "assets/portfolio-malique.png",
      tag: "NON-PROFIT · 2026",
      title: "M A Malique Foundation",
      industry: "NGO · Sylhet",
      desc: "Strategy, identity and digital footprint for a regional foundation working on rural welfare.",
      chips: ["Strategy", "Brand", "Web"],
      cat: ["Brand", "Web"],
      stat: "NGO"
    },
    {
   id: "baycsr", span: "span-7", viz: "viz-baycsr",
   img: "assets/portfolio-baycsr.png",
   mock: false,
   tag: "CSR · 2024–RUNNING",
   title: "Bay CSR",
   industry: "Corporate Social Responsibility",
   desc: "Social content strategy and visual storytelling for Bay Group's CSR initiatives across education, health and women's empowerment.",
   chips: ["Brand", "Social", "Content"],
   cat: ["Brand"],
   stat: "BAY"
   },
   {
   id: "exs", span: "span-5", viz: "viz-exs",
   img: "assets/portfolio-exs.png",
   mock: false,
   tag: "FMCG · 2024–RUNNING",
   title: "EXS Condoms",
   industry: "Consumer Goods",
   desc: "Product marketing and visual content for EXS's Bangladesh launch — bold, expressive creative built around the 'Express Yourself' brand platform.",
   chips: ["Brand", "Social", "Content"],
   cat: ["Brand"],
   stat: "EXS"
   },
  ];

  const visible = filter === "All" ? cases : cases.filter((c) => c.cat.includes(filter));

  return (
    <section className="work section-pad" id="work">
      <div className="wrap">
        <div className="work-head">
          <div>
            <span className="eyebrow" style={{marginBottom: 18, display:"inline-flex"}}>Selected work · 2020 → now</span>
            <h2>Work that <em>shipped</em>, in markets that matter.</h2>
          </div>
          <div className="work-filters">
            {filters.map((f) => (
              <button
                key={f}
                className={`work-filter ${filter === f ? "active" : ""}`}
                onClick={() => setFilter(f)}
              >{f}</button>
            ))}
          </div>
        </div>

        <div className="work-grid">
          {visible.map((c) => (
            <a className={`work-card ${c.span}`} key={c.id} href="#contact">
              <div className={`visual ${c.viz}`}>
                {c.img && <img className="portfolio-img" src={c.img} alt={c.title}/>}
                {c.img && <div className="img-overlay"></div>}
                <div className="viz-shape"></div>
                {c.mock && !c.img && (
                  <div className="viz-mock">
                    <div className="bar"><i></i><i></i><i></i></div>
                    <div className="body">
                      <div className="row hl"></div>
                      <div className="area"></div>
                      <div className="row"></div>
                    </div>
                  </div>
                )}
                <div className="viz-number">{c.stat}</div>
                <div className="visual-label">{c.tag}</div>
              </div>
              <div className="meta">
                <div className="meta-top">
                  <h3>{c.title}</h3>
                  <span className="industry">{c.industry}</span>
                </div>
                <p className="desc">{c.desc}</p>
                <div className="chips">
                  {c.chips.map((ch) => <span className="chip" key={ch}>{ch}</span>)}
                </div>
              </div>
            </a>
          ))}
        </div>

        <div style={{display: "flex", justifyContent: "center", marginTop: 56}}>
         <a className="btn btn-primary" href="Grabsoft Digital Company Deck.pdf" target="_blank" rel="noopener noreferrer">
             See the full portfolio <ArrowSm2/>
        </a>
        </div>
      </div>
    </section>
  );
}

function ArrowSm2() {
  return (
    <svg className="arrow-rotate" width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* ---------------- Process ---------------- */
function Process() {
  const steps = [
    { n: "01", title: "Discover", desc: "We start with research. Stakeholders, users, competitors, business model — until the brief is sharper than when it arrived.", items: ["Stakeholder interviews", "Competitive audit", "User research", "Opportunity map"] },
    { n: "02", title: "Define", desc: "Strategy turns into shape. Information architecture, user flows, brand pillars, and a measurable success spec.", items: ["IA & user flows", "Brand strategy", "Success metrics", "Roadmap"] },
    { n: "03", title: "Design", desc: "Wireframes harden into a design system. Every decision documented so engineering can move at full speed.", items: ["Wireframes", "Design system", "Hi-fi screens", "Prototyping"] },
    { n: "04", title: "Deploy", desc: "Engineering ships. We pair with your team or run the whole stack — and stay after launch to grow what we built.", items: ["Full-stack build", "QA & launch", "Analytics", "Iterate & scale"] },
  ];
  return (
    <section className="process section-pad" id="process">
      <div className="wrap">
        <div className="process-head">
          <h2>A <em>four-act</em> operating system for shipping.</h2>
          <div>
            <span className="eyebrow" style={{marginBottom: 16, display:"inline-flex"}}>The process</span>
            <p style={{color: "var(--mute)", margin: 0, fontSize: 17, lineHeight: 1.5, maxWidth: 460}}>Engagements run 3–5 months on average, sized between $10K–$40K+. Same operating system, every time, regardless of scope.</p>
          </div>
        </div>
        <div className="process-steps">
          {steps.map((s) => (
            <div className="proc-step" key={s.n}>
              <div className="proc-num">{s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
              <ul className="proc-list">
                {s.items.map((it) => <li key={it}>{it}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Client Ticker ---------------- */
function ClientTicker() {
  const [active, setActive] = React.useState(null);
  
  const ref = React.useRef(null);

 React.useEffect(() => {
  const io = new IntersectionObserver(
    ([entry]) => {
      if (entry.isIntersecting) {
        ref.current.classList.add("ticker-visible");
        ref.current.querySelector(".ticker-outer").classList.add("ticker-visible");
      }
    },
    { threshold: 0.2 }
  );
  if (ref.current) io.observe(ref.current);
  return () => io.disconnect();
}, []);

  const clients = [
    { name: "Bay CSR",        logo: "assets/clients/bay-csr.png" },
    { name: "Nagad",          logo: "assets/clients/nagad.png" },
    { name: "Geeoo",          logo: "assets/clients/geeoo.png" },
    { name: "Valerie Taylor", logo: "assets/clients/valerie-taylor.png" },
    { name: "Kabab Factory",  logo: "assets/clients/kabab-factory.png" },
    { name: "MA Malique",     logo: "assets/clients/ma-malique.png" },
    { name: "Give Us A Lift", logo: "assets/clients/give-us-a-lift.png" },
    { name: "BNP",            logo: "assets/clients/bnp.png" },
    { name: "SchoolEdge",     logo: "assets/clients/schooledge.png" },
    { name: "Kenda",          logo: "assets/clients/kenda.png" },
    { name: "Neer Resort",    logo: "assets/clients/neer-resort.png" },
    { name: "BCSIR",          logo: "assets/clients/bcsir.png" },
    { name: "Flipper",        logo: "assets/clients/flipper.png" },
    { name: "Sharif Group",   logo: "assets/clients/sharif-group.png" },
    { name: "Hi-Speed",       logo: "assets/clients/hi-speed.png" },
    { name: "iQQra",          logo: "assets/clients/iqqra.png" },
  ];

  const track = [...clients, ...clients];

  return (
    <section className="client-ticker" ref={ref}>
      <div className="ticker-label">
        <span className="eyebrow">Our Happy Clients</span>
      </div>
      <div className="ticker-outer">
        <div className="ticker-track">
          {track.map((c, i) => (
            <div
              className={`ticker-item ${active === i ? "active" : ""}`}
              key={i}
              onClick={() => setActive(active === i ? null : i)}
            >
              <img src={c.logo} alt={c.name} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Capabilities ---------------- */
function Capabilities() {
  const groups = [
    { n: "A", title: "Branding & Identity", pills: ["Brand research", "Architecture", "Naming", "Identity guidelines", "Rebranding", "Marketing collateral"] },
    { n: "B", title: "UI/UX & Product", pills: ["Competitive benchmarking", "Customer research", "User flows", "Wireframes", "Design systems", "Prototyping"] },
    { n: "C", title: "Digital Experience", pills: ["Promo video", "2D / 3D illustration", "Motion design", "AR & VR", "Brand films", "Social systems"] },
    { n: "D", title: "Engineering", pills: ["Websites", "Webflow / WordPress", "Headless CMS", "Front-end", "Back-end", "Full-stack apps", "QA"] },
  ];
  return (
    <section className="capabilities section-pad" id="capabilities">
      <div className="wrap">
        <div className="cap-head">
          <h2>One studio, <em>four</em> deep stacks.</h2>
          <p>Pick a single discipline or commission the whole studio. We've engineered our workflow so each capability compounds the others — research informs design, design informs engineering, engineering informs growth.</p>
        </div>
        <div className="cap-grid">
          {groups.map((g) => (
            <div className="cap-card" key={g.n}>
              <div className="head">
                <span className="num">STACK · {g.n}</span>
                <span className="num">{String(g.pills.length).padStart(2, "0")} capabilities</span>
              </div>
              <h4>{g.title}</h4>
              <div className="pills">
                {g.pills.map((p) => <span className="pill" key={p}>{p}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Big wordmark band ---------------- */
function BigMark() {
  return (
    <section className="bigmark">
      <img src="assets/Grabsoft-digital-white.png" alt="Grabsoft Digital" style={{width: "min(82vw, 1100px)", height: "auto"}}/>
    </section>
  );
}
/* ---------------- Contact ---------------- */
function Contact() {
  return (
    <section className="contact" id="contact">
      <div className="contact-glow"></div>
      <div className="wrap contact-grid">
        <div className="contact-left">
          <span className="eyebrow" style={{marginBottom: 28, display:"inline-flex"}}>Start a project · Q3 ’26 open</span>
          <h2>Let's build the next <em>good</em> one, together.</h2>
          <div className="pill-row">
            <a href="mailto:grabsoftdigital@gmail.com" className="big-btn">
              <span className="ico"><ArrowLgInline/></span>
              Start the conversation
            </a>
          </div>
          <p style={{color: "var(--mute)", maxWidth: 420, margin: 0}}>
            Engagements typically run $10K–$40K+ over 3–5 months. We'll reply within one business day with a short questionnaire and a 30-minute intro call.
          </p>
        </div>
        <div className="contact-info">
          <div className="info-card">
            <span className="lbl">Studio</span>
            <span className="val">House No. 6, 3rd Lane,<br/>Kalabagan, Dhaka, Bangladesh</span>
          </div>
          <div className="info-card">
            <span className="lbl">Write</span>
            <span className="val">grabsoftdigital@gmail.com</span>
          </div>
          <div className="info-card">
            <span className="lbl">Call</span>
            <span className="val">+880 176 3734 883</span>
          </div>
          <div className="info-card">
            <span className="lbl">Hours · GMT+6</span>
            <span className="val">Sun–Thu, 10:00 → 19:00</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function ArrowLgInline() {
  return (
    <svg width="16" height="16" viewBox="0 0 14 14" fill="none">
      <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <a href="#top" className="nav-logo" aria-label="Grabsoft Digital home">
              <img src="assets/grabsoft-logo-dark.png" alt="Grabsoft Digital"/>
            </a>
            <p>A full-service digital studio building products, brands and growth engines for ambitious teams. Dhaka, Bangladesh — shipping worldwide since 2020.</p>
          </div>
          <div>
            <h5>Studio</h5>
            <ul>
              <li><a href="#work">Selected work</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#capabilities">Capabilities</a></li>
            </ul>
          </div>
          <div>
            <h5>Channels</h5>
            <ul>
              <li><a href="https://www.facebook.com/grabsoft" target="_blank" rel="noopener">Facebook</a></li>
              <li><a href="https://www.youtube.com/@GrabsoftDigital" target="_blank" rel="noopener">YouTube</a></li>
              <li><a href="#contact">LinkedIn</a></li>
              <li><a href="#contact">Instagram</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:grabsoftdigital@gmail.com">grabsoftdigital@gmail.com</a></li>
              <li><a href="tel:+8801763734883">+880 176 3734 883</a></li>
              <li><a href="#">Kalabagan, Dhaka, BD</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2020–2026 GRABSOFT DIGITAL · ALL RIGHTS RESERVED</span>
          <div className="soc">
            <a href="https://www.facebook.com/grabsoft" target="_blank" rel="noopener" aria-label="Facebook">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
              </svg>
            </a>
            <a href="https://www.youtube.com/@GrabsoftDigital" target="_blank" rel="noopener" aria-label="YouTube">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"/>
                <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="#0B0E0C"/>
              </svg>
            </a>
            <a href="#contact" aria-label="Instagram">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
              </svg>
            </a>
            <a href="#contact" aria-label="LinkedIn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Work = Work;
window.ClientTicker = ClientTicker;
window.Process = Process;
window.Capabilities = Capabilities;
window.BigMark = BigMark;
window.Contact = Contact;
window.Footer = Footer;