/* global React, I, S */
/* Pamp — Landing portal */

const { Btn, Avatar, Chip } = window.S;

function Landing({ onPortal, onTheme, theme }) {
  const [branding, setBranding] = React.useState(null);
  React.useEffect(() => {
    let alive = true;
    window.PampData.fetchWorkspaceBranding().then((b) => {
      if (alive && b) setBranding(b);
    });
    return () => { alive = false; };
  }, []);

  return (
    <div className="landing page-enter">
      <header className="landing-header">
        {branding?.logoUrl
          ? <a href="#/" className="row-tight" aria-label="Pamp home">
              <img src={branding.logoUrl} alt="" style={{ width: 28, height: 28, borderRadius: 8, objectFit: "cover" }} />
              <span className="brand-text">{branding.agencyName || "pamp"}</span>
            </a>
          : <S.Brand />}
        <div className="row" style={{ gap: 8 }}>
          <S.IconBtn onClick={onTheme} title="Theme">
            {theme === "dark" ? <I.sun size={18} /> : <I.moon size={18} />}
          </S.IconBtn>
        </div>
      </header>

      <section className="landing-hero" style={{ textAlign: "center", padding: "72px 48px 36px" }}>
        <h1 className="landing-h1" style={{ margin: 0 }}>
          The Future of <em>Pampering.</em>
        </h1>
      </section>

      <section className="portal-grid">
        <PortalCard
          num="01"
          role="Admin portal"
          title="Operations console"
          desc="Manage the entire platform — users, vendors, payments, subscriptions, analytics, support."
          cta="Enter admin"
          tone="ink"
          onClick={() => onPortal("admin")}
          scene={<AdminScene />}
        />
        <PortalCard
          num="02"
          role="Client portal"
          title={<>Book &amp; manage</>}
          desc="Discover vendors near you. Book treatments. Keep your appointments, history, and wallet in one calm view."
          cta="Open my account"
          tone="accent"
          onClick={() => onPortal("user")}
          scene={<UserScene />}
        />
        <PortalCard
          num="03"
          role="Vendor portal"
          title="Run the business"
          desc="Calendar, services, staff, payouts, customer relationships. Built for the front desk and the back office."
          cta="Open the studio"
          tone="surface"
          onClick={() => onPortal("vendor")}
          scene={<VendorScene />}
        />
      </section>

      <footer style={{ borderTop: "1px solid var(--border)", padding: "24px 48px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="row-tight muted tiny">
          <S.Brand /> · v4.2.0 · 2026
        </div>
        <div className="row muted tiny" style={{ gap: 20 }}>
          <span>Status · operational</span>
          <span>Changelog</span>
          <span>Privacy</span>
          <span>Terms</span>
        </div>
      </footer>
    </div>
  );
}

function PortalCard({ num, role, title, desc, cta, onClick, scene, tone }) {
  // tone: 'ink' (dark cinematic), 'accent' (mint), 'surface' (clean light)
  const cover = tone === "ink" ? {
    bg: "var(--ink)", color: "white",
  } : tone === "accent" ? {
    bg: "var(--accent)", color: "oklch(20% 0.10 145)",
  } : {
    bg: "var(--bg-deep)", color: "var(--ink)",
  };
  return (
    <button className="portal-card" onClick={onClick}>
      <div className="pc-cover" style={{ background: cover.bg, color: cover.color }}>
        <div className="pc-cover-tag">
          <span className="pc-cover-tag-num" style={{ background: tone === "surface" ? "oklch(0% 0 0 / 0.06)" : "oklch(100% 0 0 / 0.14)" }}>{num}</span>
          <span className="pc-cover-tag-role">{role}</span>
        </div>
        <div className="pc-cover-corner" style={{ color: cover.color, background: tone === "surface" ? "oklch(0% 0 0 / 0.06)" : "oklch(100% 0 0 / 0.14)" }}>
          <I.arrowUR size={16} />
        </div>
        <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>{scene}</div>
      </div>
      <div className="pc-body">
        <h2 className="pc-title">{title}</h2>
        <p className="pc-desc">{desc}</p>
        <div className="pc-cta">
          <span className="pc-cta-text">{cta}</span>
          <span className="pc-cta-icon"><I.arrowR size={18} /></span>
        </div>
      </div>
    </button>
  );
}

/* mini scenes */
function AdminScene() {
  return (
    <svg viewBox="0 0 420 280" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
      <defs>
        <linearGradient id="ag1" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#86D694" stopOpacity="0.5" />
          <stop offset="100%" stopColor="#86D694" stopOpacity="0" />
        </linearGradient>
        <radialGradient id="ag2" cx="75%" cy="35%" r="45%">
          <stop offset="0%" stopColor="#86D694" stopOpacity="0.30" />
          <stop offset="100%" stopColor="#86D694" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="420" height="280" fill="url(#ag2)" />
      {/* metric cards floating */}
      <g transform="translate(60, 96)">
        <rect width="96" height="64" rx="12" fill="oklch(100% 0 0 / 0.10)" stroke="oklch(100% 0 0 / 0.14)" />
        <text x="12" y="22" fill="oklch(100% 0 0 / 0.55)" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="1">USERS</text>
        <text x="12" y="44" fill="white" fontSize="18" fontFamily="Bricolage Grotesque" fontWeight="500">28.4k</text>
        <text x="12" y="58" fill="#86D694" fontSize="9" fontFamily="JetBrains Mono">+8.4%</text>
      </g>
      <g transform="translate(166, 76)">
        <rect width="108" height="64" rx="12" fill="oklch(100% 0 0 / 0.16)" stroke="oklch(100% 0 0 / 0.18)" />
        <text x="12" y="22" fill="oklch(100% 0 0 / 0.55)" fontSize="9" fontFamily="JetBrains Mono" letterSpacing="1">REVENUE</text>
        <text x="12" y="44" fill="white" fontSize="18" fontFamily="Bricolage Grotesque" fontWeight="500">$1.42M</text>
        <text x="12" y="58" fill="#86D694" fontSize="9" fontFamily="JetBrains Mono">+24.4%</text>
      </g>
      <g transform="translate(286, 110)">
        <rect width="80" height="54" rx="12" fill="oklch(100% 0 0 / 0.10)" stroke="oklch(100% 0 0 / 0.14)" />
        <circle cx="40" cy="27" r="16" fill="none" stroke="oklch(100% 0 0 / 0.20)" strokeWidth="4" />
        <circle cx="40" cy="27" r="16" fill="none" stroke="#86D694" strokeWidth="4" strokeDasharray="68 100" transform="rotate(-90 40 27)" strokeLinecap="round" />
      </g>
      {/* chart line */}
      <path d="M 30 220 L 70 200 L 110 208 L 150 174 L 200 180 L 240 156 L 290 168 L 340 138 L 390 122"
        fill="none" stroke="#86D694" strokeWidth="2" strokeLinecap="round" />
      <path d="M 30 220 L 70 200 L 110 208 L 150 174 L 200 180 L 240 156 L 290 168 L 340 138 L 390 122 L 390 260 L 30 260 Z"
        fill="url(#ag1)" />
      {/* dotted gridline */}
      <line x1="30" y1="232" x2="390" y2="232" stroke="oklch(100% 0 0 / 0.06)" strokeDasharray="2 6" />
    </svg>
  );
}
function UserScene() {
  return (
    <svg viewBox="0 0 420 280" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
      {/* appointment card */}
      <g transform="translate(48, 76)">
        <rect width="324" height="86" rx="18" fill="oklch(100% 0 0 / 0.45)" stroke="oklch(20% 0.10 145 / 0.18)" />
        <circle cx="34" cy="43" r="22" fill="oklch(20% 0.10 145)" />
        <text x="34" y="49" textAnchor="middle" fontFamily="Bricolage Grotesque" fontSize="18" fontWeight="600" fill="#86D694">M</text>
        <text x="72" y="34" fontFamily="Inter" fontSize="13" fontWeight="600" fill="oklch(18% 0.10 145)">Maison Color &amp; Co.</text>
        <text x="72" y="52" fontFamily="Inter" fontSize="11" fill="oklch(28% 0.06 145)">Full color · 90 min</text>
        <g transform="translate(72, 60)">
          <rect width="58" height="18" rx="9" fill="oklch(20% 0.10 145)" />
          <text x="29" y="12" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#86D694" fontWeight="500">2:30 PM</text>
        </g>
        <rect x="282" y="33" width="28" height="22" rx="11" fill="oklch(20% 0.10 145)" />
        <path d="M 290 44 L 302 44 M 297 39 L 302 44 L 297 49" stroke="#86D694" strokeWidth="1.5" strokeLinecap="round" />
      </g>
      {/* mini stat strips */}
      <g transform="translate(48, 180)">
        <rect width="100" height="56" rx="14" fill="oklch(100% 0 0 / 0.30)" />
        <text x="14" y="22" fontFamily="JetBrains Mono" fontSize="9" fill="oklch(28% 0.06 145)">WALLET</text>
        <text x="14" y="42" fontFamily="Bricolage Grotesque" fontSize="18" fontWeight="500" fill="oklch(18% 0.10 145)">$248</text>
      </g>
      <g transform="translate(160, 180)">
        <rect width="100" height="56" rx="14" fill="oklch(100% 0 0 / 0.30)" />
        <text x="14" y="22" fontFamily="JetBrains Mono" fontSize="9" fill="oklch(28% 0.06 145)">SAVED</text>
        <text x="14" y="42" fontFamily="Bricolage Grotesque" fontSize="18" fontWeight="500" fill="oklch(18% 0.10 145)">14</text>
      </g>
      <g transform="translate(272, 180)">
        <rect width="100" height="56" rx="14" fill="oklch(100% 0 0 / 0.30)" />
        <text x="14" y="22" fontFamily="JetBrains Mono" fontSize="9" fill="oklch(28% 0.06 145)">TIER</text>
        <text x="14" y="42" fontFamily="Bricolage Grotesque" fontSize="18" fontWeight="500" fill="oklch(18% 0.10 145)">Gold</text>
      </g>
    </svg>
  );
}
function VendorScene() {
  const days = ["M", "T", "W", "T", "F", "S", "S"];
  const heights = [38, 56, 80, 48, 110, 64, 22];
  return (
    <svg viewBox="0 0 420 280" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
      <defs>
        <radialGradient id="vs1" cx="50%" cy="50%" r="60%">
          <stop offset="0%" stopColor="#86D694" stopOpacity="0.18" />
          <stop offset="100%" stopColor="#86D694" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="420" height="280" fill="url(#vs1)" />
      {/* bars */}
      <g transform="translate(54, 70)">
        {heights.map((h, i) => (
          <g key={i} transform={`translate(${i * 46}, 0)`}>
            <rect width="32" height="140" rx="10" y={140 - h - 30} fill="var(--ink)" opacity="0.06" />
            <rect width="32" height={h} y={140 - h} rx="10" fill={i === 4 ? "#86D694" : "var(--ink)"} opacity={i === 4 ? 1 : 0.88} />
            <text x="16" y="158" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono" fill="var(--ink-3)">{days[i]}</text>
          </g>
        ))}
      </g>
      {/* tooltip on Fri */}
      <g transform="translate(218, 110)">
        <rect width="86" height="42" rx="10" fill="var(--ink)" />
        <text x="12" y="18" fontFamily="JetBrains Mono" fontSize="8" fill="oklch(75% 0.02 145)" letterSpacing="1">FRI</text>
        <text x="12" y="34" fontFamily="Bricolage Grotesque" fontSize="14" fontWeight="500" fill="#86D694">$1,840</text>
      </g>
      {/* payout pill */}
      <g transform="translate(48, 240)">
        <rect width="324" height="28" rx="14" fill="oklch(100% 0 0 / 0.50)" stroke="var(--border)" />
        <circle cx="18" cy="14" r="7" fill="#86D694" />
        <text x="34" y="18" fontFamily="JetBrains Mono" fontSize="9" fill="var(--ink-3)">PAYOUT · TUE</text>
        <text x="160" y="18" fontFamily="Bricolage Grotesque" fontSize="12" fontWeight="500" fill="var(--ink)">$4,820 net</text>
        <text x="308" y="18" textAnchor="end" fontFamily="Inter" fontSize="10" fontWeight="600" fill="#2d8c66">+18%</text>
      </g>
    </svg>
  );
}

window.Landing = Landing;