// Workers.jsx — S3: "What we build" — expandable starting-point cards.
// Desktop: 5 expandable cards in a grid (+ a CTA card). Mobile: a tabbed switcher.
function WorkerBody({ w, open, statik }) {
  return (
    <React.Fragment>
      <div className="worker-card__head">
        <Orb icon={w.icon} tone={w.tone} size={48} />
        <div style={{ flex: 1 }}>
          <div className="worker-card__name">{w.name}</div>
          <div className="worker-card__role">{w.role}</div>
        </div>
      </div>
      <p className="worker-card__flow">{w.flow}</p>
      <div style={{ marginTop: 14 }}><Pill kind={w.statusKind}>{w.status}</Pill></div>

      <div className={"worker-detail" + (statik ? " is-static" : "")}
        style={statik ? undefined : { maxHeight: open ? 360 : 0, opacity: open ? 1 : 0, marginTop: open ? 18 : 0 }}>
        <div className="worker-meta-row">
          <i className="ri-checkbox-circle-line" />
          <span className="lbl">Includes</span>
          <span className="val" style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
            {w.includes.map((t) => <ToolChip key={t}>{t}</ToolChip>)}
          </span>
        </div>
        <div className="worker-meta-row">
          <i className="ri-focus-2-line" />
          <span className="lbl">Designed for</span>
          <span className="val">{w.approval}</span>
        </div>
      </div>
    </React.Fragment>
  );
}

function WorkerCards() {
  const workers = [
    {
      id: "fullsite", name: "Full Website Design & Development", role: "Strategy to launch", tab: "Full Website", icon: "ri-stack-line", tone: "halo",
      flow: "A premium website designed around your business, offer, proof, and next step, then developed into a fast, responsive site your team does not have to babysit.",
      includes: ["Site strategy", "Homepage", "Core pages", "Design and development", "Launch setup"],
      approval: "Businesses that need a sharper site live quickly, without managing the whole process themselves.",
      status: "Most common starting point", statusKind: "active",
    },
    {
      id: "landing", name: "Landing Pages", role: "Campaigns and offers", tab: "Landing", icon: "ri-flashlight-line", tone: "magenta",
      flow: "Focused pages for campaigns, services, locations, paid traffic, or specific offers where one page needs to do one job clearly.",
      includes: ["Offer structure", "Proof placement", "CTA path", "Mobile layout", "Tracking-ready setup"],
      approval: "Businesses that need a page built around a specific action, like calls, bookings, quote requests, or inquiries.",
      status: "Conversion-focused", statusKind: "approved",
    },
    {
      id: "care", name: "Hosting & Site Care", role: "After launch", tab: "Site Care", icon: "ri-shield-check-line", tone: "violet",
      flow: "Managed hosting, maintenance, security updates, basic support, and light monthly changes so the site keeps working after launch.",
      includes: ["Hosting", "Maintenance", "Security updates", "Basic support", "Light monthly updates"],
      approval: "Owners who want the site handled without chasing developers for every small change.",
      status: "Managed support", statusKind: "pending",
    },
    {
      id: "content", name: "Content Systems & CMS", role: "Publishing", tab: "Content", icon: "ri-article-line", tone: "violet",
      flow: "Content structures that make updates easier, including blogs, resources, service pages, or repeatable content connected to tools your team already uses.",
      includes: ["CMS setup", "Blog structure", "Resource pages", "Notion or Google Docs workflows", "Content publishing support"],
      approval: "Businesses that want to publish or update content without learning a complicated website backend.",
      status: "Easy to update", statusKind: "monitored",
    },
    {
      id: "leadflow", name: "Lead Flow & Integrations", role: "Capture and handoff", tab: "Lead Flow", icon: "ri-share-forward-line", tone: "magenta",
      flow: "Forms, bookings, CRM handoffs, notifications, and simple automations that make sure website leads go where they need to go.",
      includes: ["Forms", "Booking flows", "CRM connection", "Email alerts", "Simple automations"],
      approval: "Teams that want fewer dropped leads and less manual follow-up.",
      status: "Fewer dropped leads", statusKind: "monitored",
    },
  ];
  const [open, setOpen] = useState({ fullsite: true });
  const [glow, setGlow] = useState("fullsite");
  const [active, setActive] = useState(0);
  const toggle = (id) => setOpen((o) => ({ ...o, [id]: !o[id] }));
  const isMobile = useIsMobile(720);
  const gridRef = useReveal();
  const tabRef = useReveal();

  const notSure = (
    <div className="worker-card card-mat worker-card--cta" style={{ "--bi": 5, justifyContent: "center", alignItems: "flex-start", borderStyle: "dashed", cursor: "default", background: "transparent" }}>
      <span className="card-beam" aria-hidden="true" style={{ "--bi": 5 }} />
      <i className="ri-add-circle-line" style={{ fontSize: 26, color: "var(--magenta-300)" }} />
      <div className="worker-card__name" style={{ marginTop: 14 }}>Not sure where to start?</div>
      <p className="worker-card__flow" style={{ marginTop: 8 }}>Send your current site. We will review what is holding it back and show you the best starting point before the meeting.</p>
      <a href="#cta" className="worker-card__toggle" style={{ textDecoration: "none" }}>Get my first-page design <i className="ri-arrow-right-line" style={{ fontSize: 16 }} /></a>
    </div>
  );

  return (
    <section id="workers" className="section section--raised">
      <div className="haze-bloom" style={{ opacity: 0.18 }} />
      <div className="wrap" style={{ position: "relative" }}>
        <SectionHead eyebrow="Services" maxWidth={760}
          lead="Siteworks can handle the strategy, design, development, hosting, updates, content system, and lead flow behind your website. Start with a full site, a landing page, or the part of your current site that is holding the business back.">
          Everything your website needs to launch well and <span className="gradient-text">stay easy to run.</span>
        </SectionHead>

        {isMobile ? (
          <div ref={tabRef} className="reveal worker-tabwrap">
            <div className="worker-tabs" role="tablist">
              {workers.map((w, i) => (
                <button key={w.id} role="tab" aria-selected={active === i}
                  className={"worker-tab" + (active === i ? " on" : "")} onClick={() => setActive(i)}>
                  <i className={w.icon} /><span>{w.tab}</span>
                </button>
              ))}
            </div>
            <div key={workers[active].id} className="worker-card is-open worker-tab-card">
              <WorkerBody w={workers[active]} open={true} statik={true} />
            </div>
            {notSure}
          </div>
        ) : (
          <div ref={gridRef} className="reveal worker-grid" style={{ marginTop: 52 }}>
            {workers.map((w, i) => {
              const isOpen = !!open[w.id];
              return (
                <div key={w.id} className={`worker-card card-mat ${isOpen ? "is-open" : ""} ${glow === w.id ? "is-glow" : ""}`} style={{ "--bi": i }} onClick={() => toggle(w.id)} onMouseEnter={() => setGlow(w.id)}>
                  <span className="card-beam" aria-hidden="true" style={{ "--bi": i }} />
                  <WorkerBody w={w} open={isOpen} />
                  <button className="worker-card__toggle" onClick={(e) => { e.stopPropagation(); toggle(w.id); }}>
                    {isOpen ? "Hide details" : "See what's included"}
                    <i className={isOpen ? "ri-arrow-up-s-line" : "ri-arrow-down-s-line"} style={{ fontSize: 17 }} />
                  </button>
                </div>
              );
            })}
            {notSure}
          </div>
        )}

        <p className="examples-note">
          <i className="ri-sparkling-line" />
          When it makes sense, Siteworks can also connect Taurist AI workers to help with intake, follow-up, content updates, or internal handoffs.
        </p>
      </div>
    </section>
  );
}
Object.assign(window, { WorkerCards });