/* =========================================================
   Shadowbiz — part2.jsx : Work, Services, Products, Case, About
   ========================================================= */

/* ---- resource resolver: uses bundled blob URLs offline, real paths otherwise ---- */
const R = (id, path) => (typeof window !== "undefined" && window.__resources && window.__resources[id]) || path;

/* ---- real shipped work (client builds) ---- */
const WORK = [
  { logo: R("logoBasswala", "assets/logos/basswala.png"), fit: "dark", name: "Basswala", domain: "basswala.com",
    type: "DJ-booking & rental marketplace",
    blurb: "A two-sided platform to book DJs for events — a customer marketplace plus the BassCaptain partner app where DJs grab gigs, take payouts, navigate by GPS and verify bookings with QR.",
    built: ["Web app", "iOS & Android", "Partner app"] },
  { logo: R("logoGenz", "assets/logos/genzaawara.png"), fit: "fill", name: "GenZ Aawara", domain: "zenzaawara.com",
    type: "AI travel agency",
    blurb: "An AI-powered travel platform — curated trips and events with online ticket booking, so travellers can discover, plan and book the whole journey in one place.",
    built: ["Web app", "AI planner", "Bookings"] },
  { logo: R("logoJoy", "assets/logos/joykonark.png"), fit: "contain", name: "Joy Konark", domain: "joykonark.com",
    type: "CBCT dental-imaging centre",
    blurb: "Healthtech for a CBCT dental-imaging & training centre — a public site, an assistant chatbot, and an admin panel to run reporting and the centre day-to-day.",
    built: ["Website", "Chatbot", "Admin panel"] },
  { logo: R("logoCca", "assets/logos/cca.png"), fit: "contain", name: "CCA Group of Education", domain: "ccagroupofeducation.com",
    type: "Education group",
    blurb: "A public website plus a custom ERP for an education group — admissions, academics and day-to-day operations in one system built around how they actually run.",
    built: ["Website", "ERP software"] },
  { logo: R("logoNucap", "assets/logos/nucap.png"), fit: "contain", name: "Nucap Global", domain: "nucapglobal.com",
    type: "Investment advisory & venture capital",
    blurb: "A corporate platform for a fund-management and advisory ecosystem — VC & NBFC structuring, startup mentorship and AI-led research, presented to investor-grade standards.",
    built: ["Website"] },
  { logo: R("logoCross", "assets/logos/crossroad.png"), fit: "contain", name: "The Crossroad Times", domain: "thecrossroadtimes.com",
    type: "Media & podcast publication",
    blurb: "A publication on strategy, capital and technology — editorial website with an assistant chatbot, tied to a running podcast.",
    built: ["Website", "Chatbot"] },
];

/* ---- selected work index ---- */
function SelectedWork() {
  return (
    <section className="section wrap" id="work">
      <div className="method-head">
        <div>
          <div className="reveal"><span className="eyebrow"><span className="num">04</span> Selected work</span></div>
          <h2 className="title reveal d1" style={{ marginTop: 22, maxWidth: "16ch" }}>Built for real businesses</h2>
        </div>
        <p className="lede reveal d2" style={{ maxWidth: "34ch" }}>
          Marketplaces, healthtech, ERPs, chatbots and full product brands — each one shaped around a specific business and the people inside it.
        </p>
      </div>
      <div className="work-index">
        {WORK.map((w, i) => (
          <a className={"wx-row reveal d" + (Math.min(i + 1, 4))} key={w.name} href="#contact">
            <span className="wx-idx">{String(i + 1).padStart(2, "0")}</span>
            <span className="wx-id">
              <span className={"wx-logo " + w.fit}>
                <img src={w.logo} alt={w.name + " logo"} loading="lazy" />
              </span>
              <span className="wx-id-text">
                <span className="wx-name">{w.name}</span>
                <span className="wx-domain">{w.domain}</span>
              </span>
            </span>
            <span className="wx-mid">
              <span className="wx-type">{w.type}</span>
              <span className="wx-blurb">{w.blurb}</span>
            </span>
            <span className="wx-tags">
              {w.built.map((t) => <span className="wx-tag" key={t}>{t}</span>)}
            </span>
            <span className="wx-arrow"><Icon name="arrow" size={18} /></span>
          </a>
        ))}
      </div>
    </section>
  );
}

function Services() {
  const svc = [
    { lead: true, ic: "compass", h: "Tech & Business Advisory",
      p: "We study the business from the inside, find the gap nobody fixed, and map the smallest thing that creates the biggest change.",
      tags: ["Discovery", "Diagnosis", "Roadmap"] },
    { ic: "blocks", h: "Custom Solutions Studio",
      p: "Software built for one business and the humans inside it — internal tools, dashboards, automations. No off-the-shelf compromises.",
      tags: ["Design", "Engineering", "Internal tools"] },
    { ic: "spark", h: "Product Brand Building",
      p: "When a solution outgrows one client, we give it a name, an identity and a life of its own. Crestly is the first.",
      tags: ["Naming", "Identity", "Launch"] },
  ];
  return (
    <section className="section wrap" id="services">
      <div className="method-head">
        <div>
          <div className="reveal"><span className="eyebrow"><span className="num">03</span> What we do</span></div>
          <h2 className="title reveal d1" style={{ marginTop: 22 }}>Three ways we help</h2>
        </div>
        <p className="lede reveal d2" style={{ maxWidth: "34ch" }}>
          One studio, three depths of engagement — from a second opinion to a fully-branded product.
        </p>
      </div>
      <div className="svc-grid">
        {svc.map((s, i) => (
          <div className={"svc reveal d" + (i + 1) + (s.lead ? " lead" : "")} key={s.h}>
            <div className="si"><Icon name={s.ic} size={24} /></div>
            <div className="sh">{s.h}</div>
            <div className="sp">{s.p}</div>
            <div className="sl">{s.tags.map(t => <b key={t}>{t}</b>)}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---- Products ---- */
const PRODUCTS = [
  { id: "crestly", name: "Crestly", status: "live", statusLabel: "Live · 17 May 2026",
    statColor: "#65a30d", icon: "school",
    tag: "OPERATING SYSTEM FOR SCHOOLS", tagBg: "var(--lime-pale)", tagColor: "var(--lime-deep)",
    desc: <>A complete operating system for schools — <b>built after 12 months inside real classrooms.</b> The first Shadowbiz product brand, with its own logo, colour and type.</>,
    stats: [["8+", "Modules"], ["12mo", "In classrooms"], ["crestly.in", "Live now"]],
    accent: "#84cc16",
    mock: "school" },
  { id: "stockloom", name: "Stockloom", status: "research", statusLabel: "In research · 2027",
    statColor: "#8a9a8e", icon: "bag",
    tag: "OPERATING SYSTEM FOR GARMENT RETAIL", tagBg: "var(--cream-deep)", tagColor: "var(--ink60)",
    desc: <>A smart operating system for garment retail — stock, billing, size/colour inventory and multi-store control. <b>Built with real shopkeepers.</b></>,
    stats: [["1 Jan", "Launch 2027"], ["Multi", "Store control"], ["stockloom.in", "Brand in progress"]],
    accent: "#2e4a3e",
    mock: "retail" },
];

function MockScreen({ kind, accent }) {
  const light = "rgba(29,58,46,.10)", lighter = "rgba(29,58,46,.06)";
  const bg = kind === "school"
    ? "linear-gradient(150deg,#f3f6ec,#e7efd8)"
    : "linear-gradient(150deg,#f1efe6,#e7e2d4)";
  return (
    <div className="mock" style={{ background: bg }}>
      <div className="mock-top">
        <span className="mock-dot" style={{ background: accent }} />
        <span className="mock-dot" style={{ background: light }} />
        <span className="mock-dot" style={{ background: light }} />
        <span className="mock-row" style={{ width: 70, marginLeft: 8, background: light }} />
      </div>
      <div className="mock-body">
        <div className="mock-side">
          <span className="mock-row" style={{ background: accent, width: "60%", opacity: .85 }} />
          {[1,2,3,4,5].map(i => <span key={i} className="mock-row" style={{ background: i === 2 ? light : lighter, width: i % 2 ? "90%" : "70%" }} />)}
        </div>
        <div className="mock-main">
          <div style={{ display: "flex", gap: 12 }}>
            {[0,1,2].map(i => (
              <div key={i} style={{ flex: 1, height: 56, borderRadius: 10, background: i === 0 ? accent : light, opacity: i === 0 ? .9 : 1, display: "flex", flexDirection: "column", justifyContent: "center", padding: 12, gap: 6 }}>
                <span style={{ height: 8, width: "55%", borderRadius: 3, background: i === 0 ? "rgba(245,241,232,.7)" : lighter }} />
                <span style={{ height: 14, width: "40%", borderRadius: 3, background: i === 0 ? "rgba(245,241,232,.95)" : light }} />
              </div>
            ))}
          </div>
          <div className="mock-card" style={{ background: lighter, position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", left: 16, right: 16, bottom: 14, top: 14, display: "flex", alignItems: "flex-end", gap: 8 }}>
              {[40,65,48,80,58,72,90,52].map((h, i) => (
                <span key={i} style={{ flex: 1, height: h + "%", borderRadius: 4, background: i === 6 ? accent : light }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Products() {
  const [active, setActive] = useState(0);
  const p = PRODUCTS[active];
  return (
    <section className="section wrap" id="products">
      <div className="prod-head">
        <div>
          <div className="reveal"><span className="eyebrow"><span className="num">05</span> Product brands</span></div>
          <h2 className="title reveal d1" style={{ marginTop: 22, maxWidth: "16ch" }}>Solutions that became brands</h2>
        </div>
        <div className="prod-tabs reveal d2" role="tablist">
          {PRODUCTS.map((pr, i) => (
            <button key={pr.id} className={"prod-tab" + (i === active ? " on" : "")}
              role="tab" aria-selected={i === active} onClick={() => setActive(i)}>
              {i === active && <span className="pill-bg" />}
              <span className="stat" style={{ background: pr.statColor }} />
              {pr.name}
            </button>
          ))}
        </div>
      </div>

      <div className="prod-panel" key={p.id}>
        <div className="prod-info prod-fade">
          <span className="ptag" style={{ background: p.tagBg, color: p.tagColor }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: p.statColor }} />
            {p.statusLabel}
          </span>
          <div className="pname">{p.name}</div>
          <div className="mono-tag" style={{ marginTop: 12, letterSpacing: ".1em", textTransform: "uppercase", fontSize: 11.5 }}>{p.tag}</div>
          <p className="pdesc">{p.desc}</p>
          <div className="prod-stats">
            {p.stats.map(([n, l], i) => (
              <div className="ps" key={i}>
                <div className="psn">{n}</div>
                <div className="psl">{l}</div>
              </div>
            ))}
          </div>
          <div className="pcta">
            <Btn kind="ink" href="#contact" withArrow>{p.status === "live" ? "Visit Crestly" : "Follow the build"}</Btn>
            <Btn kind="ghost" href="#contact">Ask about {p.name}</Btn>
          </div>
        </div>
        <div className="prod-visual prod-fade">
          <MockScreen kind={p.mock} accent={p.accent} />
        </div>
      </div>
    </section>
  );
}

/* ---- Case study (dark) ---- */
function CaseStudy() {
  const stats = [
    [<>14</>, "Schools we sat inside"],
    [<>12<span className="u">mo</span></>, "Before a line of code"],
    [<>8<span className="u">+</span></>, "Modules shipped in Crestly"],
    [<>1<sup style={{fontSize:".5em"}}></sup><span className="u">st</span></>, "Shadowbiz product brand"],
  ];
  return (
    <section className="section case" id="story">
      <div className="case-glow" />
      <div className="wrap" style={{ position: "relative" }}>
        <div className="reveal"><span className="eyebrow"><span className="num" style={{color:"var(--lime-soft)"}}>06</span> The work, in their words</span></div>
        <p className="case-quote reveal d1">
          We sat in <span className="hl">14 schools for 12 months</span> before writing a single line of code.
        </p>
        <p className="case-sub reveal d2">
          Built with school leaders. Not built for them. That patience is why Crestly fits the
          way real classrooms actually run — and why it became the first Shadowbiz product brand.
        </p>
        <div className="case-stats">
          {stats.map(([n, l], i) => (
            <div className={"cstat reveal d" + (i + 1)} key={i}>
              <div className="cn">{n}</div>
              <div className="cl">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- About ---- */
function About() {
  const glance = [
    ["Discipline", <>Tech &amp; Business Advisory</>],
    ["Based in", <>India · <span className="dot">worldwide</span></>],
    ["Live products", <>Crestly</>],
    ["In research", <>Stockloom · 2027</>],
    ["Method", <>Listen → Build → Evolve</>],
  ];
  return (
    <section className="section wrap" id="about">
      <div className="about-grid">
        <div className="about-body">
          <div className="reveal"><span className="eyebrow"><span className="num">07</span> Who we are</span></div>
          <h2 className="title reveal d1" style={{ marginTop: 22, marginBottom: 30 }}>Problem solvers first.</h2>
          <p className="reveal d1"><span className="lead">Shadowbiz Startups Developer is a tech and business advisory company that works alongside businesses — not above them.</span></p>
          <p className="reveal d2">We don't arrive with pre-built products. We arrive with ears open. We study the business, talk to the people who use it every day, and uncover the gaps nobody else has bothered to fix.</p>
          <p className="reveal d3">Then we build. Sometimes it's a full product brand. Sometimes it's a quiet internal tool. Always custom. Always rooted in a real problem.</p>
        </div>
        <div className="glance reveal d2">
          <div className="gtitle">At a glance</div>
          {glance.map(([k, v], i) => (
            <div className="grow" key={i}>
              <span className="gk">{k}</span>
              <span className="gv">{v}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SelectedWork, Services, Products, CaseStudy, About });