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

// ---------- Data ----------
const CV = {
  name: "Muhammed Çelebi",
  roles: ["Video Editor", "Motion Designer", "AI Filmmaker"],
  location: "Istanbul, Turkey",
  phone: "+90 536 791 38 54",
  email: "trmuhammedcelebi@gmail.com",
  links: [
    { label: "linkedin", handle: "/in/muhammedaep", href: "https://linkedin.com/in/muhammedaep" },
    { label: "instagram", handle: "@muhammed.aep", href: "https://instagram.com/muhammed.aep" },
    { label: "youtube", handle: "showreel →", href: "https://www.youtube.com/watch?v=a2IcaRwQKZc&list=PL5Wibjg1Ak4OwWCF93A3Rs4BvfQJs6FWM" },
  ],
  summary:
    "Video editor and AI filmmaker based in Istanbul. Started editing at 15 out of pure curiosity — \u201chow do they make these videos?\u201d — and haven't stopped since. Over nearly a decade I turned that obsession into professional work, and today I produce and localize customer education content at Insider One across four languages. I thrive on pushing myself further: shipping more, learning faster, testing every new AI tool the moment it drops.",
  experience: [
    {
      id: "insider",
      role: "Customer Education Videographer",
      company: "Insider One",
      place: "Istanbul",
      from: "Aug 2024",
      to: "Present",
      yearFrom: 2024.7,
      yearTo: 2026.4,
      tag: "Full-time",
      bullets: [
        { m: "50+", t: "product education videos produced end-to-end — shooting, editing, motion design, delivery — turning internal scripts into polished content that teaches global customers how to use the SaaS product suite." },
        { m: "150+", t: "videos localized into Portuguese, with German and Spanish in progress. Adapting tone, pacing, and on-screen typography for each market." },
        { m: "01", t: "Directed and produced the opening film for Lift Awards, Insider's flagship customer awards ceremony attended by global marketing leaders. (Confidential — available upon request.)" },
        { m: "07+", t: "short films directed for internal events and ceremonies — transitioning from traditional crewed shoots to fully AI-generated productions using Veo, Seedance, Kling, and Midjourney." },
        { m: "∞", t: "Custom internal tools built via AI-assisted development (vibecoding) to automate recurring video workflows, including automated localization pipelines with Remotion." },
        { m: "180+", t: "participants in a 6-session AI Visual & Video Workshop I led as part of Insider's AI Weekend social impact initiative." },
      ],
    },
    {
      id: "freelance",
      role: "Independent Video Work",
      company: "Freelance / Self-Directed",
      place: "Remote",
      from: "2017",
      to: "2024",
      yearFrom: 2017,
      yearTo: 2024.6,
      tag: "Self-directed",
      bullets: [
        { m: "MV", t: "Edited and produced music videos as primary focus — collaborating with independent artists and production teams on visual storytelling and post-production." },
        { m: "—", t: "Additional freelance video work for independent clients and personal projects; selected pieces archived on YouTube." },
        { m: "15", t: "Self-taught foundation in editing, motion design, and post-production from age 15 — including school projects and small-scale commissioned work." },
      ],
    },
  ],
  tools: {
    "Video / Motion": ["After Effects", "Premiere Pro", "Remotion"],
    "AI Stack": ["Veo 3.1", "Seedance 2.0", "Kling", "Midjourney", "Nano Banana Pro", "ElevenLabs"],
    "Design": ["Photoshop", "Figma"],
    "Specialties": ["Localization EN→PT/DE/ES", "AI filmmaking", "Automated pipelines"],
  },
  education: [
    {
      school: "Istanbul Topkapı University",
      degree: "Associate Degree, Graphic Design",
      from: "Sep 2021",
      to: "2023",
      note: "Incomplete — left program to accept full-time offer from Insider.",
    },
  ],
  languages: [
    { name: "Turkish", level: "Native", pct: 100 },
    { name: "English", level: "B2 / C1", pct: 78 },
  ],
  certifications: ["Insider Web Suite Product Certification", "Insider SMS Product Certification"],
};

// ---------- Small atoms ----------
const Rule = ({ label }) => (
  <div className="rule">
    <span className="rule-label">{label}</span>
    <span className="rule-line" />
  </div>
);

const Tag = ({ children }) => <span className="tag">{children}</span>;

// ---------- Header ----------
function Header() {
  const [clock, setClock] = useState("");
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const hh = String(d.getHours()).padStart(2, "0");
      const mm = String(d.getMinutes()).padStart(2, "0");
      const ss = String(d.getSeconds()).padStart(2, "0");
      setClock(`${hh}:${mm}:${ss}`);
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <header className="header">
      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          {Array.from({ length: 6 }).map((_, i) => (
            <span key={i}>
              REC ● VIDEO EDITOR &nbsp;·&nbsp; MOTION DESIGNER &nbsp;·&nbsp; AI FILMMAKER &nbsp;·&nbsp; ISTANBUL &nbsp;·&nbsp;
            </span>
          ))}
        </div>
      </div>

      <div className="header-grid">
        <div className="header-meta">
          <div className="meta-row">
            <span className="dot" />
            <span>REC</span>
            <span className="mono-dim">·</span>
            <span>CV / 2026</span>
            <span className="mono-dim">·</span>
            <span>{clock} GMT+3</span>
          </div>
          <div className="meta-row mono-dim">
            <span>TAKE 01</span>
          </div>
        </div>

        <h1 className="name">
          <span className="name-line">Muhammed</span>
          <span className="name-line">Çelebi<span className="period">.</span></span>
        </h1>

        <div className="roles">
          {CV.roles.map((r, i) => (
            <span key={r} className="role">
              {r}
              {i < CV.roles.length - 1 && <span className="role-sep">×</span>}
            </span>
          ))}
        </div>

        <div className="header-contact">
          <ContactCol label="Based" lines={[CV.location]} />
          <div className="contact-col">
            <div className="contact-label">Reach</div>
            <a className="contact-line contact-link" href={`tel:${CV.phone.replace(/\s+/g, "")}`}>{CV.phone}</a>
            <a className="contact-line contact-link" href={`mailto:${CV.email}`}>{CV.email}</a>
          </div>
          <div className="contact-col">
            <div className="contact-label">Online</div>
            {CV.links.map((l) => (
              <a key={l.label} className="contact-line contact-link" href={l.href} target="_blank" rel="noreferrer">
                <span className="mono-dim" style={{ marginRight: 6 }}>{l.label}</span>
                {l.handle}
              </a>
            ))}
          </div>
        </div>
      </div>
    </header>
  );
}

function ContactCol({ label, lines }) {
  return (
    <div className="contact-col">
      <div className="contact-label">{label}</div>
      {lines.map((l, i) => (
        <div key={i} className="contact-line">{l}</div>
      ))}
    </div>
  );
}

// ---------- Summary ----------
function Summary() {
  return (
    <section className="summary">
      <Rule label="01 / Summary" />
      <p className="summary-text">{CV.summary}</p>
    </section>
  );
}

// ---------- Experience timeline ----------
function Experience() {
  const minY = 2017;
  const maxY = 2026.5;
  const span = maxY - minY;
  const pct = (y) => ((y - minY) / span) * 100;

  const years = [2017, 2019, 2021, 2023, 2026];

  return (
    <section className="experience">
      <Rule label="02 / Experience" />

      <div className="timeline">
        <div className="timeline-track">
          {years.map((y) => (
            <div key={y} className="tl-tick" style={{ left: `${pct(y)}%` }}>
              <span className="tl-tick-mark" />
              <span className="tl-tick-label">{y}</span>
            </div>
          ))}
          {CV.experience.map((e) => (
            <div
              key={e.id}
              className={`tl-bar tl-${e.id}`}
              style={{
                left: `${pct(e.yearFrom)}%`,
                width: `${pct(e.yearTo) - pct(e.yearFrom)}%`,
              }}
              title={`${e.role} — ${e.from} → ${e.to}`}
            >
              <span className="tl-bar-label">{e.company}</span>
            </div>
          ))}
          <div className="tl-now" style={{ left: `${pct(maxY)}%` }}>
            <span>NOW</span>
          </div>
        </div>
      </div>

      <div className="jobs">
        {CV.experience.map((job) => (
          <Job key={job.id} job={job} />
        ))}
      </div>
    </section>
  );
}

function Job({ job }) {
  return (
    <article className="job">
      <div className="job-head">
        <div className="job-title-block">
          <div className="job-tag">
            <Tag>{job.tag}</Tag>
          </div>
          <h3 className="job-role">{job.role}</h3>
          <div className="job-company">
            <span className="job-company-name">{job.company}</span>
            <span className="mono-dim">·</span>
            <span>{job.place}</span>
          </div>
        </div>
        <div className="job-dates">
          <div className="job-date-line">
            <span className="mono-dim">FROM</span> {job.from}
          </div>
          <div className="job-date-line">
            <span className="mono-dim">TO&nbsp;&nbsp;</span> {job.to}
          </div>
        </div>
      </div>

      <ul className="bullets">
        {job.bullets.map((b, i) => (
          <li key={i} className="bullet">
            <span className="bullet-metric">{b.m}</span>
            <span className="bullet-text">{b.t}</span>
          </li>
        ))}
      </ul>
    </article>
  );
}

// ---------- Tools ----------
function Tools() {
  return (
    <section className="tools">
      <Rule label="03 / Tools & Craft" />
      <div className="tools-grid">
        {Object.entries(CV.tools).map(([group, items]) => (
          <div key={group} className="tool-group">
            <div className="tool-group-label">{group}</div>
            <ul className="tool-list">
              {items.map((it) => (
                <li key={it} className="tool-item">
                  <span className="tool-bullet" />
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- Education + Languages + Certs ----------
function Footer() {
  return (
    <section className="footer-grid">
      <div className="foot-col">
        <Rule label="04 / Education" />
        {CV.education.map((e, i) => (
          <div key={i} className="edu">
            <div className="edu-school">{e.school}</div>
            <div className="edu-degree">{e.degree}</div>
            <div className="edu-dates mono-dim">{e.from} — {e.to}</div>
            <div className="edu-note">{e.note}</div>
          </div>
        ))}
      </div>

      <div className="foot-col">
        <Rule label="05 / Languages" />
        {CV.languages.map((l) => (
          <div key={l.name} className="lang">
            <div className="lang-head">
              <span className="lang-name">{l.name}</span>
              <span className="mono-dim">{l.level}</span>
            </div>
            <div className="lang-bar">
              <div className="lang-fill" style={{ width: `${l.pct}%` }} />
            </div>
          </div>
        ))}
      </div>

      <div className="foot-col">
        <Rule label="06 / Certifications" />
        <ul className="certs">
          {CV.certifications.map((c, i) => (
            <li key={i} className="cert">
              <span className="cert-num">0{i + 1}</span>
              <span>{c}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ---------- Colophon ----------
function Colophon() {
  return (
    <footer className="colophon">
      <div className="colophon-line">
        <span>M.Ç — CV 2026</span>
      </div>
      <div className="colophon-line mono-dim">
        <span>END OF REEL</span>
        <span>●</span>
      </div>
    </footer>
  );
}

// ---------- App ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "cinema",
  "accent": "#F2A25C",
  "density": "comfortable",
  "showTimeline": true,
  "monoMeta": true
}/*EDITMODE-END*/;

function App() {
  const [values, set] = window.useTweaks(TWEAK_DEFAULTS);

  const themeVars = useMemo(() => {
    const themes = {
      cinema: {
        "--bg": "#0e0d0b",
        "--bg-2": "#151310",
        "--fg": "#f4efe6",
        "--fg-dim": "#a39b8d",
        "--fg-faint": "#5a5349",
        "--rule": "#2a2620",
        "--card": "#141210",
      },
      paper: {
        "--bg": "#f3efe7",
        "--bg-2": "#e9e4d9",
        "--fg": "#17140f",
        "--fg-dim": "#5a5348",
        "--fg-faint": "#9a9183",
        "--rule": "#c9c1b1",
        "--card": "#ece6d8",
      },
      editorial: {
        "--bg": "#fbfaf7",
        "--fg": "#141312",
        "--bg-2": "#f1efea",
        "--fg-dim": "#56534c",
        "--fg-faint": "#a39f96",
        "--rule": "#d9d5cb",
        "--card": "#f4f2ec",
      },
    };
    return themes[values.theme] || themes.cinema;
  }, [values.theme]);

  const densityVars = values.density === "compact"
    ? { "--pad": "56px", "--gap": "36px", "--body-size": "14px" }
    : values.density === "roomy"
    ? { "--pad": "96px", "--gap": "72px", "--body-size": "16.5px" }
    : { "--pad": "72px", "--gap": "52px", "--body-size": "15.5px" };

  const rootStyle = {
    ...themeVars,
    ...densityVars,
    "--accent": values.accent,
  };

  return (
    <div className="page" style={rootStyle} data-theme={values.theme} data-mono-meta={values.monoMeta}>
      <div className="sheet">
        <Header />
        <Summary />
        <Experience />
        <Tools />
        <Footer />
        <Colophon />
      </div>

      {/* Tweaks panel */}
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Theme" />
        <window.TweakRadio
          label="Mode"
          value={values.theme}
          onChange={(v) => set("theme", v)}
          options={[
            { label: "Cinema", value: "cinema" },
            { label: "Paper", value: "paper" },
            { label: "Light", value: "editorial" },
          ]}
        />

        <window.TweakSection label="Accent" />
        <window.TweakColor
          label="Color"
          value={values.accent}
          onChange={(v) => set("accent", v)}
        />
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {["#F2A25C", "#E8635A", "#C7B585", "#8FB6A8", "#A9A3F5", "#EBE4D3"].map((c) => (
            <button
              key={c}
              onClick={() => set("accent", c)}
              style={{
                width: 22, height: 22, borderRadius: 4,
                background: c,
                border: (values.accent || "").toLowerCase() === c.toLowerCase()
                  ? "2px solid #29261b"
                  : "1px solid rgba(0,0,0,0.15)",
                cursor: "pointer", padding: 0,
              }}
              title={c}
            />
          ))}
        </div>

        <window.TweakSection label="Density" />
        <window.TweakRadio
          label="Spacing"
          value={values.density}
          onChange={(v) => set("density", v)}
          options={[
            { label: "Compact", value: "compact" },
            { label: "Regular", value: "comfortable" },
            { label: "Roomy", value: "roomy" },
          ]}
        />

        <window.TweakSection label="Details" />
        <window.TweakToggle
          label="Show timeline"
          value={values.showTimeline}
          onChange={(v) => set("showTimeline", v)}
        />
        <window.TweakToggle
          label="Monospace meta"
          value={values.monoMeta}
          onChange={(v) => set("monoMeta", v)}
        />
      </window.TweaksPanel>

      {/* Hide timeline via css when toggled off */}
      <style>{`
        ${!values.showTimeline ? ".timeline { display: none !important; }" : ""}
        ${!values.monoMeta ? ".mono-dim, .contact-label, .tool-group-label, .rule-label, .job-tag .tag, .bullet-metric, .tl-tick-label, .tl-now span { font-family: var(--sans) !important; letter-spacing: 0 !important; }" : ""}
      `}</style>
    </div>
  );
}

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