/* global React, Common */
const { Eyebrow, SectionTitle, SectionLead } = Common;
const { useState: useStS, useEffect: useStE } = React;

const STYLES = [
  { id: "off",            label: "Off",            color: "#41B0B1", desc: "raw transcription, your words verbatim" },
  { id: "correct",        label: "Correct",        color: "#2DD4BF", desc: "fix grammar, punctuation, capitalization" },
  { id: "summarize",      label: "Summarize",      color: "#FBBF24", desc: "compress to the essential points" },
  { id: "elaborate",      label: "Elaborate",      color: "#4ADE80", desc: "expand with context and detail" },
  { id: "comprehensible", label: "Comprehensible", color: "#38BDF8", desc: "rewrite for clarity, plain language" },
  { id: "professional",   label: "Professional",   color: "#F472B6", desc: "polished, business-appropriate tone" },
  { id: "prompt",         label: "Prompt",         color: "#A78BFA", desc: "structure as an LLM prompt" },
  { id: "genz",           label: "Gen Z",          color: "#E879F9", desc: "lowercase, abbreviations, vibes" },
  { id: "boomer",         label: "Boomer",         color: "#F97316", desc: "all caps, ellipses, no punctuation" },
  { id: "emoji",          label: "Emoji",          color: "#FACC15", desc: "sprinkle in tasteful emoji" },
  { id: "acronyms",       label: "Acronyms",       color: "#22D3EE", desc: "expand or shorten acronyms" },
  { id: "imbruttito",     label: "Imbruttito",     color: "#EF4444", desc: "milanese grumpy rewrite, in italian" },
  { id: "custom",         label: "Custom",         color: "#FB923C", desc: "your own system prompt" },
];

const REWRITES = {
  off: "ok so thursday afternoon design review with the team, sound good",
  correct: "OK, so Thursday afternoon design review with the team. Sound good?",
  summarize: "Design review: Thursday afternoon.",
  elaborate: "Let's hold our design review on Thursday afternoon. I'd like the whole team there so we can walk through the new flows together and align on next steps before the week is out.",
  comprehensible: "Let's do the design review on Thursday afternoon, with the whole team.",
  professional: "I'd like to propose a design review on Thursday afternoon with the team. Please confirm your availability.",
  prompt: "Schedule a design review meeting for Thursday afternoon. Attendees: design team. Goal: review current work, align on direction.",
  genz: "ok thurs pm design review w the team, say less 💅",
  boomer: "OK SO THURSDAY AFTERNOON... DESIGN REVIEW WITH THE TEAM... SOUND GOOD",
  emoji: "Ok so 🗓️ Thursday afternoon ✏️ design review with the team 👥 sound good? 🚀",
  acronyms: "Thurs PM DR w/ the team. TBD?",
  imbruttito: "Oh ragazzi, giovedì pomeriggio 'sta benedetta review del design tutti insieme, eh, che mica abbiamo tempo da perdere.",
  custom: "// your custom prompt rewrites the input however you want.",
};

function StylesSection() {
  const [active, setActive] = useStS("professional");
  const [auto, setAuto] = useStS(true);
  const [displayText, setDisplayText] = useStS("");

  // Cycle through styles
  useStE(() => {
    if (!auto) return;
    const id = setInterval(() => {
      setActive((a) => {
        const i = STYLES.findIndex((s) => s.id === a);
        return STYLES[(i + 1) % STYLES.length].id;
      });
    }, 2400);
    return () => clearInterval(id);
  }, [auto]);

  // Type-out animation when style changes
  useStE(() => {
    const target = REWRITES[active];
    setDisplayText("");
    let i = 0;
    const id = setInterval(() => {
      i += 2;
      setDisplayText(target.slice(0, i));
      if (i >= target.length) clearInterval(id);
    }, 12);
    return () => clearInterval(id);
  }, [active]);

  const cur = STYLES.find((s) => s.id === active);

  return (
    <section id="styles" style={{ padding: "120px 32px", position: "relative" }}>
      <div className="container-narrow">
        <div style={{ textAlign: "center" }}>
          <Eyebrow num={4} color="#E879F9">13 styles</Eyebrow>
          <div style={{ height: 16 }}/>
          <SectionTitle align="center" maxWidth={780}>
            One sentence. <span className="grad-text">Thirteen tones.</span>
          </SectionTitle>
          <SectionLead align="center">
            Pick a style before you press the hotkey. Dimmy will rewrite your speech in the tone you chose, including <em>imbruttito</em>, our love letter to Milanese grumpy.
          </SectionLead>
        </div>

        {/* The original sentence */}
        <div className="reveal" style={{
          marginTop: 56,
          padding: "16px 20px",
          background: "var(--bg-elev)",
          border: "1px solid var(--line)",
          borderRadius: 12,
          fontFamily: "var(--font-mono)", fontSize: 13,
          color: "var(--fg-faint)",
          lineHeight: 1.5,
        }}>
          <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--fg-faint)", textTransform: "uppercase", marginBottom: 8 }}>
            you said
          </div>
          "ok so thursday afternoon design review with the team sound good"
        </div>

        {/* Style chips */}
        <div className="reveal" style={{
          marginTop: 24, display: "flex", flexWrap: "wrap", gap: 8,
        }}>
          {STYLES.map((s) => {
            const a = s.id === active;
            return (
              <button key={s.id}
                onClick={() => { setAuto(false); setActive(s.id); }}
                onMouseEnter={() => setAuto(false)}
                style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  padding: "7px 12px", borderRadius: 8,
                  background: a ? `${s.color}22` : "var(--bg-elev)",
                  border: `1px solid ${a ? s.color + "88" : "var(--line)"}`,
                  color: a ? s.color : "var(--fg-muted)",
                  fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: a ? 600 : 500,
                  cursor: "pointer",
                  transition: "all 200ms cubic-bezier(0.2,0.8,0.2,1)",
                }}>
                <span style={{
                  width: 8, height: 8, borderRadius: 99, background: s.color,
                  boxShadow: a ? `0 0 8px ${s.color}` : "none",
                }}/>
                {s.label}
              </button>
            );
          })}
        </div>

        {/* The rewrite */}
        <div className="reveal" style={{
          marginTop: 16,
          padding: "24px 28px",
          minHeight: 140,
          background: `linear-gradient(180deg, ${cur.color}10, transparent)`,
          border: `1px solid ${cur.color}33`,
          borderRadius: 14,
          position: "relative",
          transition: "border-color 400ms, background 400ms",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
            <span style={{ width: 10, height: 10, borderRadius: 99, background: cur.color, boxShadow: `0 0 10px ${cur.color}` }}/>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: cur.color, letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 600,
            }}>{cur.label}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-faint)" }}>
              {cur.desc}
            </span>
          </div>
          <p style={{
            margin: 0, fontSize: 18, lineHeight: 1.55,
            color: "var(--fg)",
            fontFamily: cur.id === "imbruttito" || cur.id === "off" ? "var(--font-sans)" : "var(--font-sans)",
            fontStyle: cur.id === "imbruttito" ? "italic" : "normal",
            textWrap: "pretty",
          }}>
            {displayText}<span className="caret" style={{ background: cur.color }}/>
          </p>
        </div>

        <div style={{
          marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 11,
          color: "var(--fg-faint)", textAlign: "center",
        }}>
          {auto ? "auto-cycling. Click any style to lock." : "click any style above"}
        </div>
      </div>
    </section>
  );
}

window.StylesSection = StylesSection;