vibn-agent-runner/vibn-frontend/_onboarding/onboarding-entrepreneur.tsx

import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
import { WizardTop, WizardBody, WizardQ, WizardFooter, Label, LANE_LABELS, ChipGroup, PresetGroup, Field } from "./onboarding-primitives";
// Entrepreneur path — 4 steps. Each step is a focused question.

const ENTREP_TOTAL = 4;
const ENTREP_STEP_NAMES = ["Idea", "Audience", "Goal", "Look"];

const IDEA_PROMPTS = [
  "A community for indie game devs to swap playtesters, with weekly demo nights",
  "An AI tool that turns my handwritten recipe notes into a clean cookbook for my family",
  "A waitlist + scheduler for my pottery studio — small classes, six people max",
  "A subscription box service for cold-brew enthusiasts, with monthly tasting cards",
  "A simple tool that turns my Strava data into framed art prints I can sell",
];

export function EntrepIdea({ value, onChange }) {
  const [phIdx, setPhIdx] = React.useState(0);
  const [phChars, setPhChars] = React.useState(0);
  const [deleting, setDeleting] = React.useState(false);

  React.useEffect(() => {
    if (value.length > 0) return undefined;
    const full = IDEA_PROMPTS[phIdx];
    const speed = deleting ? 18 : 38;
    const t = setTimeout(() => {
      if (!deleting) {
        if (phChars < full.length) setPhChars(phChars + 1);
        else setTimeout(() => setDeleting(true), 1500);
      } else {
        if (phChars > 0) setPhChars(phChars - 1);
        else { setDeleting(false); setPhIdx((phIdx + 1) % IDEA_PROMPTS.length); }
      }
    }, speed);
    return () => clearTimeout(t);
  }, [value, phIdx, phChars, deleting]);

  return (
    <>
      <WizardQ
        title="What are you building?"
        sub="One paragraph is enough. Talk like you would to a friend."
      />
      <div style={{ position: "relative" }}>
        <textarea
          className="wiz-input"
          style={{ minHeight: 140, fontSize: 15 }}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          autoFocus
          aria-label="Describe your idea"
        />
        {value.length === 0 && (
          <div
            style={{
              position: "absolute", top: 12, left: 14, right: 14,
              pointerEvents: "none",
              color: "var(--fg-faint)",
              font: "14.5px/1.5 var(--font-sans)",
            }}
          >
            {IDEA_PROMPTS[phIdx].slice(0, phChars)}
            <span
              style={{
                display: "inline-block",
                width: 7, height: 14, verticalAlign: "-2px",
                background: "var(--accent)", marginLeft: 1,
                animation: "blink 1s steps(2) infinite",
                boxShadow: "0 0 10px var(--accent-glow)",
              }}
            />
          </div>
        )}
      </div>
      <div
        className="mono"
        style={{ fontSize: 11, color: "var(--fg-faint)", letterSpacing: "0.06em", marginTop: -16 }}
      >
        {value.length} chars · be specific where it matters
      </div>
    </>
  );
}

const AUDIENCE_PRESETS = [
  "Me and people like me",
  "A small community I'm part of",
  "Local people in my city",
  "Anyone searching for this",
  "Other small businesses",
  "Hobbyists in a niche I love",
];

function EntrepAudience({ value, onChange }) {
  const isPreset = AUDIENCE_PRESETS.includes(value);
  return (
    <>
      <WizardQ
        title="Who is it for?"
        sub="The clearer your audience, the better the copy Vibn writes for it."
      />
      <ChipGroup
        options={AUDIENCE_PRESETS}
        values={value ? [value] : []}
        onChange={(arr) => onChange(arr[arr.length - 1] || "")}
      />
      <Field label="Or describe them in your own words" optional>
        <input
          className="wiz-input"
          placeholder="e.g. dog owners in Brooklyn who walk before work"
          value={!isPreset ? value : ""}
          onChange={(e) => onChange(e.target.value)}
        />
      </Field>
    </>
  );
}

const GOALS = [
  { id: "first_customer", icon: "🎯", label: "First real customer",
    desc: "Someone I don't know pays me. Even once." },
  { id: "ten_users", icon: "👥", label: "Ten weekly users",
    desc: "A signal the thing actually does something useful." },
  { id: "mrr_1k", icon: "📈", label: "$1k MRR",
    desc: "Enough to take it seriously." },
  { id: "side_quit", icon: "🚪", label: "Replace my day job",
    desc: "The long road. Make this the main thing." },
  { id: "audience", icon: "📣", label: "Build a tiny audience",
    desc: "200 emails, a community, something I can talk to." },
  { id: "ship_it", icon: "🚀", label: "Just ship it",
    desc: "I want the thing to exist." },
];

function EntrepGoal({ value, onChange }) {
  return (
    <>
      <WizardQ
        title="What does “working” look like?"
        sub="Helps Vibn decide what to build first — a landing page that converts, or a tool that retains."
      />
      <PresetGroup
        options={GOALS.map((g) => ({
          id: g.id, label: g.label, desc: g.desc,
          icon: <span style={{ fontSize: 14 }}>{g.icon}</span>,
        }))}
        value={value}
        onChange={onChange}
        columns={2}
      />
    </>
  );
}

const VIBES = [
  { id: "warm", name: "Warm coral",  swatch: "linear-gradient(135deg, #E27855, #B33B2A)",
    desc: "Confident, hand-built, warm." },
  { id: "ink", name: "Ink & paper",   swatch: "linear-gradient(135deg, #1d1d1d, #4a4a4a)",
    desc: "Editorial, serif, quiet." },
  { id: "sage", name: "Sage matte",   swatch: "linear-gradient(135deg, #7BA890, #3F6B57)",
    desc: "Calm, modern, slightly herbal." },
  { id: "neon", name: "Neon arcade",  swatch: "linear-gradient(135deg, #5B6CFF, #FF3DDB)",
    desc: "Loud, fun, late-night." },
  { id: "cream", name: "Cream linen", swatch: "linear-gradient(135deg, #F2E7D5, #C9A977)",
    desc: "Cozy and beige." },
  { id: "later", name: "Decide later", swatch: "repeating-linear-gradient(45deg, oklch(0.30 0.010 60), oklch(0.30 0.010 60) 6px, oklch(0.22 0.010 60) 6px, oklch(0.22 0.010 60) 12px)",
    desc: "Vibn picks one that fits." },
];

function EntrepVibe({ value, onChange }) {
  return (
    <>
      <WizardQ
        title="Pick a starting vibe."
        sub="Every color and font is a tweak away once the site is live."
      />
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 10,
        }}
      >
        {VIBES.map((v) => {
          const active = value === v.id;
          return (
            <button
              key={v.id}
              type="button"
              onClick={() => onChange(v.id)}
              style={{
                padding: "10px 10px 10px",
                borderRadius: 11,
                border: `1px solid ${active ? "var(--accent)" : "var(--hairline)"}`,
                background: active ? "oklch(0.20 0.04 35 / 0.4)" : "oklch(0.18 0.009 60 / 0.6)",
                boxShadow: active ? "0 0 0 3px oklch(0.74 0.175 35 / 0.1)" : "none",
                textAlign: "left",
                color: "var(--fg)",
                display: "flex", flexDirection: "column", gap: 8,
                transition: "border-color .15s, background .15s",
              }}
            >
              <span
                style={{
                  height: 52, borderRadius: 7,
                  background: v.swatch,
                  border: "1px solid oklch(1 0 0 / 0.08)",
                  boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.18)",
                }}
              />
              <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: "-0.005em" }}>
                {v.name}
              </span>
              <span style={{ fontSize: 11.5, color: "var(--fg-mute)", lineHeight: 1.4 }}>
                {v.desc}
              </span>
            </button>
          );
        })}
      </div>
    </>
  );
}

// ── Path wrapper ───────────────────────────────────────────────────────────
export function EntrepreneurPath({ data, onUpdate, onBack, onClose, onComplete, onJumpToStep, step }) {
  const next = () => {
    if (step < ENTREP_TOTAL - 1) onJumpToStep(step + 1);
    else onComplete();
  };
  const back = () => {
    if (step === 0) onBack();
    else onJumpToStep(step - 1);
  };

  let body, canNext, onSkip = null;
  if (step === 0) {
    body = <EntrepIdea value={data.idea || ""} onChange={(v) => onUpdate({ idea: v })} />;
    canNext = (data.idea || "").trim().length >= 8;
  } else if (step === 1) {
    body = <EntrepAudience value={data.audience || ""} onChange={(v) => onUpdate({ audience: v })} />;
    canNext = (data.audience || "").trim().length >= 3;
  } else if (step === 2) {
    body = <EntrepGoal value={data.goal} onChange={(v) => onUpdate({ goal: v })} />;
    canNext = !!data.goal;
  } else {
    body = <EntrepVibe value={data.vibe} onChange={(v) => onUpdate({ vibe: v })} />;
    canNext = !!data.vibe;
    onSkip = () => { onUpdate({ vibe: "later" }); next(); };
  }

  // 5 total: fork(1) + 4 path steps
  return (
    <>
      <WizardTop
        onBack={back}
        onClose={onClose}
        lane={LANE_LABELS.entrepreneur}
        stepText={ENTREP_STEP_NAMES[step]}
        current={step + 2}
        total={5}
      />
      <WizardBody width={step === 2 || step === 3 ? "wide" : null}>
        {body}
        <WizardFooter
          onNext={next}
          canNext={canNext}
          nextLabel={step === ENTREP_TOTAL - 1 ? "Build →" : "Continue"}
          hint={canNext ? "⌘↵" : null}
          onSkip={onSkip}
          skipLabel="Pick for me"
        />
      </WizardBody>
    </>
  );
}