/* global React, Glyph */
// Studio (mission) + Projects showcase — the centerpiece.

function Studio() {
  const pillars = [
    { k: "01", t: "Our own products", d: "We invent and ship niche software — focused tools that solve one job exceptionally well, like arqicraft." },
    { k: "02", t: "Custom software", d: "When a team needs something that doesn't exist yet, we design and build it end to end — by commission." },
    { k: "03", t: "Built to last", d: "We sweat the craft: fast, considered, and maintainable. Software you keep, not software you replace." },
  ];
  return (
    <section className="section" id="studio">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="eyebrow"><span className="tick"></span>The studio</div>
          <h2>
            A small studio with a<br /><span className="serif-em">stubborn</span> obsession for craft.
          </h2>
          <p>
            bebe is where ideas become software. We back our own products and partner on custom
            builds — the same care goes into both.
          </p>
        </div>

        <div className="pillars">
          {pillars.map((p, i) => (
            <div className="pillar reveal" data-d={i + 1} key={p.k}>
              <span className="pillar-k">{p.k}</span>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- mini previews (per product) ---------- */

function PreviewArqi() {
  return (
    <div className="pv pv-arqi">
      <div className="pv-bar"><span className="pv-dot"></span>arqicraft/business<span className="pv-live">LIVE</span></div>
      <div className="pv-hero">
        <div className="pv-h1">Clearline Co.</div>
        <div className="pv-h2">Strategic solutions for modern business</div>
      </div>
      <div className="pv-nav"><span className="on">Services</span><span>About</span><span>Work</span><span>Contact</span></div>
      <div className="pv-rows">
        <span><i>HERO</i><b></b></span>
        <span><i>SUB</i><b style={{ width: "60%" }}></b></span>
        <span><i>CTA</i><b className="cta">[ACTION]</b></span>
      </div>
    </div>
  );
}

function PreviewHelm() {
  return (
    <div className="pv pv-helm">
      <div className="pv-bar"><span className="pv-dot"></span>helm/workspace</div>
      <div className="kanban">
        {[["Todo", 3], ["Doing", 2], ["Done", 4]].map(([c, n]) => (
          <div className="kcol" key={c}>
            <div className="kcol-h">{c}<em>{n}</em></div>
            {Array.from({ length: n }).map((_, i) => (
              <div className="kcard" key={i} style={{ opacity: 1 - i * 0.16 }}>
                <span className="kbar" style={{ width: 70 - i * 12 + "%" }}></span>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function PreviewScout() {
  return (
    <div className="pv pv-scout">
      <div className="pv-bar"><span className="pv-dot"></span>scout/discover</div>
      <div className="scout-search"><Glyph kind="scout" size={15} color="var(--mint)" /><span>find what's nearby…</span></div>
      <div className="scout-list">
        {[78, 64, 52, 40].map((w, i) => (
          <div className="scout-item" key={i}>
            <span className="si-pin"></span>
            <span className="si-line" style={{ width: w + "%" }}></span>
            <span className="si-score">{(9.4 - i * 0.7).toFixed(1)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function PreviewCustom() {
  return (
    <div className="pv pv-custom">
      <div className="pv-bar"><span className="pv-dot"></span>commission/—</div>
      <div className="code">
        <div><span className="cm">// built to spec</span></div>
        <div><span className="kw">function</span> <span className="fn">build</span>(<span className="ar">idea</span>) {'{'}</div>
        <div className="ind"><span className="kw">return</span> <span className="fn">ship</span>(idea);</div>
        <div>{'}'}</div>
      </div>
    </div>
  );
}

const PREVIEWS = { arqi: PreviewArqi, helm: PreviewHelm, scout: PreviewScout, custom: PreviewCustom };

const PROJECTS = [
  {
    id: "arqi", code: "PRODUCT 01", name: "arqicraft", glyph: "web",
    tagline: "The niche website builder.",
    desc: "Beautiful, conversion-ready websites built around a single niche at a time — business, photography, beauty and more.",
    tags: ["Web builder", "SaaS", "Live product"],
    status: { cls: "live", label: "Live" },
    cta: "Visit arqicraft", href: "https://arqicraft.com", external: true,
    accent: "var(--arqi-amber)",
  },
  {
    id: "helm", code: "PRODUCT 02 · CODENAME", name: "HELM", glyph: "helm",
    tagline: "Management systems.",
    desc: "An operations workspace for small teams — projects, people and process in one calm, opinionated place.",
    tags: ["Management OS", "Teams", "In the lab"],
    status: { cls: "build", label: "In development" },
    cta: "Get early access", href: "#contact", external: false,
    accent: "var(--accent)",
  },
  {
    id: "scout", code: "PRODUCT 03 · CODENAME", name: "SCOUT", glyph: "scout",
    tagline: "Discovery platform.",
    desc: "A discovery engine that helps people find the right places, people and services — ranked by what actually matters.",
    tags: ["Discovery", "Marketplace", "In the lab"],
    status: { cls: "build", label: "In development" },
    cta: "Get early access", href: "#contact", external: false,
    accent: "var(--mint)",
  },
  {
    id: "custom", code: "BY COMMISSION", name: "Custom software", glyph: "custom",
    tagline: "Whatever you need built.",
    desc: "Bespoke web and software projects, designed and engineered with the same studio standard as our own products.",
    tags: ["Bespoke", "Web", "Software"],
    status: { cls: "commission", label: "Ongoing" },
    cta: "Commission a build", href: "#contact", external: false,
    accent: "var(--arqi-blue)",
  },
];

function ProjectCard({ p, i }) {
  const Preview = PREVIEWS[p.id];
  const target = p.external ? { target: "_blank", rel: "noopener noreferrer" } : {};
  return (
    <a className={"proj reveal proj-" + p.id} data-d={(i % 2) + 1} href={p.href} {...target}
       style={{ "--p-accent": p.accent }}>
      <div className="proj-preview"><Preview /></div>
      <div className="proj-body">
        <div className="proj-top">
          <span className="proj-code">{p.code}</span>
          <span className={"chip " + p.status.cls}><span className="dot"></span>{p.status.label}</span>
        </div>
        <h3 className="proj-name">
          <span className="proj-glyph" style={{ color: p.accent }}><Glyph kind={p.glyph} size={22} /></span>
          {p.name}
        </h3>
        <p className="proj-tagline">{p.tagline}</p>
        <p className="proj-desc">{p.desc}</p>
        <div className="proj-tags">{p.tags.map(t => <span key={t}>{t}</span>)}</div>
        <span className="proj-cta">{p.cta} <span className="arrow">{p.external ? "↗" : "→"}</span></span>
      </div>
    </a>
  );
}

function Projects() {
  return (
    <section className="section work" id="work">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="eyebrow"><span className="tick"></span>The work</div>
          <h2>What we're building.</h2>
          <p>One product live, more in the lab, and custom builds on commission. Every card is a real direction for bebe.</p>
        </div>
        <div className="proj-grid">
          {PROJECTS.map((p, i) => <ProjectCard key={p.id} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Studio, Projects });