/* global React */
const { useState, useEffect, useRef } = React;

// ===== Custom cursor =====
function Cursor() {
  const dotRef = useRef(null);
  const ringRef = useRef(null);
  useEffect(() => {
    let mx = window.innerWidth / 2,my = window.innerHeight / 2;
    let rx = mx,ry = my;
    let raf;
    const onMove = (e) => {
      mx = e.clientX;my = e.clientY;
      if (dotRef.current) {
        dotRef.current.style.transform = `translate(${mx}px, ${my}px) translate(-50%, -50%)`;
      }
    };
    const tick = () => {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      if (ringRef.current) {
        ringRef.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
      }
      raf = requestAnimationFrame(tick);
    };
    const onOver = (e) => {
      const tgt = e.target.closest('a, button, .hoverable, .exp-item, .edu-card, .skill-row');
      if (ringRef.current) ringRef.current.classList.toggle('hover', !!tgt);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseover', onOver);
    raf = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseover', onOver);
      cancelAnimationFrame(raf);
    };
  }, []);
  return (
    <>
      <div ref={dotRef} className="cursor-dot"></div>
      <div ref={ringRef} className="cursor-ring"></div>
    </>);

}

// ===== Scroll progress + nav state =====
function useScrollState() {
  const [progress, setProgress] = useState(0);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(Math.min(1, window.scrollY / Math.max(1, max)));
      setScrolled(window.scrollY > 40);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return { progress, scrolled };
}

// ===== Reveal on scroll =====
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('in');
            io.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.15, rootMargin: '0px 0px -50px 0px' }
    );
    document.querySelectorAll('.reveal, .skill-row').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ===== Animated counter =====
function Counter({ to, suffix = '' }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const dur = 1600;
          const tick = (now) => {
            const t = Math.min(1, (now - start) / dur);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(eased * to));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.disconnect();
        }
      });
    }, { threshold: 0.5 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [to]);
  return (
    <div className="stat-num" ref={ref}>
      {val}
      {suffix && <span className="suffix">{suffix}</span>}
    </div>);

}

// ===== Nav =====
function Nav({ scrolled, tweaks, setTweak }) {
  const P = window.PORTFOLIO;
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav-logo" aria-label="UAY home">
        <img src="assets/logo-uay.png" alt="UAY" className="nav-logo-img" style={{ borderRadius: "0px", opacity: "1", margin: "0px", borderStyle: "solid", borderColor: "rgb(43, 43, 42)", borderWidth: "0px", height: "36px", objectFit: "cover", width: "65px" }} />
      </a>
      <div className="nav-links" style={{ gap: "4px", alignItems: "center" }}>
        <a className="nav-link" href="#featured">Campaign</a>
        <a className="nav-link" href="#about">About</a>
        <a className="nav-link" href="#experience">Experience</a>
        <a className="nav-link" href="#projects">Projects</a>
        <a className="nav-link" href="#education">Education</a>
        <a className="nav-link" href="#skills">Skills</a>
        <a className="nav-link" href="#contact">Contact</a>
      </div>
      <a className="nav-cta" href={P.cv} download="Umut-Arda-Yavuz-CV.pdf">
        Download CV <span className="arrow">↓</span>
      </a>
    </nav>);

}

// ===== Hero =====
function Hero() {
  const P = window.PORTFOLIO;
  return (
    <header className="hero" id="top">
      <div className="container">
        <div className="hero-meta">
          <span><span className="dot"></span>Open to brand · AI · automation roles</span>
          <span>{P.location}</span>
          <span>{P.tagline}</span>
        </div>
        <h1 className="hero-title">
          <span className="line">
            <span className="word">{P.name[0]}</span>{' '}
            <span className="word">{P.name[1]}</span>
          </span>
          <span className="line">
            <span className="word italic">{P.name[2]}</span>
            <span className="word">.</span>
          </span>
        </h1>
        <div className="hero-sub">
          <p className="hero-tag">{P.intro}</p>
          <div className="hero-cta-row">
            <a className="btn btn-primary" href="#experience">
              See my work <span className="arrow">↓</span>
            </a>
            <a className="btn btn-ghost" href="#contact">
              Book a call <span className="arrow">↗</span>
            </a>
          </div>
        </div>
      </div>
      <div className="hero-scroll">
        <span>Scroll</span>
        <span className="line-v"></span>
      </div>
    </header>);

}

// ===== Marquee =====
function Marquee({ reverse = false }) {
  const items = window.PORTFOLIO.marqueeWords;
  const doubled = [...items, ...items, ...items, ...items];
  return (
    <div className={`marquee ${reverse ? 'reverse' : ''}`}>
      <div className="marquee-track">
        {doubled.map((w, i) =>
        <span key={i} className="marquee-item">{w}</span>
        )}
      </div>
    </div>);

}

// ===== About =====
function About() {
  const P = window.PORTFOLIO;
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="section-head reveal">
          <span className="section-num">01 / About</span>
          <h2 className="section-title">
            A marketer who <span className="accent">listens</span> first,<br />
            ships <span className="italic">fast</span>.
          </h2>
        </div>
        <div className="about-grid">
          <p className="about-copy reveal" dangerouslySetInnerHTML={{ __html: P.about.body }}></p>
          <div className="about-side">
            <figure className="about-photo about-photo--filled reveal delay-1">
              <img src="assets/portrait.png" alt="Umut Arda Yavuz, portrait on the steps of the Royal Albert Hall, London" loading="lazy" />
              <figcaption>
                <span className="ap-cap-num">01</span>
                <span className="ap-cap-text">Royal Albert Hall · London</span>
              </figcaption>
            </figure>
            <dl className="about-meta reveal delay-2">
              {P.about.facts.map(([k, v]) =>
              <React.Fragment key={k}>
                  <dt>{k}</dt>
                  <dd>{v}</dd>
                </React.Fragment>
              )}
            </dl>
          </div>
        </div>
      </div>
    </section>);

}

// ===== Stats =====
function Stats() {
  const P = window.PORTFOLIO;
  return (
    <div className="container">
      <div className="stats reveal">
        {P.stats.map((s, i) =>
        <div className="stat" key={i}>
            <Counter to={s.value} suffix={s.suffix} />
            <div className="stat-label">{s.label}</div>
          </div>
        )}
      </div>
    </div>);

}

// ===== Experience =====
function Experience() {
  const [open, setOpen] = useState(0);
  const P = window.PORTFOLIO;
  return (
    <section className="section" id="experience">
      <div className="container">
        <div className="section-head reveal">
          <span className="section-num">02 / Experience</span>
          <h2 className="section-title">
            <span className="italic">Where</span> I've been<br />
            making things <span className="accent">land</span>.
          </h2>
        </div>
        <div className="exp-list">
          {P.experience.map((e, i) =>
          <div
            key={i}
            className={`exp-item ${open === i ? 'open' : ''}`}
            onClick={() => setOpen(open === i ? -1 : i)}>
            
              <div className="exp-year">{e.year}</div>
              <div className="exp-main">
                <div className="exp-role">{e.role}</div>
                <div className="exp-co">{e.company} · {e.type}</div>
              </div>
              <div className="exp-cta">
                {open === i ? 'Close' : 'Expand'}
                <span className="exp-cta-arrow">{open === i ? '↑' : '↓'}</span>
              </div>
              <div className="exp-detail">
                <ul className="exp-bullets">
                  {e.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Logos strip =====
function Logos() {
  const P = window.PORTFOLIO;
  return (
    <div className="logos">
      <div className="container">
        <div className="logos-eyebrow">Experience across</div>
        <div className="logos-row">
          {P.logos.map((l, i) =>
          <div className="logo-item" key={i}>
              <div className="logo-name">{l.name}</div>
              <div className="logo-sub">{l.sub}</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

// ===== Featured Campaign =====
function Featured() {
  const F = window.PORTFOLIO.featured;
  const [active, setActive] = useState(0);
  return (
    <section className="featured" id="featured">
      <div className="container">
        <div className="featured-head reveal">
          <span className="featured-eyebrow">{F.eyebrow}</span>
          <h2 className="featured-title">
            <span className="line">{F.title}</span>
            <span className="line italic accent">{F.titleItalic}<span className="period">.</span></span>
          </h2>
          <p className="featured-sub">{F.subtitle}</p>
        </div>

        <div className="featured-meta reveal">
          <div>
            <div className="meta-label">Role</div>
            <div className="meta-val">{F.role}</div>
          </div>
          <div>
            <div className="meta-label">Scope</div>
            <div className="meta-val">{F.scope}</div>
          </div>
          <div>
            <div className="meta-label">Deliverables</div>
            <div className="meta-val">
              {F.deliverables.map((d, i) =>
              <span className="deliv-pill" key={i}>{d}</span>
              )}
            </div>
          </div>
        </div>

        <div className="poster-stage reveal">
          <div className="poster-stack">
            {F.posters.map((p, i) =>
            <div
              key={i}
              className={`poster ${active === i ? 'active' : ''}`}
              style={{ '--idx': i, '--offset': i - active }}
              onClick={() => setActive(i)}>
              
                <img src={p.src} alt={p.caption} loading="lazy" />
              </div>
            )}
          </div>
          <div className="poster-controls">
            <div className="poster-caption">
              <span className="poster-num">{String(active + 1).padStart(2, '0')} / {String(F.posters.length).padStart(2, '0')}</span>
              <span className="poster-text">{F.posters[active].caption}</span>
            </div>
            <div className="poster-dots">
              {F.posters.map((_, i) =>
              <button
                key={i}
                className={`poster-dot ${active === i ? 'active' : ''}`}
                onClick={() => setActive(i)}
                aria-label={`Poster ${i + 1}`}>
              </button>
              )}
            </div>
          </div>
        </div>

        <div className="spots-row reveal">
          <div className="spots-label">
            <span className="section-eyebrow">15s social spots</span>
            <p>Shot in Almería · vertical for IG / TikTok / YT Shorts.</p>
          </div>
          <div className="spots-grid">
            {F.videos.map((v, i) =>
            <video
              key={i}
              src={v}
              autoPlay
              muted
              loop
              playsInline
              className="spot-video">
            </video>
            )}
          </div>
        </div>

        <div className="featured-note reveal">
          <span className="note-mark">✦</span>
          <span>{F.note}</span>
        </div>
      </div>
    </section>);

}

// ===== Projects =====
function Projects() {
  const P = window.PORTFOLIO;
  return (
    <section className="section" id="projects">
      <div className="container">
        <div className="section-head reveal">
          <span className="section-num">03 / Projects</span>
          <h2 className="section-title">
            Where <span className="italic">brand</span> meets<br />
            <span className="accent italic">agentic</span> systems.
          </h2>
        </div>
        <div className="projects-grid">
          {P.projects.map((p, i) =>
          <article className={`project-card reveal delay-${i % 3}`} key={i}>
              <div className="project-head">
                <span className="project-tag">{p.tag}</span>
                <span className="project-num">{String(i + 1).padStart(2, '0')}</span>
              </div>
              <h3 className="project-title">{p.title}</h3>
              <p className="project-summary">{p.summary}</p>
              <ul className="project-bullets">
                {p.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
              <div className="project-stack">
                {p.stack.map((s, j) => <span className="stack-pill" key={j}>{s}</span>)}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ===== Education =====
function Education() {
  const P = window.PORTFOLIO;
  return (
    <section className="section" id="education">
      <div className="container">
        <div className="section-head reveal">
          <span className="section-num">04 / Education</span>
          <h2 className="section-title">
            Trained where <span className="accent italic">strategy</span><br />
            meets <span className="italic">rigour</span>.
          </h2>
        </div>
        <div className="edu-grid">
          {P.education.map((e, i) =>
          <div className={`edu-card reveal delay-${i + 1}`} key={i}>
              <div className="edu-card-tag">{e.tag}</div>
              <div className="edu-card-year">{e.year}</div>
              <div className="edu-card-school">{e.school}</div>
              <div className="edu-card-degree">{e.degree}</div>
              <p className="edu-card-desc">{e.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Skills =====
function Skills() {
  const P = window.PORTFOLIO;
  return (
    <section className="section" id="skills">
      <div className="container">
        <div className="section-head reveal">
          <span className="section-num">05 / Toolkit</span>
          <h2 className="section-title">
            The <span className="italic">stack</span> I run<br />
            campaigns <span className="accent">with</span>.
          </h2>
        </div>
        <div className="skills-wrap">
          <div className="skills-side reveal">
            <span className="section-eyebrow">Proficiency</span>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: '38px', lineHeight: 1.1, margin: 0, fontWeight: 400, letterSpacing: '-0.01em' }}>
              Comfortable across the full marketing stack — from raw data to launch-ready creative.
            </h3>
            <p>Hover any tool to see it pop. I lean hardest on analytics and consumer insight, but I cut my own edits in Premiere when a deadline calls.</p>
          </div>
          <div className="skill-list">
            {P.skills.map((s, i) =>
            <div className="skill-row" key={i} style={{ '--lvl': s.level + '%' }}>
                <span className="skill-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="skill-name">{s.name}</span>
                <span className="skill-meter"></span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ===== Expertise =====
function Expertise() {
  const P = window.PORTFOLIO;
  return (
    <section className="section" id="expertise">
      <div className="container">
        <div className="section-head reveal">
          <span className="section-num">06 / Expertise</span>
          <h2 className="section-title">
            Three things I'll<br />
            <span className="accent italic">always</span> bring.
          </h2>
        </div>
        <div className="exp-areas reveal">
          {P.expertise.map((e, i) =>
          <div className="area" key={i}>
              <div className="area-icon">{e.icon}</div>
              <h3 className="area-title">{e.title}</h3>
              <p className="area-body">{e.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Contact =====
function Contact() {
  const P = window.PORTFOLIO;
  return (
    <section className="section contact" id="contact">
      <div className="container">
        <div className="section-head reveal">
          <span className="section-num">07 / Contact</span>
          <span className="section-eyebrow">Open to opportunities</span>
        </div>
        <h2 className="contact-title reveal">
          Let's <span className="italic">talk</span><br />
          marketing.
        </h2>
        <div className="contact-grid">
          <div className="contact-block reveal">
            <div className="label">Email</div>
            <a href={`mailto:${P.email}`}>{P.email}</a>
          </div>
          <div className="contact-block reveal delay-1">
            <div className="label">Elsewhere</div>
            <a href={P.linkedin} target="_blank" rel="noreferrer">LinkedIn ↗</a>
          </div>
        </div>
        <div className="contact-cta-row reveal delay-2">
          <a className="btn btn-accent" href={`mailto:${P.email}`}>
            Get in touch <span className="arrow">↗</span>
          </a>
          <a className="btn btn-ghost" href={P.cv} download="Umut-Arda-Yavuz-CV.pdf">
            Download CV <span className="arrow">↓</span>
          </a>
        </div>
      </div>
    </section>);

}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer">
      <span>© {new Date().getFullYear()} Umut Arda Yavuz</span>
      <span>Crafted in Vienna · Built for marketing</span>
    </footer>);

}

// ===== Tweaks =====
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#ff4a1c",
  "displayFont": "Newsreader"
} /*EDITMODE-END*/;

function App() {
  const { progress, scrolled } = useScrollState();
  useReveal();
  const [tweaks, setTweak] = window.useTweaks(DEFAULTS);

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.style.setProperty('--display', `'${tweaks.displayFont}', serif`);
  }, [tweaks]);

  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const TR = window.TweakRadio;
  const TC = window.TweakColor;
  const TSel = window.TweakSelect;

  return (
    <>
      <Cursor />
      <div className="scroll-progress" style={{ width: `${progress * 100}%` }}></div>
      <Nav scrolled={scrolled} />
      <Hero />
      <Marquee />
      <Logos />
      <Featured />
      <About />
      <Stats />
      <Experience />
      <Projects />
      <Education />
      <Skills />
      <Expertise />
      <Marquee reverse />
      <Contact />
      <Footer />
      {TP &&
      <TP title="Portfolio Tweaks">
          <TS title="Theme">
            <TR
            label="Mode"
            value={tweaks.theme}
            options={[
            { label: 'Light', value: 'light' },
            { label: 'Dark', value: 'dark' }]
            }
            onChange={(v) => setTweak('theme', v)} />
          
          </TS>
          <TS title="Accent">
            <TC
            label="Accent color"
            value={tweaks.accent}
            options={['#ff4a1c', '#2a6fdb', '#1f8a5b', '#d4af37', '#b73fff']}
            onChange={(v) => setTweak('accent', v)} />
          
          </TS>
          <TS title="Typography">
            <TSel
            label="Display font"
            value={tweaks.displayFont}
            options={['Newsreader', 'Source Serif 4', 'DM Serif Display', 'Bodoni Moda']}
            onChange={(v) => setTweak('displayFont', v)} />
          
          </TS>
        </TP>
      }
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);