const { useState, useEffect, useRef } = React;

/* ---------- ICONS ---------- */
const ArrowUR = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <line x1="7" y1="17" x2="17" y2="7"></line>
    <polyline points="8 7 17 7 17 16"></polyline>
  </svg>;

const ArrowR = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12"></line>
    <polyline points="13 6 19 12 13 18"></polyline>
  </svg>;

const LinkedIn = ({ size = 18 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.05-1.86-3.05-1.86 0-2.14 1.45-2.14 2.95v5.67H9.35V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.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>;

const Mail = ({ size = 18 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2.5" y="4.5" width="19" height="15" rx="2"></rect>
    <path d="M3 6l9 7 9-7"></path>
  </svg>;


/* ---------- REVEAL HOOK ---------- */
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add("in")),
      { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }
    );
    const els = document.querySelectorAll(".reveal");
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- SCROLL WORD-BY-WORD REVEAL ----------
   Finds headings/paragraphs tagged with .split-words and wraps each word in a span,
   then reveals them on scroll with a small stagger. Modern, type-driven motion.
*/
function useScrollWordReveal() {
  useEffect(() => {
    const targets = document.querySelectorAll(".split-words");
    targets.forEach((el) => {
      if (el.dataset.split === "1") return;
      el.dataset.split = "1";

      // Walk text nodes only — preserve nested <span>, <br>, links etc.
      const walk = (node) => {
        for (const child of Array.from(node.childNodes)) {
          if (child.nodeType === Node.TEXT_NODE) {
            const txt = child.textContent;
            if (!txt.trim()) continue;
            const frag = document.createDocumentFragment();
            const parts = txt.split(/(\s+)/);
            parts.forEach((p) => {
              if (!p) return;
              if (/^\s+$/.test(p)) {
                frag.appendChild(document.createTextNode(p));
              } else {
                const w = document.createElement("span");
                w.className = "word";
                w.textContent = p;
                frag.appendChild(w);
              }
            });
            node.replaceChild(frag, child);
          } else if (child.nodeType === Node.ELEMENT_NODE) {
            // Skip nested .split-words and .gradient-text to avoid double processing
            // (gradient-text has special styling that breaks on inline-block children)
            if (!child.classList.contains("split-words") && !child.classList.contains("gradient-text")) {
              walk(child);
            }
          }
        }
      };
      walk(el);

      // Stagger each word with a CSS variable
      const words = el.querySelectorAll(".word");
      words.forEach((w, i) => w.style.setProperty("--i", i));
    });

    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("words-in");
          io.unobserve(e.target);
        }
      }),
      { threshold: 0.15, rootMargin: "0px 0px -10% 0px" }
    );
    document.querySelectorAll(".split-words").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- NAV ---------- */
function Nav({ active }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
  { href: "index.html", label: "Home", key: "home" },
  { href: "work.html", label: "Work", key: "work" },
  { href: "about.html", label: "About", key: "about" }];

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <a href="index.html" className="nav-mark">
        <img src="logo.png" alt="Martina" style={{ width: 32, height: 32, display: 'block', flexShrink: 0 }} />
        <span className="nav-mark-text">
          <span style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.02em' }}>martina<span style={{ display: 'inline-block', width: 5, height: 5, background: 'var(--violet)', borderRadius: '50%', marginLeft: 4, verticalAlign: 'baseline', marginTop: -3 }}></span></span>
        </span>
      </a>
      <div className="nav-links">
        {links.map((l) =>
        <a key={l.key} href={l.href} className={active === l.key ? "active" : ""}>{l.label}</a>
        )}
      </div>
      <a href="https://calendly.com/martinavasconez/30min" className="nav-cta">
        <span className="dot"></span>
        Get in touch
      </a>
    </nav>);

}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <h3>martina <span style={{ color: "var(--lime)" }}><span style={{color: "rgb(255, 255, 255)"}}>vasconez.</span></span></h3>
            <p>Strategist, creator, and entrepreneur with a background in growth, marketing, storytelling, and design.</p>
          </div>
          <div className="footer-col">
            <h4>Pages</h4>
            <a href="index.html">Home</a>
            <a href="work.html">Work</a>
            <a href="about.html">About me</a>
            <a href="privacy-policy.html">Privacy Policy</a>
            <a href="terms-conditions.html">Terms & Conditions</a>
          </div>
          <div className="footer-col">
            <h4>LET'S CONNECT</h4>
            <a href="https://www.linkedin.com/in/martina-vasconez-579732193" target="_blank" rel="noopener">LinkedIn ↗</a>
            <a href="mailto:martinavasconez@gmail.com">Email ↗</a>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <a href="mailto:martinavasconez@gmail.com">martinavasconez@gmail.com</a>
            <a href="tel:+13052039587">+1 (305) 203-9587</a>
            <a href="https://calendly.com/martinavasconez/30min" target="_blank" rel="noopener">Schedule a call ↗</a>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Martina Vasconez</span>
          <span>BUILT WITH ❤️ BY MARTINA · ✱</span>
        </div>
      </div>
    </footer>);

}

/* ---------- WORK CARD (shared) ---------- */
function WorkCard({ p }) {
  const isCaseStudy = p.caseStudy;
  
  return (
    <a href={p.caseStudyUrl || `project.html?id=${p.id}`} style={{ textDecoration: 'none' }}>
      <article className={`work-card ${isCaseStudy ? 'work-card--case-study' : ''}`}>
        <div className="inner">
          <div className="work-card-head">
            <span className="work-card-cat">{p.cat}</span>
          </div>
          <h3 className="work-card-title">{p.title}</h3>
          <p className="work-card-blurb">{p.blurb}</p>
          <div className="work-card-foot">
            <span className="work-card-metric">{p.metric}</span>
            {isCaseStudy ? (
              <button style={{
                background: '#c6ff33',
                color: '#1a1a1a',
                border: 'none',
                borderRadius: '20px',
                padding: '8px 16px',
                fontSize: '13px',
                fontWeight: 500,
                cursor: 'pointer',
                fontFamily: 'inherit',
                letterSpacing: '0.03em'
              }}>
                Case study
              </button>
            ) : (
              <span className="work-card-arrow"><ArrowUR /></span>
            )}
          </div>
        </div>
      </article>
    </a>);

}

Object.assign(window, { Nav, Footer, WorkCard, useReveal, useScrollWordReveal, ArrowUR, ArrowR, LinkedIn, Mail });