// components.jsx — shared UI building blocks

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

// ────────────────────────────────────────────────────────────
// Icons (inline SVG, hand-crafted minimal stroke icons)
// ────────────────────────────────────────────────────────────
const Icon = ({ name, size = 18, stroke = 2, ...rest }) => {
  const P = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", ...rest };
  switch (name) {
    case "arrow-right":return <svg {...P}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
    case "arrow-left":return <svg {...P}><path d="M19 12H5M11 5l-7 7 7 7" /></svg>;
    case "check":return <svg {...P}><path d="M5 12l5 5L20 7" /></svg>;
    case "x":return <svg {...P}><path d="M6 6l12 12M18 6L6 18" /></svg>;
    case "play":return <svg {...P} fill="currentColor" stroke="none"><path d="M8 5v14l11-7-11-7z" /></svg>;
    case "lock":return <svg {...P}><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V7a4 4 0 018 0v4" /></svg>;
    case "clock":return <svg {...P}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>;
    case "calendar":return <svg {...P}><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" /></svg>;
    case "video":return <svg {...P}><rect x="3" y="6" width="13" height="12" rx="2" /><path d="M16 10l5-3v10l-5-3" /></svg>;
    case "user":return <svg {...P}><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-7 8-7s8 3 8 7" /></svg>;
    case "users":return <svg {...P}><circle cx="9" cy="8" r="3" /><circle cx="17" cy="9" r="2.5" /><path d="M3 20c0-3 3-5 6-5s6 2 6 5M14 20c0-2 2-4 4-4s4 1.5 4 4" /></svg>;
    case "menu":return <svg {...P}><path d="M4 6h16M4 12h16M4 18h16" /></svg>;
    case "search":return <svg {...P}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" /></svg>;
    case "upload":return <svg {...P}><path d="M12 16V4M6 10l6-6 6 6M4 20h16" /></svg>;
    case "download":return <svg {...P}><path d="M12 4v12M6 10l6 6 6-6M4 20h16" /></svg>;
    case "settings":return <svg {...P}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z" /></svg>;
    case "credit-card":return <svg {...P}><rect x="3" y="6" width="18" height="13" rx="2" /><path d="M3 11h18" /></svg>;
    case "layers":return <svg {...P}><path d="M12 2L2 8l10 6 10-6-10-6z" /><path d="M2 16l10 6 10-6M2 12l10 6 10-6" /></svg>;
    case "book":return <svg {...P}><path d="M4 4h12a4 4 0 014 4v12H8a4 4 0 01-4-4V4z" /><path d="M4 16a4 4 0 014-4h12" /></svg>;
    case "chart":return <svg {...P}><path d="M4 20V10M10 20V4M16 20v-8M22 20H2" /></svg>;
    case "logout":return <svg {...P}><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" /></svg>;
    case "phone":return <svg {...P}><path d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.3 1.8.6 2.6a2 2 0 01-.5 2.1L8 9.6a16 16 0 006 6l1.2-1.2a2 2 0 012.1-.5c.8.3 1.7.5 2.6.6A2 2 0 0122 16.9z" /></svg>;
    case "mail":return <svg {...P}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></svg>;
    case "external":return <svg {...P}><path d="M7 17L17 7M9 7h8v8" /></svg>;
    case "filter":return <svg {...P}><path d="M3 5h18l-7 9v6l-4-2v-4L3 5z" /></svg>;
    case "plus":return <svg {...P}><path d="M12 5v14M5 12h14" /></svg>;
    case "edit":return <svg {...P}><path d="M17 3a2.83 2.83 0 014 4L8 20l-5 1 1-5L17 3z" /></svg>;
    case "trash":return <svg {...P}><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" /></svg>;
    case "chevron-down":return <svg {...P}><path d="M6 9l6 6 6-6" /></svg>;
    case "chevron-right":return <svg {...P}><path d="M9 18l6-6-6-6" /></svg>;
    case "home":return <svg {...P}><path d="M3 11l9-8 9 8M5 10v10h14V10" /></svg>;
    case "star":return <svg {...P} fill="currentColor" stroke="none"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-7-5-4.9 6.9-1L12 2z" /></svg>;
    case "shield":return <svg {...P}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z" /></svg>;
    case "alert":return <svg {...P}><circle cx="12" cy="12" r="10" /><path d="M12 8v5M12 16h.01" /></svg>;
    default:return null;
  }
};

// ────────────────────────────────────────────────────────────
// Brandmark
// ────────────────────────────────────────────────────────────
const Brand = ({ onClick, size }) =>
<button onClick={onClick} className="brandmark" style={{ background: "transparent", border: 0, padding: 0 }}>
    <span className="mark">{"</>"}</span>
    <span style={{ fontSize: size || 18 }}>Computer-tution</span>
  </button>;


// ────────────────────────────────────────────────────────────
// Public navbar
// ────────────────────────────────────────────────────────────
const Navbar = ({ go, dark }) =>
<nav style={{
  position: "sticky", top: 0, zIndex: 50,
  background: dark ? "rgba(31,41,55,.92)" : "rgba(255,255,255,.85)",
  color: dark ? "#fff" : "var(--ink)",
  backdropFilter: "blur(12px)",
  borderBottom: "1px solid var(--line)"
}}>
    <div className="container row center between" style={{ height: 72 }}>
      <Brand onClick={() => go("/")} />
      <div className="row center gap-8" style={{ gap: 28 }}>
        <button onClick={() => go("/preview")} className="btn btn-ghost btn-sm">Free Preview</button>
        <button onClick={() => go("/login")} className="btn btn-ghost btn-sm">Log in</button>
        <button onClick={() => go("/signup")} className="btn btn-primary btn-sm">Enrol now</button>
      </div>
    </div>
  </nav>;


// ────────────────────────────────────────────────────────────
// Footer
// ────────────────────────────────────────────────────────────
const Footer = ({ go }) =>
<footer style={{ background: "var(--ink)", color: "#fff", padding: "64px 0 40px" }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 32 }}>
        <div className="col gap-12">
          <div className="row center gap-12">
            <span style={{ width: 32, height: 32, borderRadius: 8, background: "#fff", color: "var(--blue)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-mono)", fontWeight: 700 }}>{"</>"}</span>
            <span style={{ fontWeight: 700, fontSize: 18 }}>Computer-tution</span>
          </div>
          <p style={{ color: "rgba(255,255,255,.6)", maxWidth: 360, fontSize: 14 }}>
            ICSE Class 10 Computer Applications and ISC Class 12 Computer Science,
            taught live by M L Revathi. Recordings included. No noise.
          </p>
        </div>
        <div className="col gap-8">
          <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,.5)" }}>Product</div>
          <button className="footlink" onClick={() => go("/preview")}>Free preview</button>
          <button className="footlink" onClick={() => go("/signup")}>Enrolment</button>
          <button className="footlink" onClick={() => go("/login")}>Student login</button>
        </div>
        <div className="col gap-8">
          <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,.5)" }}>Contact</div>
          <a className="footlink" href="mailto:revathi@computertution.in">revathi@computertution.in</a>
          <a className="footlink" href="tel:+919876543210">+91 98765 43210</a>
        </div>
        <div className="col gap-8">
          <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,.5)" }}>Follow</div>
          <a className="footlink" href="#">Instagram</a>
          <a className="footlink" href="#"></a>
          <a className="footlink" href="#">WhatsApp</a>
        </div>
      </div>
      <div className="row between" style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,.1)", color: "rgba(255,255,255,.5)", fontSize: 13 }}>
        <span>© 2025 Computer-tution. All rights reserved.</span>
        <span className="row gap-16">
          <button className="footlink" onClick={() => go("/privacy")}>Privacy</button>
          <button className="footlink" onClick={() => go("/terms")}>Terms</button>
          <button className="footlink" onClick={() => go("/refund")}>Refund</button>
        </span>
      </div>
    </div>
    <style>{`
      .footlink {
        background: transparent; border: 0; color: rgba(255,255,255,.7);
        padding: 0; font-family: inherit; font-size: 14px; text-align: left;
        text-decoration: none;
      }
      .footlink:hover { color: #fff; }
    `}</style>
  </footer>;


// ────────────────────────────────────────────────────────────
// LockedOverlay (for non-enrolled views)
// ────────────────────────────────────────────────────────────
const LockedOverlay = ({ title = "Enrol to unlock", subtitle = "Live classes and recordings are available to enrolled students.", onEnrol }) =>
<div className="locked-overlay">
    <div className="lock-icon"><Icon name="lock" size={22} /></div>
    <div style={{ textAlign: "center", maxWidth: 360 }}>
      <h3 style={{ marginBottom: 8 }}>{title}</h3>
      <p className="muted">{subtitle}</p>
    </div>
    <button className="btn btn-primary" onClick={onEnrol}>Enrol now <Icon name="arrow-right" size={16} /></button>
  </div>;


// ────────────────────────────────────────────────────────────
// PreviewBar — sticky banner across preview & free-chapter pages
// ────────────────────────────────────────────────────────────
const StickyEnrolBar = ({ go }) =>
<div style={{
  position: "sticky", bottom: 0, zIndex: 30,
  background: "var(--ink)", color: "#fff",
  padding: "14px 0"
}}>
    <div className="container row between center" style={{ flexWrap: "wrap", gap: 16 }}>
      <div className="row center gap-12">
        <span style={{ width: 36, height: 36, borderRadius: 8, background: "rgba(255,255,255,.1)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="star" size={16} />
        </span>
        <div>
          <div style={{ fontWeight: 600, fontSize: 15 }}>Enjoying the preview?</div>
          <div style={{ fontSize: 13, color: "rgba(255,255,255,.7)" }}>Unlock all chapters, live classes & weekly notes for ₹1800/month.</div>
        </div>
      </div>
      <button className="btn" style={{ background: "#fff", color: "var(--ink)" }} onClick={() => go("/signup")}>Enrol now <Icon name="arrow-right" size={16} /></button>
    </div>
  </div>;


// ────────────────────────────────────────────────────────────
// Counter (animates from 0 to value on mount)
// ────────────────────────────────────────────────────────────
const Counter = ({ value, suffix = "", duration = 800 }) => {
  const [v, setV] = useState(0);
  useEffect(() => {
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(Math.round(value * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value, duration]);
  return <span>{v.toLocaleString("en-IN")}{suffix}</span>;
};

Object.assign(window, { Icon, Brand, Navbar, Footer, LockedOverlay, StickyEnrolBar, Counter });