// About + Index + Footer — Journal removed from landing
const { useState: useStateS } = React;

function About() {
  return (
    <section className="about-v2" data-screen-label="03 About" id="about">
      <div className="about-v2-inner">
        <span className="mono dim">About</span>
        <p className="about-v2-lede">
          <em>Bernd Mantz</em> is a Directing DP based in
          Berlin. He works across music videos, fashion films, and commercial
          projects.
        </p>

        <div className="about-v2-foot mono dim">
          <div>
            <div>Based</div>
            <div className="about-v2-link">Berlin, DE</div>
          </div>
          <div>
            <div>Work</div>
            <div className="about-v2-link">Music Videos</div>
            <div className="about-v2-link">Fashion · Commercial</div>
          </div>
          <div>
            <div>Contact</div>
            <div className="about-v2-link">mail@berndmantz.com</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Index({ rows, projects, clients, onOpen }) {
  const [filter, setFilter] = useStateS("ALL");
  const filters = ["ALL", "Dir · DOP", "Director", "DOP"];
  const visible = rows.filter(r => filter === "ALL" || r.r === filter);

  const handleRowClick = (e, r) => {
    e.preventDefault();
    if (!onOpen) return;
    const match = (projects || []).find(p => p.title.toLowerCase() === r.t.toLowerCase());
    if (match) {
      onOpen(match);
    } else if (r.yt) {
      onOpen({
        id: "—",
        title: r.t,
        client: r.c,
        role: r.r,
        year: r.y,
        format: r.f,
        location: "",
        tag: r.f,
        palette: ["#1A1A1A", "#0F0E0C", "#C0B8A8"],
        color: "#C0B8A8",
        description: r.description || "",
        credits: r.credits || [],
        youtube: r.yt,
      });
    }
  };

  const isClickable = (r) => {
    const match = (projects || []).find(p => p.title.toLowerCase() === r.t.toLowerCase());
    return !!(match || r.yt);
  };

  return (
    <section className="index-v2" data-screen-label="04 Index" id="index">
      <div className="index-v2-head">
        <span className="mono dim">Index — All projects</span>
        <div className="index-v2-filters">
          {filters.map(f => (
            <button
              key={f}
              className={`fchip ${filter === f ? "is-on" : ""}`}
              onClick={() => setFilter(f)}
              data-cursor="link"
            >
              {f}
            </button>
          ))}
        </div>
      </div>

      <div className="index-table">
        {visible.map((r, i) => (
          <a
            key={i}
            className="index-row"
            href="#"
            onClick={(e) => handleRowClick(e, r)}
            data-cursor={isClickable(r) ? "link" : undefined}
          >
            <div className="mono dim">{r.y}</div>
            <div className="ix-title">{r.t}</div>
            <div className="mono dim">{r.c}</div>
            <div className="mono dim">{r.r}</div>
            <div className="mono dim">{r.f}</div>
            <div className="ix-arrow mono">{isClickable(r) ? "↗" : ""}</div>
          </a>
        ))}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer-v2" data-screen-label="05 Contact">
      <div className="footer-v2-inner">
        <span className="mono dim">Get in touch</span>
        <h2 className="footer-v2-h">
          <a href="mailto:mail@berndmantz.com" data-cursor="link" data-cursor-label="EMAIL">
            mail@berndmantz.com
          </a>
        </h2>
        <div className="footer-v2-foot mono dim">
          <span>© Bernd Mantz 2026</span>
          <span>Berlin, DE</span>
          <span><a href="/journal" data-cursor="link">Journal →</a></span>
        </div>
      </div>
    </footer>
  );
}

window.About = About;
window.Index = Index;
window.Footer = Footer;