// Kountchou Ryan — Portfolio · part 2
// Projects, McSite, Stack, Vision, Contact, Footer, App shell

const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

// ─── PROJECT MOCKS (visual previews drawn inline) ─────────────────────────────
function MockCallSpace() {
  return (
    <div className="mock mock-callspace">
      <div className="mock-top">
        <div className="mock-side">
          <div className="mock-logo"><span>C</span> CallSpace</div>
          {["Inbox", "Calls", "Leads", "Agents", "Insights"].map((x, i) => (
            <div key={x} className={"mock-nav " + (i === 2 ? "on" : "")}>
              <span className="mock-nav-dot"></span>{x}
            </div>
          ))}
        </div>
        <div className="mock-main">
          <div className="mock-row">
            <div>
              <div className="mock-eyebrow">Leads · live</div>
              <div className="mock-h">2,481 active conversations</div>
            </div>
            <div className="mock-chip">●  AI agent: Orion-4</div>
          </div>
          <div className="mock-kpis">
            {[["Connect rate","42.7%","+3.1"],["Avg. call","2:14","-0:08"],["Booked","318","+24"],["Pipeline","€187k","+9%"]].map(([l,v,d])=>(
              <div key={l} className="mock-kpi">
                <span>{l}</span>
                <b>{v}</b>
                <i>{d}</i>
              </div>
            ))}
          </div>
          <div className="mock-chart">
            <svg viewBox="0 0 280 80" preserveAspectRatio="none">
              <defs>
                <linearGradient id="cg" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="var(--a)" stopOpacity=".55"/>
                  <stop offset="100%" stopColor="var(--a)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0 60 L20 52 L40 56 L60 38 L80 44 L100 28 L120 34 L140 18 L160 26 L180 14 L200 22 L220 8 L240 16 L260 4 L280 12 L280 80 L0 80 Z" fill="url(#cg)"/>
              <path d="M0 60 L20 52 L40 56 L60 38 L80 44 L100 28 L120 34 L140 18 L160 26 L180 14 L200 22 L220 8 L240 16 L260 4 L280 12" fill="none" stroke="var(--a)" strokeWidth="1.4"/>
            </svg>
          </div>
          <div className="mock-list">
            {[["Amélie D.", "Booked · 14:30", "ok"], ["Studio Nova", "Follow-up tomorrow", "wait"], ["Atlas Capital", "Qualified · routed", "ok"]].map(([n,s,t],i)=>(
              <div key={i} className="mock-li">
                <span className="mock-av">{n[0]}</span>
                <span className="mock-li-n">{n}<i>{s}</i></span>
                <span className={"mock-li-t " + t}>{t === "ok" ? "✓" : "…"}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function MockMcSite() {
  return (
    <div className="mock mock-mcsite">
      <div className="mock-browser">
        <div className="mock-bbar">
          <i></i><i></i><i></i>
          <span>mcsite.express</span>
        </div>
        <div className="mock-mc-hero">
          <div className="mock-mc-eyebrow">McSite Express · est. 2024</div>
          <div className="mock-mc-h">Websites that<br/><em>elevate brands.</em></div>
          <div className="mock-mc-cta">
            <span className="mock-mc-btn">Start a project →</span>
            <span className="mock-mc-btn ghost">See work</span>
          </div>
          <div className="mock-mc-grid">
            {["Corporate", "Landing", "AI Stack", "SEO", "Automation", "Identity"].map(x => (
              <div key={x} className="mock-mc-cell">{x}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function MockProspecting() {
  return (
    <div className="mock mock-prospect">
      <div className="mock-pr-top">
        <span className="mock-pr-tag">▸ AI prospecting engine · running</span>
        <span className="mock-pr-tag dim">queue · 1,204 leads</span>
      </div>
      <div className="mock-pr-cols">
        <div className="mock-pr-col">
          <div className="mock-pr-h">scrape · maps</div>
          {["Atelier Lumière","Café Mireille","Studio Verde","Galerie Brume","Maison Onyx"].map(n=>(
            <div key={n} className="mock-pr-r"><span className="mock-pr-d ok"></span>{n}</div>
          ))}
        </div>
        <div className="mock-pr-col">
          <div className="mock-pr-h">audit · web</div>
          {[["lighthouse","62"],["mobile","ok"],["seo","48"],["a11y","81"],["heuristic","C+"]].map(([k,v])=>(
            <div key={k} className="mock-pr-r"><span className="mock-pr-d wait"></span>{k} · <b>{v}</b></div>
          ))}
        </div>
        <div className="mock-pr-col">
          <div className="mock-pr-h">generate · brief</div>
          <div className="mock-pr-txt">
            <span className="mock-pr-line w90"></span>
            <span className="mock-pr-line w70"></span>
            <span className="mock-pr-line w80"></span>
            <span className="mock-pr-line w60"></span>
            <span className="mock-pr-line w75"></span>
            <span className="mock-pr-line w50"></span>
          </div>
          <div className="mock-pr-out">→ sent to outreach.queue</div>
        </div>
      </div>
    </div>
  );
}

function MockArcEnCiel() {
  return (
    <div className="mock mock-arc">
      <div className="mock-arc-img">
        <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="arcg" x1="0" x2="1" y1="0" y2="1">
              <stop offset="0%" stopColor="#f5d7e0"/>
              <stop offset="40%" stopColor="#e8c3a8"/>
              <stop offset="100%" stopColor="#7d5d4a"/>
            </linearGradient>
          </defs>
          <rect width="320" height="200" fill="url(#arcg)"/>
          {Array.from({length: 14}).map((_,i)=>(
            <ellipse key={i} cx={20 + i * 22} cy={140 + (i%3)*8} rx="14" ry="22" fill="#fff" opacity={.35 + (i%4)*.12}/>
          ))}
          {Array.from({length: 6}).map((_,i)=>(
            <circle key={i} cx={40 + i * 50} cy={50 + (i%2)*20} r={2 + (i%3)} fill="#fff" opacity=".8"/>
          ))}
        </svg>
        <div className="mock-arc-overlay">
          <div className="mock-arc-mark">Arc en Ciel</div>
          <div className="mock-arc-sub">Event design · Cameroun</div>
        </div>
      </div>
      <div className="mock-arc-strip">
        <span>Mariages</span><i>·</i><span>Galas</span><i>·</i><span>Anniversaires</span><i>·</i><span>Corporate</span>
      </div>
    </div>
  );
}

function MockJoana() {
  return (
    <div className="mock mock-joana">
      <div className="mock-jo-grid">
        <div className="mock-jo-card mock-jo-pack">
          <div className="mock-jo-jar">
            <div className="mock-jo-lid"></div>
            <div className="mock-jo-label">
              <b>JOANA</b>
              <span>tartine onctueuse</span>
              <span>cacao · noisette</span>
            </div>
          </div>
        </div>
        <div className="mock-jo-card mock-jo-feed">
          <div className="mock-jo-fh">@joana.cm · auto-feed</div>
          <div className="mock-jo-fr">
            {[1,2,3,4,5,6].map(i=>(
              <div key={i} className={"mock-jo-fc t" + i}></div>
            ))}
          </div>
        </div>
        <div className="mock-jo-card mock-jo-cap">
          <div className="mock-jo-ch">caption · ai draft 04</div>
          <p>« Sucre brun, noisettes torréfiées, un peu de dimanche matin. <span>#joana</span> »</p>
          <div className="mock-jo-cb">
            <span className="mock-jo-cbtn">Publier</span>
            <span className="mock-jo-cbtn ghost">Regen</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── PROJECTS ────────────────────────────────────────────────────────────────
const PROJECTS = [
  { id: "callspace", label: "01", t: "CallSpace", sub: "AI lead management platform",
    year: "2026", role: "Founder · Design · Build",
    tags: ["Flutter", "Node.js", "Firebase", "VAPI AI", "MySQL"],
    body: "A voice-AI platform that turns inbound and outbound calls into qualified pipeline. Conversational agents collect intent, schedule follow-ups and pipe everything into an analytics-first dashboard.",
    metrics: [["Avg. call", "2:14"], ["Booked / month", "318"], ["Uplift", "+41%"]],
    Mock: MockCallSpace },
  { id: "mcsite", label: "02", t: "McSite Express", sub: "Premium web agency",
    year: "2024 →", role: "Founder · Studio lead",
    tags: ["Brand", "Vue", "Webflow", "SEO"],
    body: "My production studio for premium websites. Editorial sites, landing pages and brand systems for founders who want their digital presence to match the ambition of their product.",
    metrics: [["Sites shipped", "40+"], ["Avg. lighthouse", "98"], ["NPS", "+71"]],
    Mock: MockMcSite },
  { id: "prospect", label: "03", t: "AI Prospecting Engine", sub: "Autonomous outbound system",
    year: "2025", role: "Architect · Full build",
    tags: ["Python", "OpenAI", "Make", "Maps API"],
    body: "Scrapes local businesses, audits their digital presence, generates a tailored proposal and ships a personalized demo — fully autonomous. Built to compress weeks of outbound work into minutes.",
    metrics: [["Leads / day", "1,200"], ["Audit time", "11s"], ["Reply rate", "9.4%"]],
    Mock: MockProspecting },
  { id: "arc", label: "04", t: "Arc en Ciel", sub: "Event decoration · brand & web",
    year: "2025", role: "Design · Build",
    tags: ["Identity", "Vue", "GSAP"],
    body: "A cinematic brand site for an event-design studio. Editorial galleries, immersive scroll moments and a booking flow tuned for high-intent inquiries.",
    metrics: [["Inquiries", "×3.4"], ["Bounce", "-38%"], ["Avg. session", "3:42"]],
    Mock: MockArcEnCiel },
  { id: "joana", label: "05", t: "JOANA", sub: "Digital branding & AI content system",
    year: "2025", role: "Brand · Automation",
    tags: ["Identity", "GenAI", "Make"],
    body: "Full digital identity for a chocolate spread brand — plus an AI content engine that drafts captions, generates packshots and schedules the feed end-to-end.",
    metrics: [["Posts / week", "auto-12"], ["Reach", "+220%"], ["CPC", "-44%"]],
    Mock: MockJoana },
];

function FeaturedProjects() {
  return (
    <section id="work" className="work" data-screen-label="04 Featured Work">
      <div className="sec-head">
        <span className="sec-tag"><i></i>Selected work · 2025–26</span>
        <h2 className="sec-title">Featured projects.</h2>
        <p className="sec-sub">A handful of recent builds — products, platforms, and brand systems shipped end-to-end.</p>
      </div>
      <div className="work-list">
        {PROJECTS.map((p, i) => (
          <article key={p.id} className={"work-row " + (i % 2 ? "rev" : "")}>
            <div className="work-info">
              <div className="work-meta">
                <span className="work-num">{p.label}</span>
                <span className="work-year">{p.year}</span>
                <span className="work-role">{p.role}</span>
              </div>
              <h3 className="work-h">{p.t}</h3>
              <div className="work-sub">{p.sub}</div>
              <p className="work-body">{p.body}</p>
              <div className="work-metrics">
                {p.metrics.map(([k,v]) => (
                  <div key={k}><b>{v}</b><span>{k}</span></div>
                ))}
              </div>
              <div className="work-tags">
                {p.tags.map(t => <span key={t}>{t}</span>)}
              </div>
              <a className="work-cta" href={"#" + p.id}>
                Case study
                <svg viewBox="0 0 16 16" width="12" height="12"><path d="M3 8 H13 M9 4 L13 8 L9 12" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
            </div>
            <div className="work-vis">
              <div className="work-vis-card">
                <p.Mock />
                <div className="work-vis-corner">{p.label} · {p.t}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ─── MCSITE EXPRESS DETAIL SECTION ────────────────────────────────────────────
const MCSITE_SERVICES = [
  { t: "Corporate websites", d: "Editorial sites for category-defining companies." },
  { t: "Luxury landing pages", d: "High-intent conversion surfaces, tuned to the last frame." },
  { t: "AI integrations", d: "Embedded agents, copilots and intelligent forms." },
  { t: "SEO optimization", d: "Technical SEO, structured data and content systems." },
  { t: "Automation systems", d: "From form to CRM to follow-up — without humans in the loop." },
  { t: "E-commerce builds", d: "Shopify, headless and bespoke commerce surfaces." },
];

function McSiteSection() {
  return (
    <section id="agency" className="agency" data-screen-label="05 McSite Express">
      <div className="agency-bg" aria-hidden="true"></div>
      <div className="agency-inner">
        <div className="agency-head">
          <div>
            <span className="sec-tag light"><i></i>An in-house studio · McSite Express</span>
            <h2 className="agency-h">
              We build websites that <em>elevate</em><br/>brands.
            </h2>
            <p className="agency-sub">
              Premium websites engineered for growth, visibility and authority.
              An ateliers-style practice operating from Cameroon, shipping worldwide.
            </p>
            <div className="agency-cta">
              <a href="#contact" className="btn btn-primary"><span>Start a project</span><span className="btn-arr"><svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8 H13 M8 3 L13 8 L8 13" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg></span></a>
              <a href="#work" className="btn btn-ghost light"><span className="btn-dot"></span>See client work</a>
            </div>
          </div>
          <div className="agency-stats">
            {[["40+","sites shipped"],["98","avg. lighthouse"],["14d","median delivery"],["+71","NPS · 2025"]].map(([v,l])=>(
              <div key={l}><b>{v}</b><span>{l}</span></div>
            ))}
          </div>
        </div>
        <div className="agency-grid">
          {MCSITE_SERVICES.map((s, i) => (
            <div key={s.t} className="agency-card">
              <span className="agency-num">{String(i+1).padStart(2,"0")}</span>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
        <div className="agency-process">
          <div className="agency-process-lbl">Process</div>
          <div className="agency-process-row">
            {[["Brief","30 min discovery, scope & dream"],
              ["Strategy","Positioning, IA, success metrics"],
              ["Design","Brand-aligned, cinematic interfaces"],
              ["Build","Performance-budgeted engineering"],
              ["Launch","Ship, measure, iterate"]].map(([s,d],i)=>(
              <div key={s} className="agency-step">
                <span className="agency-step-n">0{i+1}</span>
                <b>{s}</b>
                <span>{d}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── TECH STACK ──────────────────────────────────────────────────────────────
const STACK = [
  { g: "Frontend", items: ["Vue.js", "Next.js", "Astro", "Flutter", "HTML5", "CSS3", "JavaScript", "TypeScript", "GSAP", "Tailwind"] },
  { g: "Backend",  items: ["Node.js", "Firebase", "Supabase", "MySQL", "PostgreSQL", "Express", "Prisma"] },
  { g: "AI · Automation", items: ["OpenAI", "Claude", "VAPI AI", "Make", "n8n", "Zapier", "LangChain"] },
  { g: "Tools",    items: ["Figma", "GitHub", "Linear", "Vercel", "WordPress", "Elementor", "Stripe"] },
];

function StackSection() {
  return (
    <section id="stack" className="stack" data-screen-label="06 Stack">
      <div className="sec-head">
        <span className="sec-tag"><i></i>Tech stack</span>
        <h2 className="sec-title">The toolkit, sharpened.</h2>
        <p className="sec-sub">A working set of frameworks, primitives and APIs — chosen for speed, longevity and the joy of shipping.</p>
      </div>
      <div className="stack-grid">
        {STACK.map(s => (
          <div key={s.g} className="stack-col">
            <div className="stack-col-h">{s.g}</div>
            <div className="stack-col-list">
              {s.items.map(it => (
                <span key={it} className="stack-chip">
                  <span className="stack-dot"></span>{it}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="terminal">
        <div className="terminal-hd">
          <span className="dot dot-r"></span><span className="dot dot-y"></span><span className="dot dot-g"></span>
          <span className="terminal-name">~/portfolio · zsh</span>
        </div>
        <div className="terminal-body">
          <div><span className="t-p">ryan@studio</span>:<span className="t-d">~/portfolio</span>$ <span className="t-c">npm run build-future</span></div>
          <div><span className="t-mut">▸ resolving 247 modules…</span></div>
          <div><span className="t-mut">▸ bundling experience layer…</span></div>
          <div><span className="t-mut">▸ optimizing motion · 60→120fps…</span></div>
          <div><span className="t-ok">✔ build succeeded in 1.42s</span></div>
          <div><span className="t-mut">▸ deploying to edge · 312 POPs…</span></div>
          <div><span className="t-ok">✔ live · https://kountchou.ryan</span> <span className="t-mut">— TTI 124ms</span></div>
          <div><span className="t-p">ryan@studio</span>:<span className="t-d">~/portfolio</span>$ <span className="t-caret"></span></div>
        </div>
      </div>
    </section>
  );
}

// ─── VISION ──────────────────────────────────────────────────────────────────
function Vision() {
  return (
    <section id="vision" className="vision" data-screen-label="07 Vision">
      <div className="vision-bg" aria-hidden="true"></div>
      <div className="vision-inner">
        <span className="sec-tag light"><i></i>Vision</span>
        <h2 className="vision-h">
          The future belongs to creators who can <em>fuse</em> design,
          engineering and artificial intelligence into single, living systems.
        </h2>
        <p className="vision-sub">
          My objective is simple: raise the standard of African digital craft to a
          global level — one product, one platform, one beautifully engineered
          interface at a time.
        </p>
        <div className="vision-marks">
          <span>— Kountchou Ryan</span>
          <span>Douala · 2026</span>
        </div>
      </div>
    </section>
  );
}

// ─── CONTACT ─────────────────────────────────────────────────────────────────
function Contact() {
  const [sent, setSent] = useState2(false);
  return (
    <section id="contact" className="contact" data-screen-label="08 Contact">
      <div className="contact-inner">
        <div className="contact-l">
          <span className="sec-tag"><i></i>Let's build</span>
          <h2 className="contact-h">
            Have an ambitious<br/>idea? <em>Let's ship it.</em>
          </h2>
          <p className="contact-sub">
            I take on a small number of projects each quarter. Tell me what you're
            building, what done looks like, and when you need it live.
          </p>
          <div className="contact-meta">
            <div>
              <span>Email</span>
              <b>hello@kountchou.ryan</b>
            </div>
            <div>
              <span>Studio</span>
              <b>McSite Express · Douala</b>
            </div>
            <div>
              <span>Response</span>
              <b>Within 4 hours · Mon–Fri</b>
            </div>
            <div>
              <span>Calendar</span>
              <b>cal.com/ryan-mc</b>
            </div>
          </div>
          <div className="contact-socials">
            {[["GitHub","gh"],["LinkedIn","in"],["X / Twitter","x"],["Dribbble","db"]].map(([n,k])=>(
              <a key={k} href="#" className="contact-soc"><span>{k}</span>{n}<i>↗</i></a>
            ))}
          </div>
        </div>
        <div className="contact-r">
          <form className="contact-form" onSubmit={(e)=>{e.preventDefault(); setSent(true);}}>
            <div className="contact-form-hd">
              <span>new_inquiry.form</span>
              <span className="contact-form-tag">encrypted · e2e</span>
            </div>
            <label className="cf-row">
              <span>Your name</span>
              <input type="text" placeholder="Amélie Dupont" required />
            </label>
            <label className="cf-row">
              <span>Email</span>
              <input type="email" placeholder="you@brand.com" required />
            </label>
            <label className="cf-row">
              <span>Company / project</span>
              <input type="text" placeholder="Studio Nova" />
            </label>
            <div className="cf-row">
              <span>What do you need?</span>
              <div className="cf-chips">
                {["Website","SaaS platform","AI system","Brand","Other"].map(x=>(
                  <label key={x} className="cf-chip"><input type="checkbox"/><span>{x}</span></label>
                ))}
              </div>
            </div>
            <div className="cf-row">
              <span>Budget</span>
              <div className="cf-chips">
                {["< €5k","€5–15k","€15–40k","€40k+"].map(x=>(
                  <label key={x} className="cf-chip"><input type="radio" name="b"/><span>{x}</span></label>
                ))}
              </div>
            </div>
            <label className="cf-row">
              <span>Tell me more</span>
              <textarea rows="4" placeholder="What are you building, who is it for, and what does success look like?"></textarea>
            </label>
            <button type="submit" className={"btn btn-primary cf-submit " + (sent ? "ok" : "")}>
              <span>{sent ? "Sent — talk soon ✓" : "Send inquiry"}</span>
              {!sent && <span className="btn-arr"><svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8 H13 M8 3 L13 8 L8 13" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg></span>}
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="foot">
      <div className="foot-mark">
        <svg viewBox="0 0 800 200" className="foot-svg" preserveAspectRatio="xMidYMid meet">
          <text x="400" y="160" textAnchor="middle" fontFamily="'Space Grotesk', sans-serif"
                fontSize="220" fontWeight="600" fill="url(#footg)" letterSpacing="-12">
            KOUNTCHOU
          </text>
          <defs>
            <linearGradient id="footg" x1="0" x2="1" y1="0" y2="0">
              <stop offset="0%" stopColor="var(--a)"/>
              <stop offset="100%" stopColor="var(--b)"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div className="foot-row">
        <div>© 2026 Kountchou Ryan · Built in Douala, Cameroon</div>
        <div className="foot-links">
          <a href="#work">Work</a>
          <a href="#agency">McSite Express</a>
          <a href="#contact">Contact</a>
          <a href="#">RSS</a>
          <a href="#">Colophon</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  FeaturedProjects, McSiteSection, StackSection, Vision, Contact, Footer,
  MockCallSpace, MockMcSite, MockProspecting, MockArcEnCiel, MockJoana
});