// sections.jsx — Section components for the personal site

function LinkedInIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
      <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05a3.74 3.74 0 0 1 3.37-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/>
    </svg>
  );
}

function YouTubeIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z"/>
    </svg>
  );
}

function Topbar({ email }) {
  return (
    <header className="topbar">
      <div className="shell topbar-inner">
        <a href="#top" className="brand">
          <span className="brand-dot"></span>
          <span>Abdullah Abu-Hassan</span>
        </a>
        <nav className="nav">
          <a href="#speaking">Speaking</a>
          <a href="#services">Services</a>
          <a href="#projects">Projects</a>
          <a href="#writing">Writing</a>
        </nav>
        <div className="topbar-right">
          <a className="social-icon" href="https://www.linkedin.com/in/abdullah-abu-hassan" aria-label="LinkedIn" target="_blank" rel="noreferrer"><LinkedInIcon /></a>
          <a className="social-icon" href="https://www.youtube.com/@AbdullahAbu-Hassan" aria-label="YouTube" target="_blank" rel="noreferrer"><YouTubeIcon /></a>
          <a className="social-icon" href="https://github.com/AbdullahAbuHassann" aria-label="GitHub" target="_blank" rel="noreferrer"><GitHubIcon /></a>
          <a href="#contact" className="nav-cta">
            Book me →
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ videoSize }) {
  return (
    <section className="shell hero" id="top">
      <div className="hero-text">
        <div className="hero-hi">
          <span className="wave">👋</span>
          {ABOUT.hi}
        </div>
        <h1 className="hero-title">
          <em>Build</em>, <em>Learn</em>,<br />
          and <em>Share</em>.
        </h1>
        <p className="hero-sub">
          I help organizations turn AI into something they can actually use.
        </p>
        <p className="hero-sub" style={{ marginTop: "-12px" }}>
          Half engineer, half explainer. Fully obsessed with this technological revolution.
        </p>
        <div className="hero-actions">
          <a className="btn btn-primary btn-sm" href="#contact">
            Book me
          </a>
          <a className="btn btn-ghost btn-sm" href="#writing">
            Read my writing
          </a>
          <a className="btn btn-ghost btn-sm" href="#projects">
            See my projects
          </a>
        </div>
      </div>
      <div style={{ position: "relative" }}>
        <div className="video-card" data-size={videoSize}>
          <div className="video-tape"></div>
          <iframe
            className="video-iframe"
            src="https://player.mediadelivery.net/play/684463/7f476be8-7660-4f3b-b4f0-ad9d58aacbf5"
            title="Hi from Abdullah"
            loading="lazy"
            allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
            allowFullScreen
          />
        </div>
        <div className="hero-note">a quick hello →</div>
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="shell">
      <div className="stats">
        {STATS.map((s, i) => (
          <div key={i} className="stat">
            <div className="stat-num">
              {s.num}<span>{s.suffix}</span>
            </div>
            <div className="stat-lbl">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Speaking() {
  return (
    <section className="section" id="speaking">
      <div className="shell">
        <div className="section-eyebrow">On Stage</div>
        <h2 className="section-title">
          Talks, workshops, & <em>keynotes</em>.
        </h2>
        <p className="section-lede">
          100+ sessions delivered across 5+ countries, from intimate executive
          rooms to packed keynote halls. A few favourites:
        </p>
        <div className="gallery">
          {SPEAKING.map((s, i) => (
            <div key={i} className="ph">
              {s.photo ? (
                <img className="ph-img" src={s.photo} alt={s.title}
                  style={{ objectPosition: s.focus || "50% 35%" }} />
              ) : (
                <div className={`ph-fill ${s.fill || ""}`}></div>
              )}
              <div className="ph-shade"></div>
              <div className="ph-tag">{s.tag}</div>
              <div className="ph-cap">"{s.title}"</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section className="section" id="services">
      <div className="shell">
        <div className="section-eyebrow">Work With Me</div>
        <h2 className="section-title">
          Three ways I can <em>help</em>.
        </h2>
        <p className="section-lede">
          Whether you're an executive trying to make sense of all this, or a
          team trying to ship, there's probably a fit here.
        </p>
        <div className="services">
          {SERVICES.map((s) => (
            <div key={s.n} className="service">
              <div className="service-num">{s.n}</div>
              <h3 className="service-title">{s.title}</h3>
              <p className="service-desc">{s.desc}</p>
              <a className="service-cta" href="#contact">
                Get in touch
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function GitHubIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2.18c-3.2.7-3.87-1.37-3.87-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.68 1.24 3.34.95.1-.74.4-1.24.72-1.53-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11.05 11.05 0 0 1 5.79 0c2.21-1.49 3.18-1.18 3.18-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/>
    </svg>
  );
}

function Repos() {
  return (
    <section className="section" id="projects">
      <div className="shell">
        <div className="section-eyebrow">Code</div>
        <h2 className="section-title">
          Things I'm <em>building</em>.
        </h2>
        <p className="section-lede">
          Open-source tools, curricula, and experiments. Mostly around AI
          agents, evaluation, and teaching.
        </p>
        <div className="repos">
          {REPOS.map((r) => (
            <a
              key={r.name}
              className="repo"
              href={`https://github.com/${r.owner}/${r.name}`}
              target="_blank"
              rel="noreferrer"
            >
              <div className="repo-head">
                <GitHubIcon />
                <div className="repo-name">
                  <span>{r.owner}/</span>{r.name}
                </div>
              </div>
              <p className="repo-desc">{r.desc}</p>
              <div className="repo-meta">
                <span>View on GitHub →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ArticleRow({ article, idx }) {
  const [open, setOpen] = React.useState(false);
  const slug = article.title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
  return (
    <div className="article" data-open={open} onClick={() => setOpen((v) => !v)}>
      <div className="article-date">{article.date}</div>
      <div className="article-title-row">
        <h3 className="article-title">{article.title}</h3>
        <span className="article-tag">{article.tag}</span>
      </div>
      <div className="article-arrow">+</div>
      <div className="article-body" onClick={(e) => e.stopPropagation()}>
        {(() => {
          const firstPara = article.body.find((p) => typeof p === "string");
          return firstPara ? <p>{firstPara}</p> : null;
        })()}
        {article.body.length > 1 && <p className="article-fade">…</p>}
        <a className="article-more" href={`article.html?slug=${slug}`}>
          Read full article →
        </a>
      </div>
    </div>
  );
}

function Articles() {
  const [showAll, setShowAll] = React.useState(false);
  const visible = showAll ? ARTICLES : ARTICLES.slice(0, 3);
  const hidden = ARTICLES.length - 3;
  return (
    <section className="section" id="writing">
      <div className="shell">
        <div className="section-eyebrow">Writing</div>
        <h2 className="section-title">
          Notes from the <em>field</em>.
        </h2>
        <div className="articles">
          {visible.map((a, i) => <ArticleRow key={i} article={a} idx={i} />)}
        </div>
        {hidden > 0 && (
          <div className="articles-more">
            <button className="btn btn-ghost" onClick={() => setShowAll((v) => !v)}>
              {showAll ? "Show fewer" : `View ${hidden} more articles`}
              <span className={`chev ${showAll ? "up" : ""}`}>↓</span>
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

function ContactForm() {
  const [vals, setVals] = React.useState({ name: "", email: "", org: "", ask: "" });
  const [errs, setErrs] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const update = (k) => (e) => {
    setVals((v) => ({ ...v, [k]: e.target.value }));
    if (errs[k]) setErrs((p) => ({ ...p, [k]: null }));
  };

  const validate = () => {
    const e = {};
    if (!vals.name.trim()) e.name = "Please share your name.";
    if (!vals.email.trim()) e.email = "Email is required.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(vals.email)) e.email = "That email doesn't look right.";
    if (!vals.org.trim()) e.org = "Which organization?";
    if (!vals.ask.trim()) e.ask = "Tell me a little about what you need.";
    return e;
  };

  const onSubmit = (ev) => {
    ev.preventDefault();
    const e = validate();
    if (Object.keys(e).length) { setErrs(e); return; }
    // Build a mailto so the message actually goes somewhere.
    const subject = `Inquiry from ${vals.name} (${vals.org})`;
    const body =
      `Name: ${vals.name}\n` +
      `Email: ${vals.email}\n` +
      `Organization: ${vals.org}\n\n` +
      `${vals.ask}`;
    window.location.href =
      `mailto:${ABOUT.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSubmitted(true);
  };

  return (
    <form className="cf" onSubmit={onSubmit} noValidate>
      <div className="cf-row cf-2">
        <label className={`cf-field ${errs.name ? "err" : ""}`}>
          <span>Name</span>
          <input type="text" value={vals.name} onChange={update("name")}
            placeholder="Your name" required />
          {errs.name && <em>{errs.name}</em>}
        </label>
        <label className={`cf-field ${errs.email ? "err" : ""}`}>
          <span>Email</span>
          <input type="email" value={vals.email} onChange={update("email")}
            placeholder="you@company.com" required />
          {errs.email && <em>{errs.email}</em>}
        </label>
      </div>
      <label className={`cf-field ${errs.org ? "err" : ""}`}>
        <span>Organization</span>
        <input type="text" value={vals.org} onChange={update("org")}
          placeholder="Where you're writing from" required />
        {errs.org && <em>{errs.org}</em>}
      </label>
      <label className={`cf-field ${errs.ask ? "err" : ""}`}>
        <span>Your ask</span>
        <textarea rows="5" value={vals.ask} onChange={update("ask")}
          placeholder="Tell me briefly the challenges you are facing"
          required></textarea>
        {errs.ask && <em>{errs.ask}</em>}
      </label>
      <div className="cf-foot">
        <button type="submit" className="btn btn-primary btn-sm">
          {submitted ? "Sent. Thank you!" : "Send message →"}
        </button>
        <span className="cf-note">I read every email. Reply within ~ 48 hours.</span>
      </div>
    </form>
  );
}

function Contact() {
  return (
    <section className="section" id="contact">
      <div className="shell">
        <div className="contact">
          <div className="contact-inner">
            <div className="section-eyebrow">Get in touch</div>
            <h2 className="contact-title">
              <span className="ct-line">Want me on your <em>stage</em>,</span>{" "}
              <span className="ct-line">or in your <em>org</em>?</span>
            </h2>
            <p className="contact-sub">
              Speaking engagements, executive sessions, or a custom build. I read every email
              <span style={{ display: "block" }}>(No calendar booking, just the human kind).</span>
            </p>
          </div>
          <ContactForm />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="shell footer">
      <div>© 2026 Abdullah Abu-Hassan · Built with care</div>
      <div className="footer-links">
        <a href="https://www.linkedin.com/in/abdullah-abu-hassan" target="_blank" rel="noreferrer" aria-label="LinkedIn"><LinkedInIcon /> LinkedIn</a>
        <a href="https://www.youtube.com/@AbdullahAbu-Hassan" target="_blank" rel="noreferrer" aria-label="YouTube"><YouTubeIcon /> YouTube</a>
        <a href="https://github.com/AbdullahAbuHassann" target="_blank" rel="noreferrer" aria-label="GitHub"><GitHubIcon /> GitHub</a>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Topbar, Hero, Stats, Speaking, Services, Repos, Articles, Contact, Footer,
});