// Portal — dashboard product teaser with glass morphism, parallax floating chips, mouse-coupled tilt

function Portal() {
  const ref = React.useRef(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const x = (e.clientX - r.left - r.width/2) / r.width;
    const y = (e.clientY - r.top - r.height/2) / r.height;
    setTilt({ x, y });
  };
  const onLeave = () => setTilt({ x: 0, y: 0 });

  return (
    <section id="portal" className="relative py-40 md:py-56 overflow-hidden" data-screen-label="Portal">
      <div className="absolute inset-0 aurora-bg opacity-40"></div>

      <div className="relative max-w-[1600px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-10 items-end mb-20">
          <div className="col-span-12 md:col-span-7">
            <SecLabel num="07 / 09">The Portal</SecLabel>
            <h2 className="mt-6 font-display font-semibold tracking-tight leading-[0.94]" style={{ fontSize: "clamp(44px, 5.8vw, 104px)" }}>
              A real dashboard.<br/>
              <GradientText>Not a group chat.</GradientText>
            </h2>
            <p className="mt-6 text-[11px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.6)]">— Every creator gets their own dashboard. Built by us, for you.</p>
          </div>
          <div className="col-span-12 md:col-span-4 md:col-start-9">
            <p className="text-[#7a7a7a] font-light leading-relaxed text-[15px]">
              Every message, every post, every dollar — in one place, live. <span className="text-[#f0ece8]">You always know what we're doing and what it's doing for you.</span> This is a real product, not a mockup.
            </p>
          </div>
        </div>

        {/* Product mock — tilts with mouse */}
        <div
          ref={ref}
          onMouseMove={onMove}
          onMouseLeave={onLeave}
          className="relative portal-screen mx-auto max-w-[1280px]"
          style={{
            transform: `perspective(2000px) rotateX(${-tilt.y*6}deg) rotateY(${tilt.x*6}deg)`,
            transition: "transform 0.25s var(--ease)",
          }}
        >
          {/* Top chrome bar */}
          <div className="flex items-center justify-between px-5 h-11 border-b border-white/[0.05] bg-[#0a0a0a]">
            <div className="flex items-center gap-2">
              <span className="w-3 h-3 rounded-full bg-[#2a1e1e]"></span>
              <span className="w-3 h-3 rounded-full bg-[#2a2418]"></span>
              <span className="w-3 h-3 rounded-full bg-[#1e2a1e]"></span>
              <span className="ml-4 text-[10px] tracking-[0.25em] uppercase text-white/25">app.palm-mgmt.com</span>
            </div>
            <div className="text-[10px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.6)]">— Sofia's Portal</div>
          </div>

          {/* Body */}
          <div className="grid grid-cols-12 min-h-[520px]">
            {/* Sidebar — mirrors real creator portal nav */}
            <aside className="col-span-3 border-r border-white/[0.05] p-5 space-y-1 text-[11px] tracking-[0.15em] uppercase">
              {[
                ["Dashboard", true, "🏠"],
                ["My Content", false, "📤"],
                ["Inspo Board", false, "🎬"],
                ["Content Request", false, "📋"],
                ["Long-Form / OFTV", false, "🎥"],
                ["Invoices", false, "💸"],
                ["Music DNA", false, "🎵"],
              ].map(([l, a, ico]) => (
                <div key={l} className={`flex items-center justify-between px-3 py-2.5 rounded ${a ? "bg-white/[0.04] text-[#f0ece8]" : "text-[#7a7a7a] hover:text-[#f0ece8]"} transition-colors duration-300`}>
                  <span className="flex items-center gap-2.5"><span className="text-[12px]">{ico}</span>{l}</span>
                  {a && <span className="w-1 h-1 rounded-full bg-[#E8A0A0]"></span>}
                </div>
              ))}
              <div className="mt-8 pt-5 border-t border-white/[0.05]">
                <div className="flex items-center gap-3">
                  <span className="w-8 h-8 rounded-full avatar-grad"></span>
                  <div>
                    <div className="text-[12px] text-[#f0ece8] normal-case tracking-tight">Sofia R.</div>
                    <div className="text-[9px] text-[#7a7a7a] tracking-[0.2em]">Creator</div>
                  </div>
                </div>
              </div>
            </aside>

            {/* Main */}
            <div className="col-span-9 p-7">
              <div className="flex items-end justify-between mb-6">
                <div>
                  <div className="text-[10px] tracking-[0.3em] uppercase text-[#7a7a7a]">Palm Management Dashboard</div>
                  <div className="font-display text-[22px] font-semibold tracking-tight mt-1">Good morning, Sofia.</div>
                </div>
                <div className="flex items-center gap-2 text-[10px] tracking-[0.25em] uppercase text-[#7a7a7a]">
                  <span className="w-1.5 h-1.5 rounded-full bg-[#8BC48B]"></span>
                  <span>Team active · 4 online</span>
                </div>
              </div>

              {/* Quick actions row — mirrors real ActionCard */}
              <div className="grid grid-cols-3 gap-3 mb-5">
                {[
                  ["Upload Social", "Dropbox", "📱"],
                  ["Long-Form", "OFTV / YouTube", "🎬"],
                  ["OF Vault", "Premium content", "🔐"],
                ].map(([l,sub,ico], i) => (
                  <div key={l} className="border border-white/[0.05] p-4 rounded-[6px] hover:border-[rgba(232,160,160,0.25)] transition-colors duration-500 flex items-center gap-3">
                    <span className="text-[20px]">{ico}</span>
                    <div>
                      <div className="text-[12px] text-[#f0ece8] tracking-tight font-medium">{l}</div>
                      <div className="text-[9px] tracking-[0.15em] uppercase text-[#7a7a7a]">{sub}</div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Inspo strip + Invoice card */}
              <div className="grid grid-cols-12 gap-3 mb-5">
                <div className="col-span-8 border border-white/[0.05] p-4 rounded-[6px]">
                  <div className="flex items-center justify-between mb-3">
                    <div className="text-[10px] tracking-[0.3em] uppercase text-[#7a7a7a]">Browse Inspo · 12 new this week</div>
                    <span className="text-[9px] tracking-[0.2em] uppercase text-[#E8A0A0]">View board →</span>
                  </div>
                  <div className="grid grid-cols-4 gap-2">
                    {[
                      "assets/services/inspo-pool.jpg",
                      "assets/services/inspo-mirror.jpg",
                      "assets/services/inspo-car.jpg",
                      "assets/services/inspo-gym.jpg",
                    ].map((src, i) => (
                      <div key={i} className="aspect-[4/5] rounded overflow-hidden border border-white/[0.04] relative">
                        <img src={src} alt="" className="absolute inset-0 w-full h-full object-cover" />
                        {i === 0 && (
                          <span className="absolute top-1.5 left-1.5 text-[7px] tracking-[0.15em] uppercase px-1.5 py-0.5 rounded font-bold" style={{ background: "rgba(232,160,160,0.95)", color: "#1a0a0a" }}>New</span>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
                <div className="col-span-4 border border-white/[0.05] p-4 rounded-[6px]">
                  <div className="text-[10px] tracking-[0.3em] uppercase text-[#7a7a7a] mb-3">Latest Invoice</div>
                  <div className="font-display text-[24px] font-semibold tracking-tight text-[#f0ece8]">$4,287.40</div>
                  <div className="text-[10px] text-[#7a7a7a] font-light mt-1">Apr 7 — Apr 20</div>
                  <div className="mt-3 flex items-center gap-2 text-[9px] tracking-[0.2em] uppercase">
                    <span className="w-1.5 h-1.5 rounded-full bg-[#8BC48B]"></span>
                    <span className="text-[#8BC48B]">Paid · Friday</span>
                  </div>
                  <div className="mt-3 pt-3 border-t border-white/[0.04] text-[9px] tracking-[0.2em] uppercase text-[#7a7a7a]">
                    Next: Apr 28 · est. $4.6K
                  </div>
                </div>
              </div>

              {/* Follower growth mini-chart */}
              <div className="border border-white/[0.05] p-4 rounded-[6px]">
                <div className="flex items-center justify-between mb-3">
                  <div className="text-[10px] tracking-[0.3em] uppercase text-[#7a7a7a]">Follower Growth · 30 days</div>
                  <div className="flex items-center gap-2 text-[10px]">
                    <span className="text-[#E8A0A0] font-medium">184.2K</span>
                    <span className="text-[#8BC48B]">+12.4K</span>
                  </div>
                </div>
                <svg viewBox="0 0 400 80" className="w-full h-[80px]">
                  <defs>
                    <linearGradient id="fg" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#E8A0A0" stopOpacity="0.4"/>
                      <stop offset="100%" stopColor="#E8A0A0" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  <path d="M 0 60 L 20 58 L 40 56 L 60 54 L 80 50 L 100 48 L 120 44 L 140 42 L 160 38 L 180 36 L 200 32 L 220 30 L 240 26 L 260 24 L 280 20 L 300 18 L 320 14 L 340 12 L 360 10 L 380 8 L 400 6 L 400 80 L 0 80 Z" fill="url(#fg)"/>
                  <path d="M 0 60 L 20 58 L 40 56 L 60 54 L 80 50 L 100 48 L 120 44 L 140 42 L 160 38 L 180 36 L 200 32 L 220 30 L 240 26 L 260 24 L 280 20 L 300 18 L 320 14 L 340 12 L 360 10 L 380 8 L 400 6" fill="none" stroke="#E8A0A0" strokeWidth="1.5"/>
                </svg>
              </div>
            </div>
          </div>

          {/* Floating chips — surface real portal events */}
          <div className="absolute -left-6 top-32 w-[220px] glass-card rounded-lg p-4 hidden md:block" style={{ transform: `translate(${tilt.x*-14}px, ${tilt.y*-14}px)`, transition: "transform 0.3s var(--ease)" }}>
            <div className="text-[9px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.7)] mb-2">OFTV cut ready</div>
            <div className="text-[12px] text-[#f0ece8] leading-snug">"Pool day vlog" · 0:42<br/><span className="text-[#7a7a7a] font-light">Editor delivered · 8 min ago</span></div>
            <div className="mt-3 flex gap-2">
              <span className="text-[9px] tracking-[0.2em] uppercase text-[#E8A0A0]">Review →</span>
            </div>
          </div>

          <div className="absolute -right-8 top-52 w-[200px] glass-card rounded-lg p-4 hidden md:block" style={{ transform: `translate(${tilt.x*16}px, ${tilt.y*16}px)`, transition: "transform 0.3s var(--ease)" }}>
            <div className="text-[9px] tracking-[0.3em] uppercase text-white/40 mb-2">Inspo Board</div>
            <div className="text-[12px] text-[#f0ece8] leading-snug">12 fresh refs this week<br/><span className="text-[#7a7a7a] font-light">Curated for your niche</span></div>
          </div>

          <div className="absolute -right-4 bottom-20 w-[240px] glass-card rounded-lg p-4 hidden md:block" style={{ transform: `translate(${tilt.x*20}px, ${tilt.y*-10}px)`, transition: "transform 0.3s var(--ease)" }}>
            <div className="text-[9px] tracking-[0.3em] uppercase text-white/40 mb-2">Invoice ready</div>
            <div className="font-display text-[22px] font-semibold tracking-tight text-[#f0ece8]">$4,287.40</div>
            <div className="text-[10px] text-[#7a7a7a] font-light mt-1">Friday · direct deposit</div>
          </div>
        </div>

      </div>
    </section>
  );
}

window.Portal = Portal;