// Portfolio v2 — part 2: Bento work, McSite cinematic, manifesto pin,
// stack constellation, contact, footer.

const useState = React.useState;

// but we redefine list-presentation as a bento grid here.

function WorkV2() {
  const PROJECTS_V2 = [
    { id:"callspace",  n:"01", t:"CallSpace",            sub:"AI lead management platform",
      tags:["Flutter","Node","Firebase","VAPI"],          year:"’26", role:"Founder · Build",
      href:"https://callspace0.netlify.app/",            img:"assets/callspace.png",
      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 dashboard.",
      metric:["+41%","booked uplift"], span:"big" },
    { id:"prospect",   n:"02", t:"AI Prospecting Engine", sub:"Autonomous outbound system",
      tags:["Python","OpenAI","Maps","Make"],             year:"’25", role:"Architect",
      href:"https://mcsiteprospectio5.vercel.app/",      img:"assets/Ai-Prospecting-Engine.png",
      body:"Scrapes local businesses, audits their digital presence, drafts tailored proposals and ships personalised demos — fully autonomous. Built to compress weeks of outbound into minutes.",
      metric:["1,200","leads / day"], span:"tall" },
    { id:"arc",        n:"03", t:"Arc en Ciel",           sub:"Event design · brand & web",
      tags:["Identity","Vue","GSAP"],                    year:"’25", role:"Design · Build",
      href:"https://arc-en-ciel-nu.vercel.app/",         img:"assets/arcenciel.png",
      body:"A cinematic brand site for an event-design studio. Editorial galleries, immersive scroll moments and a booking flow tuned for high-intent inquiries.",
      metric:["×3.4","inquiries"], span:"wide" },
    { id:"tanhealth",  n:"04", t:"Tan Health & Wellness", sub:"Medical web platform",
      tags:["WordPress","SEO","Brand","Health"],         year:"’25", role:"Design · Build",
      href:"https://www.tanhealthwellness.com/",         img:"assets/tanhealth.png",
      body:"A professional medical website for a board-certified physician practice — patient resources, service pages, appointment booking and a trust-first brand presence.",
      metric:["5★","patient care"], span:"square" },
  ];
  return (
    <section id="work" className="v2-work" data-screen-label="04 Work">
      <div className="v2-work-head">
        <div className="v2-num">
          <span className="v2-num-lbl">CHAPTER</span>
          <span className="v2-num-big">04</span>
          <span className="v2-num-tag">Selected work · ‘25–‘26</span>
        </div>
        <div className="v2-work-h-right">
          <span className="v2-mono-tag">4 case studies · 12 mo.</span>
          <a href="#contact" className="v2-link">enquire about a project →</a>
        </div>
      </div>

      <h2 className="v2-h v2-work-title">
        <span className="v2-display">FEATURED</span>
        <span className="v2-italic-big">work, ‘26</span>
      </h2>

      <div className="v2-bento">
        {PROJECTS_V2.map((p, i) => (
          <article key={p.id} className={"work-cell v2-card cell-" + p.span} style={{"--i": i}}>
            <div className="v2-card-hd">
              <span className="v2-card-n">{p.n}</span>
              <span className="v2-card-y">{p.year} · {p.role}</span>
            </div>
            <div className="v2-card-vis">
              <img src={p.img} alt={p.t}
                style={{width:"100%",height:"100%",objectFit:"cover",objectPosition:"top center",display:"block"}} />
              <div className="v2-card-vis-glow" aria-hidden="true"></div>
            </div>
            <div className="v2-card-body">
              <div className="v2-card-tt">
                <h3>{p.t}</h3>
                <span className="v2-card-sub">{p.sub}</span>
              </div>
              <p>{p.body}</p>
              <div className="v2-card-foot">
                <div className="v2-card-metric">
                  <b>{p.metric[0]}</b>
                  <span>{p.metric[1]}</span>
                </div>
                <div className="v2-card-tags">
                  {p.tags.map(tg => <span key={tg}>{tg}</span>)}
                </div>
                <a className="v2-card-cta" href={p.href} target="_blank" rel="noopener">visit site<span>↗</span></a>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ─── MCSITE EXPRESS — cinematic ───────────────────────────────────────────────
function McSiteV2() {
  const services = [
    { n:"01", t:"Corporate websites",   d:"Editorial sites for category-defining companies." },
    { n:"02", t:"Luxury landing pages", d:"High-intent conversion surfaces tuned to the last frame." },
    { n:"03", t:"AI integrations",      d:"Embedded agents, copilots and intelligent forms." },
    { n:"04", t:"SEO & content systems",d:"Technical SEO, structured data, content pipelines." },
    { n:"05", t:"Automation systems",   d:"Form → CRM → follow-up, without humans in the loop." },
    { n:"06", t:"E-commerce builds",    d:"Shopify, headless and bespoke commerce surfaces." },
  ];
  return (
    <section id="agency" className="v2-agency" data-screen-label="05 McSite Express">
      <div className="v2-agency-bg" aria-hidden="true"></div>

      <div className="v2-agency-marquee">
        <div className="v2-agency-mtrack">
          {Array.from({length: 6}).map((_, i) => (
            <span key={i}>McSite Express ✦ </span>
          ))}
        </div>
      </div>

      <div className="v2-agency-inner">
        <div className="v2-agency-head">
          <span className="v2-mono-tag light">An in-house studio · est. 2024</span>
          <h2 className="v2-agency-h">
            We build<br/>
            <em>websites</em>
            <span className="v2-agency-h-mid">— that —</span>
            <span className="v2-display v2-agency-elev">ELEVATE</span>
            <span className="v2-agency-h-end">brands.</span>
          </h2>
          <div className="v2-agency-meta">
            <p>
              Premium websites engineered for growth, visibility and authority.
              An atelier-style practice operating from Cameroon, shipping worldwide.
            </p>
            <div className="v2-agency-actions">
              <a href="#contact" className="v2-btn v2-btn-primary">
                <span className="v2-btn-num">→</span>
                <span>Start a project</span>
              </a>
              <a href="#work" className="v2-btn v2-btn-ghost light">
                <span>See client work</span>
              </a>
            </div>
          </div>
        </div>

        <div className="v2-agency-strip">
          {[["40+","sites shipped"],["98","avg. lighthouse"],["14d","median delivery"],["+71","NPS · '25"],["3","continents"]].map(([v,l]) => (
            <div key={l} className="v2-agency-stat">
              <b>{v}</b>
              <span>{l}</span>
            </div>
          ))}
        </div>

        <div className="v2-agency-services">
          {services.map((s) => (
            <div key={s.n} className="v2-agency-svc">
              <div className="v2-agency-svc-l">
                <span>{s.n}</span>
                <h4>{s.t}</h4>
              </div>
              <p>{s.d}</p>
              <span className="v2-agency-svc-arr">→</span>
            </div>
          ))}
        </div>

        <div className="v2-agency-process">
          <span className="v2-mono-tag light">— process</span>
          <div className="v2-agency-process-flow">
            {[["Brief","30-min discovery"],["Strategy","Positioning · IA"],["Design","Cinematic surfaces"],["Build","Performance budgets"],["Launch","Ship · measure · iterate"]].map(([s,d],i) => (
              <React.Fragment key={s}>
                <div className="v2-agency-step">
                  <span className="v2-agency-step-n">0{i+1}</span>
                  <b>{s}</b>
                  <span>{d}</span>
                </div>
                {i < 4 && <span className="v2-agency-arrow">→</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── STACK — constellation grid ──────────────────────────────────────────────
function StackV2() {
  const families = [
    { g: "Vibe coding",    items: ["Claude Code","Cursor","v0","Bolt","Lovable","Windsurf","GitHub Copilot"] },
    { g: "Frontend",       items: ["Vue.js","Next.js","Astro","Flutter","TypeScript","GSAP","Tailwind"] },
    { g: "Backend · AI",   items: ["Node.js","Firebase","Supabase","OpenAI","VAPI","Make","n8n"] },
    { g: "Tools",          items: ["Figma","GitHub","Vercel","Linear","Stripe","Claude API","Zapier"] },
  ];
  return (
    <section id="stack" className="v2-stack" data-screen-label="06 Stack">
      <div className="v2-num">
        <span className="v2-num-lbl">CHAPTER</span>
        <span className="v2-num-big">05</span>
        <span className="v2-num-tag">The toolkit</span>
      </div>
      <h2 className="v2-h">
        Working set.<br/>
        <em>Sharpened.</em>
      </h2>
      <p className="v2-h-sub">AI-first, vibe-coded. Prompt, iterate, ship — then harden with the right primitives.</p>

      <div className="v2-stack-grid">
        {families.map((f) => (
          <div key={f.g} className="v2-stack-col">
            <div className="v2-stack-h">
              <span className="v2-stack-tag">{f.g}</span>
              <span className="v2-stack-line"></span>
            </div>
            <ul>
              {f.items.map((it, i) => (
                <li key={it} style={{"--di": i * 0.04 + "s"}}>
                  <span className="v2-stack-dot"></span>
                  <span>{it}</span>
                  <span className="v2-stack-i">·0{i+1}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div className="v2-term">
        <div className="v2-term-hd">
          <span className="dot dot-r"></span><span className="dot dot-y"></span><span className="dot dot-g"></span>
          <span className="v2-term-n">~/portfolio · zsh — 80x24</span>
          <span className="v2-term-r">live</span>
        </div>
        <div className="v2-term-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 · 1.21s</span></div>
          <div><span className="t-mut">▸ bundling experience layer · 0.62s</span></div>
          <div><span className="t-mut">▸ optimizing motion · 60 → 120 fps · 0.34s</span></div>
          <div><span className="t-ok">✔ build succeeded in 2.17s</span></div>
          <div><span className="t-mut">▸ deploying to edge · 312 POPs · 0.81s</span></div>
          <div><span className="t-ok">✔ live</span> · <span className="t-l">https://kountchou.ryan</span> <span className="t-mut">— TTI 124ms · LCP 0.6s</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>
  );
}

// ─── MANIFESTO / VISION ──────────────────────────────────────────────────────
function ManifestoV2() {
  const lines = [
    { t:"The future belongs to creators who can", mut:true },
    { t:"fuse design,", em:true },
    { t:"engineering,", em:true },
    { t:"& intelligence into", mut:true },
    { t:"single, living systems.", em:true },
  ];
  return (
    <section id="vision" className="v2-manifest" data-screen-label="07 Vision">
      <div className="v2-manifest-bg" aria-hidden="true"></div>
      <div className="v2-num light">
        <span className="v2-num-lbl">CHAPTER</span>
        <span className="v2-num-big">06</span>
        <span className="v2-num-tag">Manifesto</span>
      </div>
      <div className="v2-manifest-inner">
        <p className="v2-manifest-text">
          {lines.map((l, i) => (
            <span key={i} className={"v2-mline " + (l.em ? "em " : "") + (l.mut ? "mut " : "")} style={{"--di": i * 0.07 + "s"}}>
              {l.t}{" "}
            </span>
          ))}
        </p>
        <div className="v2-manifest-foot">
          <div>
            <span>—</span>
            <p>My objective: raise the standard of African digital craft to a global level, one product, one platform, one beautifully engineered interface at a time.</p>
          </div>
          <div className="v2-manifest-sig">
            <span>Kountchou Ryan</span>
            <span>Douala · 2026</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CONTACT V2 ──────────────────────────────────────────────────────────────
// Replace YOUR_FORM_ID with the ID from your Formspree dashboard (formspree.io)
const FORMSPREE_ENDPOINT = "https://formspree.io/f/xnjrvpal";

function ContactV2() {
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: "POST",
        body: new FormData(e.target),
        headers: { Accept: "application/json" },
      });
      if (res.ok) {
        setSent(true);
      } else {
        const data = await res.json().catch(() => ({}));
        setError(data.error || "Something went wrong — try emailing directly.");
      }
    } catch {
      setError("Network error — please try again.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <section id="contact" className="v2-contact" data-screen-label="08 Contact">
      <div className="v2-contact-bg" aria-hidden="true"></div>
      <div className="v2-num light">
        <span className="v2-num-lbl">CHAPTER</span>
        <span className="v2-num-big">07</span>
        <span className="v2-num-tag">Let's build</span>
      </div>

      <h2 className="v2-contact-h">
        <span className="v2-display">HAVE AN</span>
        <span className="v2-italic-big">ambitious idea?</span>
        <span className="v2-display v2-outline">LET'S SHIP IT.</span>
      </h2>

      <div className="v2-contact-grid">
        <div className="v2-contact-card v2-card">
          <div className="v2-contact-hd">
            <span>01 — direct</span><span>fastest</span>
          </div>
          <a href="mailto:kountchouryan@gmail.com" className="v2-contact-mail">
            kountchouryan@gmail.com
            <span>→</span>
          </a>
          <p>Tell me what you're building, what done looks like, and when you need it live. I respond within 4 hours on weekdays.</p>
        </div>

        <div className="v2-contact-card v2-card">
          <div className="v2-contact-hd">
            <span>02 — booked</span><span>30 min</span>
          </div>
          <a href="https://calendly.com/kountchouryan/30min" target="_blank" rel="noopener" className="v2-contact-cal">
            <div>
              <b>Book a discovery call</b>
              <span>calendly.com/kountchouryan/30min</span>
            </div>
            <span>→</span>
          </a>
          <p>A 30-minute conversation to align on the project, the budget and the timeline. Then I send a written proposal within 48h.</p>
        </div>

        <div className="v2-contact-card v2-card v2-contact-socials">
          <div className="v2-contact-hd">
            <span>03 — elsewhere</span><span>social</span>
          </div>
          {[
            ["GitHub","github.com/ryan2505","gh","https://github.com/ryan2505"],
            ["LinkedIn","linkedin.com/in/kountchou","in","#"],
            ["X / Twitter","@kountchour1179","x","https://x.com/kountchour1179?s=21"],
            ["Instagram","instagram.com/ryan.kountchou","ig","https://www.instagram.com/ryan.kountchou?igsh=MWJ6YmZ0NmFkZ3p3Mg%3D%3D&utm_source=qr"],
            ["Threads","@ryan.kountchou","th","https://www.threads.com/@ryan.kountchou?igshid=NTc4MTIwNjQ2YQ=="],
          ].map(([n,h,k,url]) => (
            <a key={k} href={url} target={url !== "#" ? "_blank" : undefined} rel="noopener" className="v2-soc">
              <span className="v2-soc-k">{k}</span>
              <span className="v2-soc-n"><b>{n}</b><i>{h}</i></span>
              <span className="v2-soc-arr">↗</span>
            </a>
          ))}
        </div>

        <form className="v2-contact-form v2-card" onSubmit={handleSubmit}>
          <div className="v2-contact-hd">
            <span>04 — formal</span><span>encrypted · e2e</span>
          </div>
          <div className="v2-form-grid">
            <label><span>your name</span><input name="name" type="text" placeholder="Amélie Dupont" required/></label>
            <label><span>email</span><input name="email" type="email" placeholder="you@brand.com" required/></label>
            <label className="full"><span>company / project</span><input name="company" type="text" placeholder="Studio Nova"/></label>
            <div className="full">
              <span className="v2-form-l">what do you need?</span>
              <div className="v2-form-chips">
                {["Website","SaaS","AI system","Brand","Other"].map(x => (
                  <label key={x} className="v2-chip"><input name="needs" type="checkbox" value={x}/><span>{x}</span></label>
                ))}
              </div>
            </div>
<label className="full"><span>tell me more</span><textarea name="message" rows="3" placeholder="What are you building, who is it for, and what does success look like?"></textarea></label>
          </div>
          {error && (
            <p style={{color:"var(--b)",fontSize:"0.8rem",marginBottom:"0.5rem"}}>{error}</p>
          )}
          <button type="submit" disabled={loading || sent}
            className={"v2-btn v2-btn-primary v2-form-submit " + (sent ? "ok" : "")}>
            <span className="v2-btn-num">{sent ? "✓" : loading ? "…" : "→"}</span>
            <span>{sent ? "Sent — talk soon" : loading ? "Sending…" : "Send inquiry"}</span>
          </button>
        </form>
      </div>
    </section>
  );
}

// ─── FOOTER V2 ───────────────────────────────────────────────────────────────
function FooterV2() {
  return (
    <footer className="v2-foot">
      <div className="v2-foot-inner">
        <div className="v2-foot-meta">
          <div>
            <span className="v2-mono-tag">© MMXXVI · all rights reserved</span>
            <p>Crafted in Douala, Cameroon. Shipped to clients on three continents. Always open to a good conversation.</p>
          </div>
          <div className="v2-foot-nav">
            <div>
              <span>navigate</span>
              <a href="#work">Work</a>
              <a href="#about">About</a>
              <a href="#agency">McSite Express</a>
              <a href="#contact">Contact</a>
            </div>
            <div>
              <span>elsewhere</span>
              <a href="https://github.com/ryan2505" target="_blank" rel="noopener">GitHub ↗</a>
              <a href="#">LinkedIn ↗</a>
              <a href="https://x.com/kountchour1179?s=21" target="_blank" rel="noopener">X / Twitter ↗</a>
              <a href="https://www.instagram.com/ryan.kountchou?igsh=MWJ6YmZ0NmFkZ3p3Mg%3D%3D&utm_source=qr" target="_blank" rel="noopener">Instagram ↗</a>
              <a href="https://www.threads.com/@ryan.kountchou?igshid=NTc4MTIwNjQ2YQ==" target="_blank" rel="noopener">Threads ↗</a>
            </div>
            <div>
              <span>colophon</span>
              <a href="#">Type — Space Grotesk &amp; Instrument Serif</a>
              <a href="#">Engineered with Vue · React · Node</a>
              <a href="#">Hosted on Vercel · Edge</a>
            </div>
          </div>
        </div>

        <div className="v2-foot-mark">
          <svg viewBox="0 0 1600 360" preserveAspectRatio="xMidYMid meet" className="v2-foot-svg">
            <defs>
              <linearGradient id="ftg" x1="0" x2="1" y1="0" y2="0">
                <stop offset="0%"  stopColor="var(--a)"/>
                <stop offset="60%" stopColor="var(--b)"/>
                <stop offset="100%" stopColor="var(--a)"/>
              </linearGradient>
            </defs>
            <text x="800" y="240" textAnchor="middle" fontFamily="'Space Grotesk',sans-serif"
                  fontWeight="500" fontSize="320" letterSpacing="-18" fill="url(#ftg)">KOUNTCHOU</text>
            <text x="800" y="320" textAnchor="middle" fontFamily="'Instrument Serif',serif"
                  fontStyle="italic" fontSize="120" fill="rgba(255,255,255,.9)" letterSpacing="-2">ryan, mmxxvi</text>
            <path d="M 50 290 Q 400 240 800 280 T 1550 290" stroke="rgba(255,255,255,.18)" strokeWidth="1.2" fill="none"/>
          </svg>
        </div>

        <div className="v2-foot-row">
          <span>v4.2 · last updated 21·05·2026</span>
          <span>system status — <i>operational</i></span>
          <span>kountchouryan@gmail.com</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  WorkV2, McSiteV2, StackV2, ManifestoV2, ContactV2, FooterV2
});