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

// =============== HERO ===============
function Hero({ t, photos }) {
  const [activeIdx, setActiveIdx] = useState(0);
  const [progress, setProgress] = useState(0);
  const [timecode, setTimecode] = useState("00:00:00:00");

  // Pool of photo indices we use as the rotating "video" tiles
  const pool = [0, 4, 7, 12, 18, 22, 25, 9, 15];
  const tiles = [pool[activeIdx % pool.length], pool[(activeIdx+1) % pool.length], pool[(activeIdx+2) % pool.length]];

  useEffect(() => {
    const start = Date.now();
    const id = setInterval(() => {
      const elapsed = (Date.now() - start) / 1000;
      const cycle = elapsed % 4;
      setProgress((cycle / 4) * 100);
      const totalFrames = Math.floor(elapsed * 24);
      const f = totalFrames % 24;
      const s = Math.floor(elapsed) % 60;
      const m = Math.floor(elapsed / 60) % 60;
      const h = Math.floor(elapsed / 3600);
      setTimecode(
        `${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}:${String(f).padStart(2,"0")}`
      );
    }, 42);
    return () => clearInterval(id);
  }, []);

  useEffect(() => {
    const id = setInterval(() => setActiveIdx(i => i + 1), 4000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-stage">
        <div className="hero-tile main active">
          <img src={photos.gallery[tiles[0]]} alt="" key={tiles[0]} />
        </div>
        <div className="hero-tile">
          <img src={photos.gallery[tiles[1]]} alt="" key={tiles[1]} />
        </div>
        <div className="hero-tile">
          <img src={photos.gallery[tiles[2]]} alt="" key={tiles[2]} />
        </div>
      </div>

      <div className="hero-vignette" />
      <div className="scanline" />

      <div className="hud-bracket tl" />
      <div className="hud-bracket tr" />
      <div className="hud-bracket bl" />
      <div className="hud-bracket br" />

      <div className="hud hud-tl">
        <div className="hud-row"><span className="hud-tag">REC ●</span><span>{t.hero.tag1}</span></div>
      </div>
      <div className="hud hud-tr">
        <div className="hud-row" style={{justifyContent:"flex-end"}}><span>TC {timecode}</span></div>
      </div>

      <div className="reel-progress">
        <div className="reel-progress-fill" style={{width: progress + "%"}} />
      </div>

      <div className="hero-content">
        <div className="hero-meta">
          <span><span className="live-dot" />{t.hero.eyebrow}</span>
          <span>· {t.hero.tag2}</span>
        </div>
        <h1 className="hero-headline">
          {t.hero.headline1}<br />
          {t.hero.headline2} <span className="accent-word">{t.hero.headline3}</span>
        </h1>
        <div className="hero-sub">
          <p className="hero-tagline">{t.hero.tagline}</p>
          <div className="hero-actions">
            <a href="#work" className="btn-primary">▶ {t.hero.ctaPrimary}</a>
            <a href="#cta" className="btn-ghost">{t.hero.ctaGhost}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== MARQUEE ===============
function Marquee({ t }) {
  const items = ["CINEMATIC FILM", "BRAND STORYTELLING", "REELS · VERTICAL", "COLOR & POST", "EDITORIAL PHOTOGRAPHY", "ZURICH · BERN · WORLDWIDE"];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items, ...items].map((it, i) => <span key={i}>{it}</span>)}
      </div>
    </div>
  );
}

// =============== WORK ===============
function Work({ t, photos, work }) {
  return (
    <section className="section" id="work">
      <div className="container-wide">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{t.work.eyebrow}</div>
            <h2 className="section-title">{t.work.title} <span className="outline">{t.work.titleOutline}</span></h2>
          </div>
          <div className="section-meta">
            {t.work.meta.map((m,i)=> <div key={i}>{m}</div>)}
          </div>
        </div>
        <div className="work-grid">
          {work.map((w,i) => (
            <div key={i} className={"work-card span-" + w.span}>
              <img src={photos.gallery[w.idx]} alt="" />
              <div className="work-card-overlay">
                <div className="work-card-tag"><span className="dot" />{w.tag}</div>
                <div className="work-card-bottom">
                  <div className="work-card-title">{w.title}</div>
                  <div className="work-card-meta">{w.meta}<br />{w.duration}</div>
                </div>
              </div>
              <div className="play-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== SERVICES ===============
function Services({ t }) {
  return (
    <section className="section services" id="services">
      <div className="container-wide">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{t.services.eyebrow}</div>
            <h2 className="section-title">{t.services.title} <span className="outline">{t.services.titleOutline}</span></h2>
          </div>
          <div className="section-meta">05 · CAPABILITIES<br />ALL INCLUDED</div>
        </div>
        <div className="services-list">
          {t.services.list.map((s,i) => (
            <div key={i} className="service-row">
              <div className="num">0{i+1} /</div>
              <div className="name">{s.name}</div>
              <div className="desc">{s.desc}</div>
              <div className="tags">{s.tags.map((tg,j)=> <span key={j} className="tag">{tg}</span>)}</div>
              <div className="arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== ABOUT ===============
function About({ t, photos }) {
  return (
    <section className="section" id="about">
      <div className="container-wide">
        <div className="about">
          <div className="about-image">
            <img src={photos.about} alt="Luca" />
            <div className="about-image-tag">{t.about.tag}</div>
          </div>
          <div className="about-content">
            <div className="section-eyebrow">{t.about.eyebrow}</div>
            <h2 className="section-title">{t.about.title}<br /><span style={{color:"var(--accent)"}}>{t.about.titleAccent}</span></h2>
            <p style={{marginTop: 32}}>{t.about.p1}</p>
            <p>{t.about.p2}</p>
            <div className="about-stats">
              {t.about.stats.map((s,i) => (
                <div key={i}>
                  <div className="stat-num">{s.num.includes("+") ? <><span className="accent">{s.num.replace("+","")}</span>+</> : <span className="accent">{s.num}</span>}</div>
                  <div className="stat-label">{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== PROCESS ===============
function Process({ t }) {
  return (
    <section className="section process" id="process">
      <div className="container-wide">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{t.process.eyebrow}</div>
            <h2 className="section-title">{t.process.title} <span className="outline">{t.process.titleOutline}</span></h2>
          </div>
          <div className="section-meta">04 · STEPS<br />FROM BRIEF TO FINAL CUT</div>
        </div>
        <div className="process-grid">
          {t.process.steps.map((s,i) => (
            <div key={i} className="process-step">
              <div className="process-step-num">{s.num}</div>
              <h3>{s.h}</h3>
              <p>{s.p}</p>
              <div className="process-step-icon">{s.icon}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== CLIENTS + TESTIMONIALS ===============
function Clients({ t }) {
  return (
    <section className="section" id="clients">
      <div className="container-wide">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{t.clients.eyebrow}</div>
            <h2 className="section-title">{t.clients.title} <span className="outline">{t.clients.titleOutline}</span></h2>
          </div>
          <div className="section-meta">12 · PARTNERS<br />2024 — 2026</div>
        </div>
        <div className="clients-grid">
          {t.clients.logos.map((l,i) => <div key={i} className="client-cell">{l}</div>)}
        </div>
        <div className="testimonials">
          {t.clients.testimonials.map((tt,i) => (
            <div key={i} className="testimonial">
              <div className="testimonial-quote">{tt.quote}</div>
              <div className="testimonial-meta">{tt.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== CTA ===============
function CTA({ t }) {
  return (
    <section className="cta" id="cta">
      <div className="cta-bg-text">{t.cta.bgText}</div>
      <div className="container-wide">
        <div className="cta-content">
          <div className="cta-eyebrow">{t.cta.eyebrow}</div>
          <h2 className="cta-headline">
            {t.cta.headline1}<br />
            {t.cta.headline2} <span className="accent">{t.cta.headlineAccent}</span>
          </h2>
          <p className="cta-sub">{t.cta.sub}</p>
          <div className="cta-row">
            <a href="mailto:hi@visix-media.ch" className="btn-primary">{t.cta.ctaPrimary}</a>
            <a href="#" className="btn-ghost">{t.cta.ctaGhost}</a>
          </div>
        </div>
        <div className="contact-rows">
          {t.cta.contact.map((c,i) => (
            <div key={i} className="contact-cell">
              <div className="contact-label">{c.label}</div>
              <div className="contact-value">{c.link ? <a href={c.link}>{c.value}</a> : c.value}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== FOOTER ===============
function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-mark">VISIX MEDIA</div>
        <div className="footer-grid">
          <div className="footer-col">
            <h4>{t.footer.meta.split("·")[1] ? "Studio" : "Studio"}</h4>
            <span style={{color:"var(--fg)"}}>{t.footer.meta}</span>
            <span style={{marginTop: 12, display:"block"}}>hi@visix-media.ch</span>
          </div>
          {t.footer.cols.map((col,i) => (
            <div key={i} className="footer-col">
              <h4>{col.h}</h4>
              {col.links.map(([label, href], j) => <a key={j} href={href}>{label}</a>)}
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>{t.footer.copyright}</span>
          <span>v2026.05 · MADE WITH 🎞</span>
        </div>
      </div>
    </footer>
  );
}

// =============== NAV ===============
function Nav({ t, lang, setLang, theme, setTheme }) {
  return (
    <nav className="nav">
      <a href="#top" className="logo-mark">
        <span className="logo-glyph"></span>
        VISIX MEDIA
      </a>
      <div className="nav-links">
        <a href="#work" className="nav-link active">{t.nav.work}</a>
        <a href="#services" className="nav-link">{t.nav.services}</a>
        <a href="#about" className="nav-link">{t.nav.about}</a>
        <a href="#process" className="nav-link">{t.nav.process}</a>
        <a href="#cta" className="nav-link">{t.nav.contact}</a>
      </div>
      <div className="nav-right">
        <div className="lang-toggle">
          <button className={lang==="de"?"active":""} onClick={()=>setLang("de")}>DE</button>
          <button className={lang==="en"?"active":""} onClick={()=>setLang("en")}>EN</button>
        </div>
        <a href="#cta" className="nav-cta">▶ {lang==="de"?"Anfragen":"Get in touch"}</a>
      </div>
    </nav>
  );
}

Object.assign(window, { Hero, Marquee, Work, Services, About, Process, Clients, CTA, Footer, Nav });