/* sections-a.jsx — Titlebar (nav), Hero, Features */

const NAV = [
  ["home", "home"], ["ventures", "building"], ["features", "what i do"], ["portfolio", "work"],
  ["skills", "skills"], ["testimonials", "reviews"], ["clients", "clients"], ["contacts", "contact"],
];

function Titlebar({ active, theme, onTheme, onMenu }) {
  const label = (NAV.find(n => n[0] === active) || NAV[0])[0];
  return (
    <div className="titlebar">
      <div className="bar">
        <div className="tb-dots"><i></i><i></i><i></i></div>
        <span className="tb-path">~/haggai.dev/<b>{label}</b></span>
        <nav className="tb-nav">
          {NAV.map(([id, lbl]) => (
            <a key={id} href={"#" + id} className={active === id ? "active" : ""}>{lbl}</a>
          ))}
        </nav>
        <div className="tb-right">
          <button className="theme-btn" onClick={onTheme} aria-label="Toggle theme" title="Toggle light / dark">
            <Icon name={theme === "dark" ? "sun" : "moon"} />
          </button>
          <a className="tb-hire" href="#contacts">Hire me</a>
          <button className="menu-btn" onClick={onMenu} aria-label="Menu"><Icon name="menu" /></button>
        </div>
      </div>
    </div>
  );
}
/* sun/moon live in site-ui.jsx's icon table */

function Hero({ typing, grid, roles }) {
  const [txt, setTxt] = React.useState("");
  const [ri, setRi] = React.useState(0);
  React.useEffect(() => {
    if (!typing) { setTxt(roles[0]); return; }
    let i = 0, del = false, cur = ri, raf;
    let t;
    const tick = () => {
      const word = roles[cur % roles.length];
      if (!del) {
        i++; setTxt(word.slice(0, i));
        if (i >= word.length) { del = true; t = setTimeout(tick, 1400); return; }
        t = setTimeout(tick, 70);
      } else {
        i--; setTxt(word.slice(0, i));
        if (i <= 0) { del = false; cur++; setRi(cur); t = setTimeout(tick, 240); return; }
        t = setTimeout(tick, 34);
      }
    };
    t = setTimeout(tick, 500);
    return () => clearTimeout(t);
  }, [typing]);

  const stats = [
    ["10+", "Years experience"], ["20+", "Brands shipped"],
    ["5★", "Client rating"], ["Open", "For new work"],
  ];
  return (
    <header id="home" className="section hero">
      {grid && <div className="hero-grid"></div>}
      <div className="wrap hero-inner">
        <div className="hero-left">
          <div className="hero-prompt reveal">$ whoami <b>— 10+ yrs shipping web products</b></div>
          <h1 className="reveal">Haggai<br/>Wambua</h1>
          <div className="typed reveal">I am a <span className="tw">{txt}</span><span className="caret">_</span></div>
          <p className="lede reveal">Full-stack engineer building value-driven, user-centered and scalable web products — and the founder of <a href="https://macvian.com" target="_blank" rel="noopener">Macvian AI</a>.</p>
          <div className="hero-cta reveal">
            <a className="btn btn-fill" href="https://www.upwork.com" target="_blank" rel="noopener">Hire me <Icon name="arrowRight" /></a>
            <a className="btn" href="#portfolio">View work</a>
          </div>
          <div className="hero-stack reveal"><span className="hk">stack ▸</span> Laravel · WordPress · Vue.js · PHP · MySQL · Python</div>
        </div>
        <div className="hero-right reveal">
          <div className="hero-aside">
            <div className="avatar">
              <div className="ring"></div>
              <div className="avatar-img"><img src="assets/images/slider/banner.jpg" alt="Haggai Wambua" /></div>
              <div className="status"><i></i>available for work</div>
            </div>
            <div className="hero-building">
              <div className="hb-label">// currently building</div>
              <a className="hb-row" href="https://shieldci.com" target="_blank" rel="noopener">
                <span className="hb-text"><span className="hb-n">ShieldCI</span><span className="hb-d">Laravel code analysis</span></span><span className="hb-x">↗</span>
              </a>
              <a className="hb-row" href="https://macvian.com" target="_blank" rel="noopener">
                <span className="hb-text"><span className="hb-n">Macvian AI</span><span className="hb-d">AI product studio</span></span><span className="hb-x">↗</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div className="wrap"><div className="hero-foot reveal">
        {stats.map(([v, k]) => (
          <div className="s" key={k}><span className="v">{v}</span><span>{k}</span></div>
        ))}
      </div></div>
    </header>
  );
}

function Features() {
  return (
    <section id="features" className="section">
      <div className="wrap">
        <SectionHead prompt="cat what-i-do.md" title="What I do" sub="Three ways I help teams turn ideas into shipped, dependable products." />
        <div className="feat-grid">
          {window.FEATURES.map((f, i) => (
            <div className="feat reveal" key={f.title} style={{ transitionDelay: (i * 90) + "ms" }}>
              <div className="num">0{i + 1} / 03</div>
              <div className="ic"><Icon name={f.ic} /></div>
              <h3>{f.title}</h3>
              <p>{f.desc}</p>
              <div className="tags">{f.tags.map(t => <span key={t}>{t}</span>)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Ventures() {
  return (
    <section id="ventures" className="section">
      <div className="wrap">
        <SectionHead prompt="cat ventures.md" title="What I'm" dim="building" sub="Products and ventures I've founded — not just client work." />
        <div className="ven-grid">
          {window.VENTURES.map((v) => (
            <a className="ven-card reveal" key={v.name} href={v.link} target="_blank" rel="noopener">
              <div className="ven-bar"><i></i><i></i><i></i><span className="t">{v.file}</span><span className="ven-visit">visit ↗</span></div>
              <div className="ven-body">
                <div className="ven-tag">{v.tag}</div>
                <h3 className="ven-name">{v.name}</h3>
                <p className="ven-desc">{v.desc}</p>
                <div className="ven-cli"><span className="c">{v.cli}</span><span className="o">{v.out}</span></div>
                <div className="ven-tags">{v.tags.map(t => <span key={t}>{t}</span>)}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Titlebar, Hero, Features, Ventures, NAV });