// showcase.jsx — page layout: sticky project sidebar · realistic iPhone · sticky designer sidebar
// Depends on globals from portfolio-app.jsx (App, THEME) and lucide-react UMD (LucideReact).

const { useState: usePageState, useEffect: usePageEffect, useRef: usePageRef } = React;
const {
  Sparkles: SparkIcon, Coins, ArrowRightLeft: SwapIcon, RotateCcw, Database,
  PieChart: PieIcon, ArrowLeftRight: TxIcon,
} = LucideReact;
// MessageSquareText non esiste in lucide-react@0.263.1 — fallback a icone presenti
const ChatIcon = LucideReact.MessageSquareText || LucideReact.MessageSquare || LucideReact.MessageCircle;
const CloseIcon = LucideReact.X;
const ChevronRightIcon = LucideReact.ChevronRight;
const RouteIcon = LucideReact.ListChecks || LucideReact.Map || LucideReact.Milestone || SparkIcon;
const InfoIcon = LucideReact.Info || LucideReact.HelpCircle || LucideReact.ChevronRight;
const BookIcon = LucideReact.BookOpen || LucideReact.FileText || RouteIcon;

/* ── Realistic iPhone body — titanium rail, physical buttons, glass reflection ── */
function RealisticIPhone({ children }) {
  const btn = (side, top, h) => ({
    position: "absolute", [side]: -3, top, width: 3.5, height: h, borderRadius: 2, zIndex: 0,
    background: "linear-gradient(180deg,#2b2c30 0%,#5a5c62 25%,#6a6c72 50%,#4a4c52 75%,#1f2023 100%)",
    boxShadow: side === "left" ? "-1px 0 1px rgba(0,0,0,0.5)" : "1px 0 1px rgba(0,0,0,0.5)",
  });
  const band = (p) => ({ position: "absolute", width: 4.5, height: 9, borderRadius: 2.5, background: "rgba(190,196,206,0.30)", zIndex: 2, ...p });
  return (
    <div style={{ position: "relative", flexShrink: 0, filter: "drop-shadow(0 45px 55px rgba(0,0,0,0.42)) drop-shadow(0 12px 22px rgba(0,0,0,0.30))" }}>
      {/* physical buttons */}
      <div style={btn("left", 152, 26)}></div>
      <div style={btn("left", 208, 50)}></div>
      <div style={btn("left", 268, 50)}></div>
      <div style={btn("right", 222, 76)}></div>
      {/* titanium rail */}
      <div style={{
        position: "relative", zIndex: 1, borderRadius: 62, padding: 4,
        background: "linear-gradient(160deg,#4a4b50 0%,#191a1d 16%,#5e6066 36%,#26272b 54%,#73757b 76%,#1b1c1f 92%,#3c3d42 100%)",
        boxShadow: "inset 0 0 1.5px rgba(255,255,255,0.55), inset 0 0 6px rgba(0,0,0,0.4)",
      }}>
        {/* antenna bands */}
        <div style={band({ top: 88, left: 0 })}></div>
        <div style={band({ top: 88, right: 0 })}></div>
        <div style={band({ bottom: 88, left: 0 })}></div>
        <div style={band({ bottom: 88, right: 0 })}></div>
        {/* black glass front */}
        <div style={{ position: "relative", borderRadius: 58, padding: 11, background: "#010103", boxShadow: "inset 0 0 3px rgba(255,255,255,0.07)" }}>
          <div style={{ width: 372, height: 780, borderRadius: 47, overflow: "hidden", position: "relative", background: "#000" }}>
            {children}
          </div>
          {/* glass reflection */}
          <div style={{
            position: "absolute", inset: 0, borderRadius: 58, pointerEvents: "none", zIndex: 90,
            background: "linear-gradient(118deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.028) 20%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 84%, rgba(255,255,255,0.035) 100%)",
          }}></div>
        </div>
      </div>
    </div>
  );
}

/* ── Shared sidebar bits ── */
function StickyAside({ label, side, C, theme, children }) {
  const bg = side === "right" ? (theme === "dark" ? "#121314" : "#FAFAFA") : C.sideL; // background distinto: prodotto vs designer
  const borderSide = side === "left" ? { borderRight: `1px solid ${C.line}` } : { borderLeft: `1px solid ${C.line}` };
  return (
    <aside className="noscroll" data-screen-label={label} style={{ position: "sticky", top: 0, height: "100vh", overflowY: "auto", width: 372, flexShrink: 0, background: bg, padding: "44px 36px 40px", boxSizing: "border-box", ...borderSide }}>
      {children}
    </aside>
  );
}
function AsideLabel({ C, children }) {
  return <div style={{ color: C.faint, letterSpacing: "0.14em" }} className="text-xs font-semibold uppercase mb-3">{children}</div>;
}

/* ── Left: the project ── */
function ProjectAside({ C, theme, onOpenNext }) {
  const chipBg = theme === "dark" ? C.panel2 : "#F4F5F6";
  const feats = [
    [SparkIcon, "Natural-language entry", "Write what you bought in plain words and it is logged in one line."],
    [ChatIcon, "Daily AI read", "A one-sentence read of your portfolio, whenever you ask."],
    [Coins, "160+ instruments", "ETFs, stocks and crypto across six currencies."],
    [SwapIcon, "Multi-currency", "Tap the pill to flip EUR to USD. Long-press to change the pair."],
  ];
  return (
    <div>
      <div className="flex items-center gap-3 mb-7">
        <div style={{ background: C.accent, color: "#FFFFFF", width: 38, height: 38, borderRadius: 11 }} className="flex items-center justify-center font-bold text-lg">P</div>
        <div>
          <div className="font-semibold leading-tight" style={{ color: C.ink }}>Portfolio Tracker</div>
          <div style={{ color: C.mute }} className="text-xs">iOS app · concept</div>
        </div>
      </div>
      <h2 style={{ color: C.ink, letterSpacing: "-0.02em", lineHeight: 1.08 }} className="text-3xl font-bold mb-4">Track every asset.<br></br>In your words.</h2>
      <p style={{ color: C.mute, textWrap: "pretty" }} className="text-sm leading-relaxed mb-8">One place for ETFs, stocks and crypto in any currency, with a tracker that understands plain language instead of forms.</p>
      <AsideLabel C={C}>Why another tracker?</AsideLabel>
      <p style={{ color: C.mute, textWrap: "pretty" }} className="text-sm leading-relaxed mb-8">Because it should be a simple act of control. We check it daily, even when we shouldn't, so it has to happen without noise.</p>
      <AsideLabel C={C}>Highlights</AsideLabel>
      <div className="flex flex-col gap-1 mb-8">
        {feats.map(([Icon, t, d]) => (
          <div key={t} className="pt-hl" style={{ position: "relative" }} tabIndex={0}>
            <div className="flex items-center gap-2.5" style={{ padding: "7px 0", cursor: "help" }}>
              <span style={{ background: chipBg, border: `1px solid ${C.line}`, color: C.accentInk, width: 30, height: 30, borderRadius: 9 }} className="flex items-center justify-center shrink-0"><Icon size={15}></Icon></span>
              <span className="text-sm font-semibold flex-1 min-w-0" style={{ color: C.ink }}>{t}</span>
              <InfoIcon size={13} style={{ color: C.faint }} className="shrink-0"></InfoIcon>
            </div>
            <div className="pt-tip" style={{ background: C.panel2, border: `1px solid ${C.line}`, color: C.mute, borderRadius: 10, padding: "9px 11px", fontSize: 12, lineHeight: 1.45 }}>{d}</div>
          </div>
        ))}
      </div>
      <AsideLabel C={C}>The full picture</AsideLabel>
      <button onClick={onOpenNext} style={{ background: chipBg, border: `1px solid ${C.line}`, borderRadius: 12 }} className="w-full flex items-center justify-between gap-3 px-3.5 py-3 text-left active:scale-[0.99] transition-transform">
        <span className="flex items-center gap-3 min-w-0">
          <span style={{ background: C.accent, color: "#FFFFFF", width: 34, height: 34, borderRadius: 10 }} className="flex items-center justify-center shrink-0"><BookIcon size={16}></BookIcon></span>
          <span className="min-w-0">
            <span className="text-sm font-semibold block" style={{ color: C.ink }}>See why it's built this way</span>
            <span style={{ color: C.mute }} className="text-xs block">Vision, privacy &amp; what's next</span>
          </span>
        </span>
        <ChevronRightIcon size={18} style={{ color: C.faint }} className="shrink-0"></ChevronRightIcon>
      </button>
    </div>
  );
}

/* ── Right: the designer — francescovilla.design ── */
function DesignerAside({ C }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%" }}>
      <div>
        <div className="flex items-center gap-3 mb-5">
          <img src="https://framerusercontent.com/images/E4PRNBKSSH8u1Y48t32ubpVDWNE.jpg?width=300" alt="Francesco Villa" style={{ width: 54, height: 54, borderRadius: 27, objectFit: "cover", border: `1px solid ${C.line}` }}></img>
          <div>
            <div className="font-semibold leading-tight" style={{ color: C.ink }}>Francesco Villa</div>
            <div style={{ color: C.mute }} className="text-xs">Senior Product Designer</div>
          </div>
        </div>
        <p style={{ color: C.mute, textWrap: "pretty" }} className="text-sm leading-relaxed">Helping startups and tech companies build products from 0 → 1. 10+ years across Web3, AI, fintech and SaaS.</p>
        <div style={{ borderTop: `1px solid ${C.line}` }} className="mt-7 pt-6">
          <AsideLabel C={C}>How this went live</AsideLabel>
          <div className="flex flex-col gap-4">
            {[
              ["1", "Design → Me", "Strategy, vision, architecture. Tokens, interaction model and copy defined before a single line of code."],
              ["2", "Built by Claude Code", "AI pair-build: React + Recharts, iOS-style scrubbing, session-only state. I direct, review and refine every iteration."],
              ["3", "GitHub", "The repo is the single source of truth — every change ships as a commit to main, nothing edited by hand in production."],
              ["4", "Railway", "CI/CD on push, custom domain and managed TLS. DNS via ALIAS/CNAME on the apex and www."],
              ["5", "Live", "The site is online — and it's a loop, not a launch: every change designed with Claude is pushed and live in seconds."],
            ].map(([n, t, d]) => (
              <div key={n} className="flex gap-3">
                <span style={{ color: C.accentInk, width: 18, flexShrink: 0 }} className="text-xs font-semibold pt-0.5 text-right">{n}</span>
                <div>
                  <div className="text-sm font-semibold" style={{ color: C.ink }}>{t}</div>
                  <div style={{ color: C.mute, textWrap: "pretty" }} className="text-xs leading-relaxed">{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ borderTop: `1px solid ${C.line}`, color: C.faint }} className="text-xs pt-4 mt-6 leading-relaxed">2026 — Francesco Villa<br></br>Built by Claude · Designed by me</div>
    </div>
  );
}

/* ── Second left panel: the roadmap ── */
function WhatsNextAside({ C, onClose }) {
  const steps = [
    ["Multi-currency products", "Buy BTC in EUR or CHF — not only USD. Edit the trading currency per instrument."],
    ["UI fixes", "Polish spacing, states and edge cases across every screen."],
    ["Core sections & features", "Improve the main sections and expand what each one can do."],
    ["Native iOS", "Ship a native iOS build and go live on the App Store."],
    ["Premium", "Introduce a premium tier with advanced capabilities."],
    ["Insights", "Add a dedicated Insights section for trends and breakdowns."],
  ];
  return (
    <div>
      <div className="flex items-start justify-between mb-5">
        <AsideLabel C={C}>What's Next</AsideLabel>
        <button onClick={onClose} aria-label="Close" style={{ background: C.panel2, border: `1px solid ${C.line}`, color: C.mute, width: 30, height: 30, borderRadius: 15 }} className="flex items-center justify-center shrink-0 -mt-1.5"><CloseIcon size={16}></CloseIcon></button>
      </div>
      <h2 style={{ color: C.ink, letterSpacing: "-0.02em", lineHeight: 1.1 }} className="text-2xl font-bold mb-3">The roadmap</h2>
      <p style={{ color: C.mute, textWrap: "pretty" }} className="text-sm leading-relaxed mb-7">Where Portfolio Tracker goes from here — shipped in order, designed then built with Claude.</p>
      <div className="flex flex-col gap-4">
        {steps.map(([t, d], i) => (
          <div key={t} className="flex gap-3">
            <span style={{ background: C.panel2, border: `1px solid ${C.line}`, color: C.accentInk, width: 30, height: 30, borderRadius: 9 }} className="flex items-center justify-center shrink-0 text-xs font-semibold font-mono">{i + 1}</span>
            <div>
              <div className="text-sm font-semibold" style={{ color: C.ink }}>{t}</div>
              <div style={{ color: C.mute, textWrap: "pretty" }} className="text-xs leading-relaxed">{d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── Left-of-mockup rail: switch between the 4 UI versions ── */
function VariantRail({ C, value, onChange }) {
  const opts = [
    ["draft", "v0.1", "#2F6BED"],
    ["editorial", "Editorial", "#136F63"],
    ["wsb", "WSB", "#2DE07A"],
    ["data", "Data", "#E8A33D"],
  ];
  return (
    <div data-screen-label="UI versions" className="flex flex-col gap-2" style={{ width: 124, flexShrink: 0 }}>
      <div style={{ color: C.faint, letterSpacing: "0.14em" }} className="text-xs font-semibold uppercase mb-1 px-1">Version</div>
      {opts.map(([id, label, swatch]) => {
        const on = value === id;
        return (
          <button key={id} onClick={() => onChange(id)}
            style={{ background: on ? C.ink : C.panel, color: on ? C.page : C.ink, border: `1px solid ${on ? C.ink : C.line}`, borderRadius: 11 }}
            className="flex items-center gap-2.5 text-left text-sm font-semibold px-3 py-2.5">
            <span style={{ width: 9, height: 9, borderRadius: 5, background: swatch, flexShrink: 0, boxShadow: on ? `0 0 0 2px ${C.page}` : "none" }}></span>
            {label}
          </button>
        );
      })}
    </div>
  );
}

/* ── Page ── */
function Showcase() {
  const [theme, setTheme] = usePageState("light");
  const [variant, setVariant] = usePageState("draft");
  const [nextOpen, setNextOpen] = usePageState(false);
  const [wide, setWide] = usePageState(typeof window !== "undefined" ? window.innerWidth > 1240 : true);
  usePageEffect(() => {
    const on = () => setWide(window.innerWidth > 1240);
    window.addEventListener("resize", on);
    return () => window.removeEventListener("resize", on);
  }, []);
  const C = THEME[theme];
  const StoryModal = (typeof window !== "undefined") ? window.ProjectStoryModal : null;
  const dataApi = usePageRef(null);
  const dataBtn = { background: theme === "dark" ? C.panel : "#FFFFFF", border: `1px solid ${C.line}`, color: C.mute, borderRadius: 999 };
  return (
    <div style={{ background: C.page, minHeight: "100vh", fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif" }} className="flex items-start">
      {wide && <StickyAside side="left" C={C} theme={theme} label="Sidebar sinistra — il progetto"><ProjectAside C={C} theme={theme} onOpenNext={() => setNextOpen(true)}></ProjectAside></StickyAside>}
      {nextOpen && StoryModal && <StoryModal C={C} theme={theme} onClose={() => setNextOpen(false)}></StoryModal>}
      <style>{`@keyframes storyFade{from{opacity:0}to{opacity:1}}@keyframes storyPop{from{transform:translateY(12px) scale(.99);opacity:0}to{transform:none;opacity:1}}.pt-hl .pt-tip{position:absolute;left:40px;right:0;top:100%;margin-top:1px;z-index:30;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .14s ease, transform .14s ease;box-shadow:0 12px 26px rgba(0,0,0,.16)}.pt-hl:hover .pt-tip,.pt-hl:focus-within .pt-tip{opacity:1;transform:none}.pt-hl:focus{outline:none}`}</style>
      <div data-screen-label="Mockup iPhone" className="flex-1 flex flex-col items-center" style={{ padding: "52px 24px 56px", minWidth: 0 }}>
        <div style={{ position: "relative" }}>
          <RealisticIPhone><App theme={theme} setTheme={setTheme} dataApi={dataApi} variant={variant} setVariant={setVariant}></App></RealisticIPhone>
        </div>
        <div className="flex items-center gap-2.5 mt-8">
          <button onClick={() => dataApi.current && dataApi.current.reset()} style={dataBtn} className="flex items-center gap-2 text-sm font-medium px-4 py-2"><RotateCcw size={15}></RotateCcw>Start empty</button>
          <button onClick={() => dataApi.current && dataApi.current.demo()} style={dataBtn} className="flex items-center gap-2 text-sm font-medium px-4 py-2"><Database size={15}></Database>Load demo data</button>
        </div>
        <div style={{ color: C.faint }} className="text-xs mt-3 text-center">Nothing is saved — your data lives only in this browser session.</div>
      </div>
      {wide && <StickyAside side="right" C={C} theme={theme} label="Sidebar destra — Francesco Villa"><DesignerAside C={C}></DesignerAside></StickyAside>}
    </div>
  );
}

/* ── Native (app-only) shell — used when running inside the iOS WKWebView wrapper.
   Renders just the App full-screen, with no marketing chrome or phone bezel. ── */
function NativeApp() {
  const [theme, setTheme] = usePageState("light");
  const [variant, setVariant] = usePageState("draft");
  const dataApi = usePageRef(null);
  return (
    <div style={{ position: "fixed", inset: 0, background: "#000", overflow: "hidden" }}>
      <App theme={theme} setTheme={setTheme} dataApi={dataApi} variant={variant} setVariant={setVariant} native={true}></App>
    </div>
  );
}

const __rootEl = document.getElementById("root");
if (typeof window !== "undefined" && window.PT_NATIVE) {
  ReactDOM.createRoot(__rootEl).render(<NativeApp></NativeApp>);
} else {
  ReactDOM.createRoot(__rootEl).render(<Showcase></Showcase>);
}