/* global React, Common, DimmyTray */
const { Eyebrow, SectionTitle, SectionLead } = Common;

// TODO(content): replace with the real 13 styles from the app.
// Group/color is a guess; adjust as needed.
const ALL_STYLES = [
  // Group 1: neutral / minimal
  { name: "Off",          desc: "raw transcript, zero edits",          color: "#94A3B8", group: "raw" },
  { name: "Correct",      desc: "fix grammar, keep your voice",         color: "#4ADE80", group: "raw" },
  { name: "Clean",        desc: "remove fillers (uhm, like, sai…)",     color: "#7DD3FC", group: "raw" },

  // Group 2: reshape
  { name: "Elaborate",    desc: "expand bullets into prose",            color: "#86EFAC", group: "shape" },
  { name: "Summarize",    desc: "long ramble → 3 sentences",            color: "#FACC15", group: "shape" },
  { name: "Bullets",      desc: "structure thoughts as a list",         color: "#A78BFA", group: "shape" },
  { name: "Outline",      desc: "headings + sub-points",                color: "#C084FC", group: "shape" },

  // Group 3: tone
  { name: "Professional", desc: "polish for the boss",                  color: "#F472B6", group: "tone" },
  { name: "Friendly",     desc: "warm, conversational",                 color: "#FB923C", group: "tone" },
  { name: "Concise",      desc: "tighten everything by 40%",            color: "#38BDF8", group: "tone" },

  // Group 4: pro
  { name: "Email",        desc: "subject + greeting + sign-off",        color: "#60A5FA", group: "pro" },
  { name: "Commit msg",   desc: "imperative, ≤72 chars",                color: "#22D3EE", group: "pro" },
  { name: "Code comment", desc: "doc-style, /** … */",                  color: "#34D399", group: "pro" },
];

// Live tray menu: the real React component (from Video.jsx),
// floating with a soft brand glow behind it.
function TrayMenuLive() {
  const { WinTrayMenu } = (typeof DimmyTray !== "undefined" ? DimmyTray : window.DimmyTray) || {};
  const [activeStyle, setActiveStyle] = React.useState("correct");
  const [activeLang, setActiveLang] = React.useState("it");
  if (!WinTrayMenu) return null;
  return (
    <div className="reveal" style={{
      position: "relative", display: "flex", justifyContent: "center", alignItems: "center",
      minHeight: 460,
    }}>
      <div style={{
        position: "absolute", inset: -40,
        background: "radial-gradient(ellipse at 70% 80%, rgba(52,211,153,0.20), transparent 60%)",
        filter: "blur(40px)",
        zIndex: 0,
      }}/>
      <div style={{
        position: "relative", zIndex: 1,
        animation: "float-y 6s ease-in-out infinite",
      }}>
        <WinTrayMenu
          activeStyle={activeStyle} onPickStyle={setActiveStyle}
          activeLang={activeLang} onPickLang={setActiveLang}
        />
      </div>
      <div style={{
        position: "absolute", left: "4%", top: "30%", zIndex: 2,
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "#34D399", letterSpacing: "0.06em",
        transform: "rotate(-8deg)",
        opacity: 0.85,
        pointerEvents: "none",
      }}>
        ← five styles<br/>
        &nbsp;&nbsp;one click
      </div>
    </div>
  );
}

// Tray menu showcase: live React component
function TraySection() {
  return (
    <section style={{ padding: "120px 32px", position: "relative", overflow: "hidden" }}>
      <div className="container">
        <div style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center",
        }} className="tray-grid">
          {/* Left: copy */}
          <div>
            <Eyebrow num={5} color="#34D399">one click away</Eyebrow>
            <div style={{ height: 16 }}/>
            <SectionTitle>
              Right-click the tray.<br/>
              <span className="grad-text">Switch styles.</span>
            </SectionTitle>
            <p className="reveal" style={{
              marginTop: 20, fontSize: 17, lineHeight: 1.55,
              color: "var(--fg-muted)", textWrap: "pretty",
            }}>
              Drafting an email? <em>Email</em>. Notes for yourself? <em>Off</em>. Voice memo to flatten into bullets? <em>Bullets</em>. The tray shows your favorites. <strong style={{ color: "var(--fg)" }}>13 styles total</strong>, all configurable.
            </p>

            <div className="reveal" style={{
              marginTop: 24,
              padding: "14px 16px",
              background: "var(--bg-elev)",
              border: "1px solid var(--line)",
              borderRadius: 12,
              display: "flex", alignItems: "center", gap: 14,
              fontSize: 13, color: "var(--fg-muted)",
            }}>
              <span style={{ display: "inline-flex", gap: 4 }}>
                {["🇬🇧","🇮🇹","🇫🇷","🇩🇪","🇪🇸","🇮🇹"].map((f, i) => (
                  <span key={i} style={{
                    fontSize: 18, filter: i === 5 ? "saturate(1.4) hue-rotate(-10deg)" : "saturate(1.1)",
                    position: "relative",
                  }}>{f}</span>
                ))}
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 9,
                  color: "#FB923C", marginLeft: 4, alignSelf: "flex-end",
                  textTransform: "uppercase", letterSpacing: "0.08em",
                }}>+ napoletano</span>
              </span>
              <div>
                <strong style={{ color: "var(--fg)" }}>Translate while you dictate.</strong>
                <div style={{ fontSize: 12, color: "var(--fg-faint)", marginTop: 2 }}>
                  Speak Italian. Output English. Or napoletano, perché no.
                </div>
              </div>
            </div>
          </div>

          {/* Right: live tray menu component (the real one, fully selectable) */}
          <TrayMenuLive/>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .tray-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

window.TraySection = TraySection;