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

// === Live clock ===
function useClock() {
  const [time, setTime] = useState(() => fmt(new Date()));
  useEffect(() => {
    const id = setInterval(() => setTime(fmt(new Date())), 1000 * 30);
    return () => clearInterval(id);
  }, []);
  return time;
}
function fmt(d) {
  return new Intl.DateTimeFormat("fr-FR", {
    timeZone: "Europe/Paris",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false
  }).format(d);
}

// === Ruler ===
function Ruler({ top = false, thin = false, className = "" }) {
  return <div className={`ruler${top ? " top" : ""}${thin ? " thin" : ""} ${className}`} aria-hidden="true"></div>;
}

// === Topbar ===
function TopBar() {
  const time = useClock();
  return (
    <header className="topbar">
      <div className="topbar-grid">
        <div className="left">
          <span className="mono"><span className="dot"></span>SOCIAL MEDIA STRATEGIST</span>
          <span className="mono mute">//</span>
          <span className="mono mute">BXL (BE), BCL (ES)</span>
        </div>
        <a href="#top" className="mark">
          JULIANE<span className="slash">/</span>VAN CAUTER<span className="reg">®</span>
        </a>
        <nav className="right">
          <a href="#approche" className="mono">APPROCHE<span className="sup">01</span></a>
          <a href="#work" className="mono">WORK<span className="sup">03</span></a>
          <a href="#ensemble" className="mono">ENSEMBLE</a>
          <a href="#contact" className="mono">CONTACT</a>
        </nav>
      </div>
      <Ruler />
    </header>);

}

// === Hero ===
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-stage">
        <div className="hero-layout">
          <div className="hero-copy-l">
            <span className="mono mute">01 / THESIS</span>
            <p>
              Une stratégie digitale, ce n'est pas <em>simplement</em> publier.
            </p>
          </div>

          <div className="hero-photo" aria-hidden="true">
            <img src="assets/juliane.png" alt="" />
            <span className="pin">
              <span className="mono">Subj. JV<span className="sup">/01</span></span>
            </span>
            <span className="pin-left">
              <span className="mono">Specimen — 2026</span>
            </span>
          </div>

          <div className="hero-copy-r">
            <span className="mono mute">02 / METRIC</span>
            <p>
              Et ça ne se mesure pas uniquement en <span className="accent"><em>vues</em></span>.
            </p>
          </div>
        </div>
      </div>

      <Ruler className="thin" />

      <div className="hero-bottom">
        <div className="cell">
          <span className="mono mute">© 2026</span>
          <span className="mono v">JULIANE VAN CAUTER</span>
        </div>
        <div className="cell">
          <span className="mono mute">FIELD</span>
          <span className="mono v">SOCIAL · CONTENT</span>
        </div>
        <div className="cell">
          <span className="mono mute">METHOD</span>
          <span className="mono v">STRATEGY → EXECUTION</span>
        </div>
        <div className="cell">
          <span className="mono mute">BASED</span>
          <span className="mono v">FROM BX TO BCL</span>
        </div>
        <div className="cell">
          <span className="mono mute">SCROLL</span>
          <span className="mono v">↓ INDEX 01/05</span>
        </div>
      </div>
    </section>);

}

// === Marquee (services only) ===
function Marquee() {
  const services = [
  "SOCIAL MEDIA STRATEGY",
  "CONTENT DIRECTION",
  "BRANDING",
  "COMMUNITY MANAGEMENT",
  "EDITORIAL LINE",
  "CAMPAIGN PLANNING",
  "SOCIAL AUDIT",
  "MENTORING",
  "LAUNCH STRATEGY",
  "CREATIVE DIRECTION"];

  const items = [...services, ...services];
  return (
    <div className="marquee-wrap">
      <div className="ruler tk-top" aria-hidden="true"></div>
      <div className="ruler tk-bot" aria-hidden="true"></div>
      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          {items.map((t, i) =>
          <span className="marquee-item" key={i}>
              <span>{t}</span><span className="sep">✦</span>
            </span>
          )}
        </div>
      </div>
    </div>);

}

// === Approche ===
function Approche() {
  return (
    <section id="approche">
      <div className="container">
        <div className="section-head">
          <div className="idx">N°02</div>
          <h2>Mon approche — penser impact publication.</h2>
          <div className="right-meta">FIELD NOTES /A</div>
        </div>

        <div className="approche-grid">
          <p className="approche-quote">
            Une audience ne vaut rien <span className="accent">si elle ne sert rien.</span>
          </p>
          <div className="approche-body">
            <p>
              Après des études entre économie et communication, j'ai commencé mes premières missions
              en 2020 avec une approche très terrain — en touchant à différents formats et enjeux&nbsp;:
              réseaux sociaux, sites web, événementiel, création de contenu, branding.
            </p>
            <p>
              Aujourd'hui, j'accompagne des marques et projets dans la construction de stratégies
              social media pensées pour soutenir des objectifs business réels.
            </p>
          </div>
        </div>

        <div className="stats">
          <div className="stat">
            <div className="lab"><span>01 / EXPÉRIENCE</span><span>YR</span></div>
            <div className="num">3<span className="accent">+</span></div>
            <p className="desc">Années d'expérience — du terrain au conseil stratégique.</p>
          </div>
          <div className="stat">
            <div className="lab"><span>02 / OUTPUT</span><span>UNITS</span></div>
            <div className="num">10<span className="unit">K</span><span className="accent">+</span></div>
            <p className="desc">Publications créées et déployées sur tous formats.</p>
          </div>
          <div className="stat">
            <div className="lab"><span>03 / IMPACT</span><span>RATIO</span></div>
            <div className="num"><span className="accent">×</span>4</div>
            <p className="desc">Moyenne d'engagement multiplié dès le premier mois.</p>
          </div>
        </div>
      </div>
    </section>);

}

// === Work — horizontal grid ===
function Work() {
  const projects = [
  {
    image: "assets/elles.png",
    tag: "LINKEDIN & INSTAGRAM",
    title: "Elles Bougent",
    follow: "75K",
    sub: "Social Media Management",
    role: "via GUP",
    body:
    "Gestion et structuration de la présence digitale de l'association — contenus Instagram & LinkedIn, community management, ligne éditoriale.",
    result: "3M impressions LinkedIn · IG ×4"
  },
  {
    image: "assets/curvy.png",
    tag: "YOUTUBE",
    title: "Curvy Blue Marine",
    follow: "50K",
    sub: "Montage vidéo YouTube",
    role: "Direction de contenu",
    body:
    "Accompagnement de la créatrice sur le développement de formats YouTube plus immersifs et personnels — dérush, rythme, direction du montage et sound design.",
    result: "Statistiques ×2 dès la 1re vidéo"
  },
  {
    image: "assets/coffee.png",
    tag: "INSTAGRAM & TIKTOK",
    title: "Coffee Corner",
    follow: "Lausanne",
    sub: "Stratégie de lancement",
    role: "Direction créative globale",
    body:
    "Accompagnement global sur l'image de marque et la stratégie de communication digitale du lancement d'un café indépendant près de Lausanne.",
    result: "1,2M vues · file d'attente à l'ouverture"
  }];


  return (
    <section id="work">
      <div className="container">
        <div className="section-head">
          <div className="idx">N°03</div>
          <h2>Selected Work — trois projets, trois objectifs concrets.</h2>
          <div className="right-meta">03 / 03 · 2023—2026</div>
        </div>

        <div className="work-wrap">
          <div className="work-grid">
            {projects.map((p, i) =>
            <article className="work-card" key={p.title}>
                <div className="img-wrap">
                  <span className="tag">{p.tag}</span>
                  <img src={p.image} alt={p.title} />
                  <span className="num-pin">PROJET {String(i + 1).padStart(2, "0")}/03</span>
                </div>
                <div className="meta">
                  <span>2024</span>
                  <span>{p.tag}</span>
                </div>
                <h3>
                  {p.title}
                  <span className="follow">({p.follow})</span>
                </h3>
                <p className="sub">
                  {p.sub} <span className="role">· {p.role}</span>
                </p>
                <p className="body">{p.body}</p>
                <div className="result">
                  <span className="arrow">→</span>
                  <span>{p.result}</span>
                </div>
              </article>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// === Ensemble ===
function Ensemble() {
  return (
    <section id="ensemble" className="ensemble-orange">
      <div className="container">
        <div className="section-head">
          <div className="idx">N°04</div>
          <h2>Travailler ensemble</h2>
          <div className="right-meta">PROTOCOL /04</div>
        </div>

        <div className="ensemble-statement">
          <p>
            Aujourd'hui, je travaille à la fois en direct sur des missions de conseil
            et d'accompagnement, ainsi qu'à travers <em>GUP</em>, le studio créatif que
            j'ai développé autour du social media, du contenu et de la direction créative.
          </p>
        </div>

        <div className="ensemble-cta">
          <a href="mailto:hello@julianevancauter.com">→ ME CONTACTER</a>
        </div>
      </div>
    </section>);

}

// === Contact ===
function Contact() {
  return (
    <section id="contact">
      <div className="container">
        <div className="section-head">
          <div className="idx">N°05</div>
          <h2>Contact — un projet, une question, ...</h2>
          <div className="right-meta">CHANNEL /05</div>
        </div>

        <div className="contact">
          <h3 className="big">
            <a href="mailto:hello@julianevancauter.com" style={{ fontSize: "100px" }}>
              hello@julianevancauter.com <span className="arr">↗</span>
            </a>
          </h3>
        </div>

        <div className="contact-row">
          <div className="col">
            <div className="lab">01 / DISPONIBILITÉ</div>
            <div className="val">
              Réponse sous 48h ouvrées.
            </div>
          </div>
          <div className="col">
            <div className="lab">02 / RÉSEAUX</div>
            <div className="val">
              <a href="https://www.instagram.com/juliane_mp4" target="_blank" rel="noopener noreferrer">Me suivre sur Instagram</a><br />
              <a href="https://www.linkedin.com/in/juliane-van-cauter-2559b12b6/" target="_blank" rel="noopener noreferrer">Me suivre sur LinkedIn</a><br />
              <a href="https://glowuppetillant.com/" target="_blank" rel="noopener noreferrer">Découvrir mon studio créatif GUP</a>
            </div>
          </div>
          <div className="col">
            <div className="lab">03 / BASÉE À</div>
            <div className="val">
              Bruxelles, Belgique / Barcelone, Espagne<br />
              Missions remote &amp; déplacements EU.
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// === Footer ===
function Foot() {
  return (
    <div className="foot-wrap">
      <div className="foot">
        <div className="cell"><span className="mono mute">© 2026</span><span className="mono v">JULIANE VAN CAUTER</span></div>
        <div className="cell"><span className="mono mute">DOC</span><span className="mono v">V5.0 — FINAL</span></div>
        <div className="cell"><span className="mono mute">UPDATE</span><span className="mono v">MAI 2026</span></div>
        <div className="cell center"><span className="mono mute">INDEX</span><span className="mono v">05 / 05</span></div>
        <div className="cell right"><span className="mono mute">SIGNAL</span><span className="mono v">↗ ALL SYSTEMS GO</span></div>
        <div className="cell right"><span className="mono mute">↑</span><a className="mono v" href="#top">RETOUR EN HAUT</a></div>
      </div>
    </div>);

}

// === App ===
function App() {
  return (
    <>
      <TopBar />
      <Hero />
      <Marquee />
      <Approche />
      <Work />
      <Ensemble />
      <Contact />
      <Foot />
    </>);

}

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