/* eslint-disable react/no-unescaped-entities */
/* ============================================================
   Shared components — Ape × Uber pitch
   ============================================================ */

const { useState, useEffect, useRef, useMemo } = React;

// ---------- subtle reveal-on-scroll wrapper ----------
function Reveal({ children, as: As = "div", delay = 0, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (typeof IntersectionObserver === "undefined") {
      el.classList.add("in");
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setTimeout(() => el.classList.add("in"), delay);
            io.disconnect();
          }
        });
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return (
    <As ref={ref} className={"reveal " + (rest.className || "")} {...rest}>
      {children}
    </As>
  );
}

// ---------- icons ----------
function Icon({ name, size = 18, stroke = 1.5 }) {
  const common = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };
  switch (name) {
    case "arrow":
      return (<svg {...common}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case "arrow-down":
      return (<svg {...common}><path d="M12 5v14M5 13l7 7 7-7"/></svg>);
    case "check":
      return (<svg {...common}><path d="M4 12l5 5L20 6"/></svg>);
    case "x":
      return (<svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>);
    case "lock":
      return (<svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>);
    case "shield":
      return (<svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/></svg>);
    case "eye":
      return (<svg {...common}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>);
    case "pin":
      return (<svg {...common}><path d="M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>);
    case "bolt":
      return (<svg {...common}><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></svg>);
    case "leaf":
      return (<svg {...common}><path d="M20 4s-2 12-10 16c-6 .5-7-5-5-9 2-4 8-7 15-7z"/><path d="M4 20c4-8 10-12 16-14"/></svg>);
    case "qr":
      return (
        <svg {...common}>
          <rect x="3" y="3" width="7" height="7"/>
          <rect x="14" y="3" width="7" height="7"/>
          <rect x="3" y="14" width="7" height="7"/>
          <rect x="6" y="6" width="1" height="1"/>
          <rect x="17" y="6" width="1" height="1"/>
          <rect x="6" y="17" width="1" height="1"/>
          <path d="M14 14h3v3M21 14v3M14 17v4M17 21h4"/>
        </svg>
      );
    case "play":
      return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M7 4l14 8-14 8V4z"/></svg>);
    case "spark":
      return (<svg {...common}><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg>);
    case "circle":
      return (<svg {...common}><circle cx="12" cy="12" r="9"/></svg>);
    case "dot":
      return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="4"/></svg>);
    default:
      return null;
  }
}

// ---------- Uber wordmark (CSS text — proprietary font fallback) ----------
function UberWord({ size = 22, color = "currentColor" }) {
  return (
    <span
      style={{
        fontFamily: "var(--f-display)",
        fontWeight: 700,
        fontSize: size,
        letterSpacing: "-0.045em",
        color,
        lineHeight: 1,
      }}
    >
      Uber
    </span>
  );
}

// ---------- Nav ----------
function Nav() {
  return (
    <nav className="nav" aria-label="Top">
      <div className="nav-inner">
        <div className="nav-brand">
          <UberWord size={22} />
          <span className="nav-x">×</span>
          <span className="nav-ape">Ape Data</span>
        </div>
        <div className="nav-links">
          <a href="#problem">Problem</a>
          <a href="#solution">Solution</a>
          <a href="#testing">A/B Testing</a>
          <a href="#offer">Offer</a>
          <a href="#contact">Contact</a>
        </div>
        <a href="#contact" className="btn btn-primary" style={{ height: 38, fontSize: 13, padding: "0 16px" }}>
          Start the pilot <Icon name="arrow" size={14} />
        </a>
      </div>
    </nav>
  );
}

// ---------- Footer ----------
function Foot() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-row">
          <div>APE × UBER · PROPOSAL · MAY 2026</div>
          <div>NOT AFFILIATED WITH UBER TECHNOLOGIES, INC.</div>
        </div>
        <div style={{ marginTop: 16, color: "var(--t-4)" }}>
          All figures illustrative. Concept demo. Volume delivery guaranteed; consumer scan behavior reported, not promised.
        </div>
      </div>
    </footer>
  );
}

// ---------- The Can (used in hero + other places) ----------
function Can({ src = "assets/uber_can_front.png", style = {}, alt = "Uber co-branded water can" }) {
  return (
    <div className="can-wrap" style={style}>
      <img src={src} alt={alt} draggable="false" />
    </div>
  );
}

// export to window so other script files can use them
Object.assign(window, { Reveal, Icon, UberWord, Nav, Foot, Can });