/* Sections part 3: Capabilities, About, Extras, Contact, App */
const { motion } = window.Motion;
const { useRef: useRef3, useState: useState3, useEffect: useEffect3 } = React;

function Capabilities() {
  const { capabilities } = window.PORTFOLIO_DATA;
  const [open, setOpen] = useState3(0);
  return (
    <section className="caps">
      <div className="eyebrow">Capabilities</div>
      <h2 className="caps-title">Useful across<br />the full <span className="caps-italic">journey</span> from idea to adoption.</h2>
      <div className="caps-list">
        {capabilities.map((c, i) => {
          const isOpen = open === i;
          return (
            <div key={c.title} className="caps-row">
              <button data-hover onClick={() => setOpen(isOpen ? null : i)} className="caps-btn">
                <span className="caps-btn-l">
                  <span className="caps-idx">0{i + 1}</span>
                  <span className="caps-t">{c.title}</span>
                </span>
                <span className={`caps-plus ${isOpen ? "open" : ""}`}>+</span>
              </button>
              <motion.div initial={false} animate={{ height: isOpen ? "auto" : 0, opacity: isOpen ? 1 : 0 }} transition={{ duration: 0.4 }} style={{ overflow: "hidden" }}>
                <p className="caps-body">{c.body}</p>
              </motion.div>
            </div>);

        })}
      </div>
    </section>);

}

function About() {
  const { profile, timeline, tools, education } = window.PORTFOLIO_DATA;
  return (
    <section id="about" className="about">
      <div className="about-grid">
        <div className="about-left">
          <div className="eyebrow eyebrow-rust">About</div>
          <div className="avatar-wrap">
            <div className="avatar">{profile.initials}</div>
            <div className="tape" style={{ top: -16, left: 30, width: 120, height: 24, transform: "rotate(-12deg)" }} />
          </div>
          <p className="about-lede">I sit at the intersection of <em>design</em>, <span className="hl">behavior</span>, and startup building.</p>
          <p className="about-p">Product designer and startup founder with 3 years of end-to-end UX experience — from zero-to-one product definition to pixel-perfect delivery. Fluent in design thinking, user research, and rapid prototyping.</p>
          <p className="about-p">Built and led design for an early-stage consumer social platform, Social Monkey. Equally comfortable owning the full design system or embedding with an engineering team to ship fast.</p>
          <div className="about-contact">
            <div><span className="ac-l">Based</span><span className="ac-v">{profile.location}</span></div>
            <div><span className="ac-l">Email</span><span className="ac-v"><a href={`mailto:${profile.email}`} data-hover>{profile.email}</a></span></div>
            <div><span className="ac-l">Phone</span><span className="ac-v"><a href={`tel:${profile.phone.replace(/\s/g, "")}`} data-hover>{profile.phone}</a></span></div>
          </div>
          <a href={profile.cv} download data-hover className="about-cv">Download CV ↓</a>
        </div>
        <div className="about-right">
          <div className="eyebrow eyebrow-olive">Experience</div>
          <div className="tl">
            {timeline.map((t, i) =>
            <motion.div key={i}
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, amount: 0.4 }}
              transition={{ delay: i * 0.08 }}
              className="tl-row">
              <div className="tl-when">{t.when}</div>
              <div className="tl-body">
                <div className="tl-role">{t.role} <span className="tl-org">— {t.org}</span></div>
                <p className="tl-p">{t.body}</p>
              </div>
            </motion.div>
            )}
          </div>
          <div className="edu-block">
            <div className="eyebrow eyebrow-olive">Education</div>
            <ul className="edu-list">
              {education.map((e, i) => (
                <li key={i} className="edu-row">
                  <span className="edu-when">{e.when}</span>
                  <span className="edu-title">{e.title}{e.org && <span className="edu-org"> — {e.org}</span>}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="toolbox">
            <div className="eyebrow eyebrow-olive">Tools</div>
            <div className="tools">
              {tools.map((t, i) =>
              <span key={t} className={`tool tool-${i % 3}`} style={{ transform: `rotate(${i % 5 - 2}deg)` }}>{t}</span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Extras() {
  const { testimonials } = window.PORTFOLIO_DATA;
  return (
    <section className="extras">
      <div className="extras-head">
        <div className="eyebrow eyebrow-mustard">Word on the street</div>
        <h2 className="h-serif extras-h">People I've shipped <em className="hl-mustard">alongside</em>.</h2>
      </div>
      <div className="testi-grid">
        {testimonials.map((t, i) =>
        <motion.div key={i}
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.4 }}
        transition={{ delay: i * 0.1 }}
        className={`testi testi-${i}`}>
            <div className="testi-q">"</div>
            <p className="testi-body">{t.quote}</p>
            <div className="testi-by">— {t.by}</div>
          </motion.div>
        )}
      </div>
    </section>);

}

function Contact() {
  const { profile } = window.PORTFOLIO_DATA;
  const [copied, setCopied] = useState3(false);
  const copy = async () => {
    try {await navigator.clipboard.writeText(profile.email);setCopied(true);setTimeout(() => setCopied(false), 1800);} catch (_) {}
  };
  return (
    <section id="contact" className="contact">
      <div className="eyebrow eyebrow-mustard">Let's get to know each other</div>
      <h2 className="contact-h">Have a product that needs <em>clearer UX</em>, stronger <span className="hl-mustard">positioning</span>, or better conversion?</h2>
      <div className="contact-grid">
        <button onClick={copy} data-hover className="contact-mail">
          <div className="eyebrow eyebrow-faded">Email me</div>
          <div className="contact-email">{profile.email}</div>
          <div className="contact-copy">{copied ? "Copied ✓" : "Click to copy"}</div>
        </button>
        <div className="contact-socials">
          {profile.phone && (<a href={`tel:${profile.phone.replace(/\s/g, "")}`} data-hover className="contact-social">{profile.phone}</a>)}
          {profile.socials.map((s) => <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" data-hover className="contact-social">{s.label} ↗</a>)}
          <a href={profile.cv} download data-hover className="contact-social contact-social-cv">Download CV ↓</a>
          <a href="#top" data-hover className="contact-social">Back to top ↑</a>
        </div>
      </div>
      <div className="footer">
        <span>{profile.name} — {profile.role}</span>
        <span>© 2026 — Made with curiosity, coffee &amp; CRO</span>
      </div>
    </section>);

}

function CursorBlob() {
  const [pos, setPos] = useState3({ x: -100, y: -100 });
  const [hover, setHover] = useState3(false);
  useEffect3(() => {
    const move = (e) => setPos({ x: e.clientX, y: e.clientY });
    const over = (e) => {const t = e.target;setHover(!!(t.closest && t.closest("a, button, [data-hover]")));};
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseover", over);
    return () => {window.removeEventListener("mousemove", move);window.removeEventListener("mouseover", over);};
  }, []);
  return <div className="cursor-blob" style={{ left: pos.x, top: pos.y, width: hover ? 56 : 28, height: hover ? 56 : 28, background: hover ? "var(--c-mustard)" : "var(--c-rust)" }} />;
}

window.Capabilities = Capabilities;
window.About = About;
window.Extras = Extras;
window.Contact = Contact;
window.CursorBlob = CursorBlob;