/* Shared UI primitives, Swiss grid system */

const { useEffect, useRef, useState } = React;

/* ---------- Section header ---------- */
function SectionHeader({ num, label, title, aside }) {
  return (
    <header className="section-header">
      <div className="section-id">
        <span>{label}</span>
        <span className="bar"></span>
      </div>
      <div className="section-title-row">
        <h2 className="t-h1 section-title" dangerouslySetInnerHTML={{ __html: title }} />
        {aside ? <p className="section-aside">{aside}</p> : null}
      </div>
    </header>);

}

/* ---------- Theme toggle ---------- */
function ThemeToggle({ theme, onToggle }) {
  return (
    <button
      className="theme-toggle"
      onClick={onToggle}
      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
      title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}>
      
      {theme === "dark" ?
      // Sun
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
          <circle cx="12" cy="12" r="4.5" />
          <line x1="12" y1="2.5" x2="12" y2="5" />
          <line x1="12" y1="19" x2="12" y2="21.5" />
          <line x1="2.5" y1="12" x2="5" y2="12" />
          <line x1="19" y1="12" x2="21.5" y2="12" />
          <line x1="5.2" y1="5.2" x2="7" y2="7" />
          <line x1="17" y1="17" x2="18.8" y2="18.8" />
          <line x1="5.2" y1="18.8" x2="7" y2="17" />
          <line x1="17" y1="7" x2="18.8" y2="5.2" />
        </svg> :

      // Moon
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter">
          <path d="M20.5 14.5A8.5 8.5 0 1 1 9.5 3.5a7 7 0 0 0 11 11Z" />
        </svg>
      }
    </button>);

}

/* ---------- CTA Button ---------- */
function CTAButton({ children, onClick, href, variant, ...rest }) {
  const cls = "cta-btn" + (variant ? " " + variant : "");
  if (href) {
    return (
      <a className={cls} href={href} {...rest}>
        <span>{children}</span>
        <span className="arrow">→</span>
      </a>);

  }
  return (
    <button className={cls} onClick={onClick} {...rest} style={{ borderRadius: "99px" }}>
      <span>{children}</span>
      <span className="arrow">→</span>
    </button>);

}

/* ---------- Stat grid (case studies) ---------- */
function StatGrid({ stats }) {
  return (
    <div className="stat-grid">
      {stats.map((s, i) =>
      <div className="stat" key={i}>
          <div className="num">
            <span>{s.num}</span>
            {s.unit ? <span className="unit">{s.unit}</span> : null}
          </div>
          <div className="label">{s.label}</div>
        </div>
      )}
    </div>);

}

/* ---------- Project meta strip (case studies) ---------- */
function MetaStrip({ rows }) {
  return (
    <div className="meta-strip">
      {rows.map((r, i) =>
      <div className="cell" key={i}>
          <div className="k">{r.k}</div>
          <div className="v">{r.v}</div>
        </div>
      )}
    </div>);

}

/* ---------- Image frame ---------- */
function Frame({ src, num, caption, full }) {
  return (
    <figure className={"frame" + (full ? " frame-full" : "")} style={{ margin: 0 }}>
      <img src={src} alt={caption || ""} loading="lazy" />
      {num || caption ?
      <figcaption className="frame-cap">
          {num ? <span className="num">{num}</span> : null}
          <span>{caption}</span>
        </figcaption> :
      null}
    </figure>);

}

/* ---------- Role split ---------- */
function RoleSplit({ owned, team }) {
  return (
    <div className="role-split">
      <div>
        <div className="k">What I owned</div>
        <ul>{owned.map((x, i) => <li key={i}>{x}</li>)}</ul>
      </div>
      <div>
        <div className="k">Team contribution</div>
        <ul>{team.map((x, i) => <li key={i}>{x}</li>)}</ul>
      </div>
    </div>);

}

/* ---------- Tradeoff ---------- */
function Tradeoff({ chose, cut }) {
  return (
    <div className="tradeoff">
      <div className="chose">
        <div className="k">We chose</div>
        <p>{chose}</p>
      </div>
      <div className="cut">
        <div className="k">We cut</div>
        <p>{cut}</p>
      </div>
    </div>);

}

/* ---------- Pull quote ---------- */
function Pull({ children, cite }) {
  return (
    <blockquote className="pull">
      <span dangerouslySetInnerHTML={{ __html: children }} />
      {cite ? <cite>, {cite}</cite> : null}
    </blockquote>);

}

/* ---------- Challenge / Solution / Impact ---------- */
function CSI({ num, title, challenge, solution, impact, children }) {
  return (
    <section className="csi">
      <div className="csi-num">Feature {num}</div>
      <h3 className="csi-title" dangerouslySetInnerHTML={{ __html: title }} />
      <div className="csi-blocks">
        <div className="csi-block">
          <div className="k">Challenge</div>
          <p>{challenge}</p>
        </div>
        <div className="csi-block">
          <div className="k">Solution</div>
          <p>{solution}</p>
        </div>
        <div className="csi-block">
          <div className="k">Impact</div>
          <p>{impact}</p>
        </div>
      </div>
      {children ? <div style={{ marginTop: 36 }}>{children}</div> : null}
    </section>);

}

/* ---------- Two-column prose layout (case study body) ---------- */
function Col2({ step, label, children }) {
  return (
    <div className="col-2">
      <div className="col-label">
        {step ? <span className="step">{step}</span> : null}
        {label}
      </div>
      <div className="prose">{children}</div>
    </div>);

}

/* ---------- Fade-in on scroll ---------- */
function FadeIn({ children, style }) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      ([e]) => {
        if (e.isIntersecting) {
          setVis(true);
          io.disconnect();
        }
      },
      { threshold: 0.1 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} className={"fade-in" + (vis ? " in" : "")} style={style}>
      {children}
    </div>);

}

Object.assign(window, {
  SectionHeader,
  ThemeToggle,
  CTAButton,
  StatGrid,
  MetaStrip,
  Frame,
  RoleSplit,
  Tradeoff,
  Pull,
  CSI,
  Col2,
  FadeIn
});