Blame for frontend/src/components/FeatureShowcase.tsx

import { useEffect, useRef, useState, type ReactNode, type RefObject } from "react";
import { Link } from "react-router-dom";

/** Landing page feature tour: one full section per feature, alternating sides, each with a small
 * product visual that animates when the section arrives (the parent adds .arrived via Landing's observer). */

type Feature = {
  id: string;
  eyebrow: string;
  title: string;
  body: string;
  points: string[];
  visual: ReactNode;
};

function ChatVisual() {
  return (
    <div className="fx fx-chat">
      <div className="fx-bubble fx-q">What have I written about pricing?</div>
      <div className="fx-steps mono">
        <span>Searching for pric(e|ing)|paid tier</span>
        <span>Reading On Pricing, lines 12 to 20</span>
      </div>
      <p className="fx-answer">
        You raised prices twice and the <b>paid tier doubled</b>
        <span className="fx-cite">1</span>, because readers took the work more seriously<span className="fx-cite">2</span>.
      </p>
      <div className="fx-source">
        <span className="mono">[1] On Pricing · lines 12 to 14</span>
        <span className="fx-line">The paid tier doubled after I raised the price to ten dollars.</span>
      </div>
    </div>
  );
}

const SHAPES = ["Orbit", "Spiral", "Figure", "Cluster"];
const SHAPE_MS = 3500; // how long each shape is shown on its own
const MORPH_MS = 1300;

/** Where the four outer topics sit in each shape (the hub, Gravity, stays put so the dive lines up). */
const LAYOUTS: [number, number][][] = [
  [[74, 30], [20, 24], [26, 82], [78, 76]], // orbit: around the hub
  [[55, 56], [42, 74], [16, 62], [18, 30]], // spiral: winding out
  [[56, 36], [72, 48], [66, 68], [84, 78]], // figure: one long chain of stars
  [[72, 28], [84, 36], [20, 76], [30, 86]], // cluster: two tight groups
];

/** Cycles the shape on a timer while the visual is on screen. Clicking a pill jumps to that shape and pauses
 * the cycle for a while. With reduced motion the shape only changes when the reader clicks. */
function useShapeCycle(ref: RefObject<HTMLElement>) {
  const [view, setView] = useState({ shape: 0, prev: 0, p: 1, t: 0 });
  const go = useRef<(i: number) => void>(() => undefined);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let raf = 0;
    let last = 0;
    let shape = 0;
    let prev = 0;
    let t0 = -MORPH_MS;
    let nextAuto = 0;
    const show = (now: number) => setView({ shape, prev, p: Math.min(1, (now - t0) / MORPH_MS), t: now / 1000 });
    const jump = (i: number, now: number) => {
      if (i === shape) return;
      prev = shape;
      shape = i;
      t0 = now;
    };
    go.current = (i) => {
      const now = performance.now();
      jump(i, now);
      nextAuto = now + 9000;
      show(now);
      if (still) setTimeout(() => show(performance.now() + MORPH_MS), MORPH_MS);
    };
    const tick = (now: number) => {
      if (now >= nextAuto) {
        jump((shape + 1) % SHAPES.length, now);
        nextAuto = now + SHAPE_MS;
      }
      if (now - last > 33) {
        last = now;
        show(now);
      }
      raf = requestAnimationFrame(tick);
    };
    const io = new IntersectionObserver(([entry]) => {
      cancelAnimationFrame(raf);
      if (entry.isIntersecting && !still) {
        nextAuto = performance.now() + SHAPE_MS;
        raf = requestAnimationFrame(tick);
      }
    });
    io.observe(node);
    return () => {
      io.disconnect();
      cancelAnimationFrame(raf);
    };
  }, [ref]);
  return { view, go };
}

function MapVisual() {
  const ref = useRef<HTMLDivElement>(null);
  const { view, go } = useShapeCycle(ref);
  const e = view.p < 0.5 ? 2 * view.p * view.p : 1 - (-2 * view.p + 2) ** 2 / 2;
  // Three levels of depth: topics, the sub-topics inside Gravity, and the posts behind each sub-topic.
  const hub = { x: 38, y: 52, r: 9, label: "Gravity" };
  const names = ["Quantum", "Entropy", "Optics", "Relativity"];
  const outer = names.map((label, i) => {
    const [fx, fy] = LAYOUTS[view.prev][i];
    const [tx, ty] = LAYOUTS[view.shape][i];
    return { label, r: [7, 6, 6, 7][i], x: fx + (tx - fx) * e, y: fy + (ty - fy) * e };
  });
  const topics = [hub, ...outer];
  const links = [
    [0, 1],
    [0, 2],
    [0, 3],
    [0, 4],
    [1, 4],
    [2, 3],
  ];
  const subs = [
    { x: 52, y: 40, label: "Spacetime", posts: [[59, 35], [58, 45], [47, 35]] },
    { x: 24, y: 62, label: "Black holes", posts: [[17, 66], [22, 70], [17, 57]] },
    { x: 50, y: 67, label: "Orbits", posts: [[58, 70], [46, 73], [56, 62]] },
  ];
  return (
    <div className="fx fx-map" ref={ref}>
      <div className="fx-pills mono" role="group" aria-label="Shape of the map">
        {SHAPES.map((name, i) => (
          <button key={name} type="button" className={i === view.shape ? "on" : ""} onClick={() => go.current(i)}>
            {name}
          </button>
        ))}
      </div>
      <div className="fx-crumb mono">
        <span>Archive</span>
        <span className="fx-crumb-deep"> › Gravity › Spacetime</span>
      </div>
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
        <g className="fx-cam">
          <g className="fx-dim">
            {links.map(([a, b], i) => (
              <line key={i} className="fx-edge" style={{ ["--d" as string]: `${i * 0.15}s` }} x1={topics[a].x} y1={topics[a].y} x2={topics[b].x} y2={topics[b].y} />
            ))}
            {links.map(([a, b], i) => {
              const u = (view.t * 0.3 + i * 0.37) % 1; // a pulse of light travelling along the link
              return <circle key={`p${i}`} className="fx-pulse" r="1" fill="#fff" fillOpacity={Math.sin(u * Math.PI)} cx={topics[b].x + (topics[a].x - topics[b].x) * u} cy={topics[b].y + (topics[a].y - topics[b].y) * u} />;
            })}
            {outer.map((n, i) => (
              <g key={n.label}>
                {[0, 1, 2].map((k) => {
                  const angle = i * 1.7 + k * 2.1;
                  return <circle key={k} className="fx-sat" cx={n.x + Math.cos(angle) * (n.r + 6)} cy={n.y + Math.sin(angle) * (n.r + 6)} r="1.1" />;
                })}
                <g className="fx-node" style={{ ["--d" as string]: `${0.5 + i * 0.12}s` }}>
                  <circle cx={n.x} cy={n.y} r={n.r * 0.9} className="fx-halo" style={{ ["--t" as string]: `${(i + 1) * 0.7}s` }} />
                  <circle cx={n.x} cy={n.y} r={n.r * 0.3} fill="#fff" />
                  <text x={n.x} y={n.y + n.r * 0.9 + 5} textAnchor="middle">
                    {n.label}
                  </text>
                </g>
              </g>
            ))}
          </g>
          <g className="fx-deep">
            <ellipse className="fx-ring" cx={hub.x} cy={hub.y} rx="15" ry="12.5" />
            {subs.map((sub) => (
              <g key={sub.label}>
                <line className="fx-deep-edge" x1={hub.x} y1={hub.y} x2={sub.x} y2={sub.y} />
                {sub.posts.map(([px, py]) => (
                  <g key={`${px}-${py}`}>
                    <line className="fx-deep-edge" x1={sub.x} y1={sub.y} x2={px} y2={py} />
                    <circle className="fx-post" cx={px} cy={py} r="0.9" />
                  </g>
                ))}
                <circle className="fx-halo" cx={sub.x} cy={sub.y} r="3.4" />
                <circle cx={sub.x} cy={sub.y} r="1.5" fill="#fff" />
                <text className="fx-sub" x={sub.x} y={sub.y + 5.4} textAnchor="middle">
                  {sub.label}
                </text>
              </g>
            ))}
          </g>
          <g className="fx-node" style={{ ["--d" as string]: "0.3s" }}>
            <circle cx={hub.x} cy={hub.y} r={hub.r * 0.9} className="fx-halo" />
            <circle cx={hub.x} cy={hub.y} r={hub.r * 0.3} fill="#fff" />
            <text x={hub.x} y={hub.y - hub.r * 0.9 - 2} textAnchor="middle">
              {hub.label}
            </text>
          </g>
        </g>
        <g className="fx-panel">
          <rect x="68" y="12" width="30" height="34" rx="2" />
          <text className="fx-panel-h" x="71" y="19">
            Gravity
          </text>
          <text className="fx-panel-k" x="71" y="26">
            FROM YOUR POSTS
          </text>
          {["Why Things Fall", "Curved Space", "Notes on Orbits"].map((title, i) => (
            <text key={title} className="fx-panel-t" x="71" y={32 + i * 5}>
              {title}
            </text>
          ))}
        </g>
      </svg>
    </div>
  );
}

function AudioVisual() {
  return (
    <div className="fx fx-audio">
      <div className="fx-wave" aria-hidden="true">
        {Array.from({ length: 36 }).map((_, i) => (
          <span key={i} style={{ ["--d" as string]: `${(i % 9) * 0.09}s`, ["--h" as string]: `${30 + ((i * 37) % 60)}%` }} />
        ))}
      </div>
      <div className="fx-lines">
        <p>
          <span className="fx-host a">A</span>So the big idea is that price is a signal.
        </p>
        <p>
          <span className="fx-host b">B</span>And she has the numbers: the paid tier doubled.
        </p>
      </div>
    </div>
  );
}

function VideoVisual() {
  const scenes = ["Price is a signal", "The numbers", "Why it worked"];
  return (
    <div className="fx fx-video">
      <div className="fx-scenes">
        {scenes.map((title, i) => (
          <span key={title} className={i === 1 ? "on" : ""}>
            <i className="mono">{i + 1}</i>
            {title}
          </span>
        ))}
      </div>
      <div className="fx-frame v169">
        <span className="mono">Live preview</span>
        <b>Paid readers, doubled</b>
      </div>
      <div className="fx-render mono">
        <i /> Rendering MP4
      </div>
    </div>
  );
}

function MemoryVisual() {
  const notes = [
    ["audience", "I write for indie founders"],
    ["tone", "Short sentences, no jargon"],
    ["avoid", "Never name competitors"],
  ];
  return (
    <div className="fx fx-memory">
      {notes.map(([key, value]) => (
        <div key={key} className="fx-profile">
          <span className="mono">{key}</span>
          <p>{value}</p>
        </div>
      ))}
      <div className="fx-clone mono">
        <span className="fx-rec" /> Saved from your last chat
      </div>
    </div>
  );
}

function HelpVisual() {
  return (
    <div className="fx fx-help">
      <div className="fx-bubble">How do I make a video from one post?</div>
      <p className="fx-answer">Open Create, choose Video, then pick the post, a template and a voice. You can edit every scene before you render.</p>
      <div className="fx-source">
        <span className="mono">Still stuck?</span>
        <span className="fx-line">Send it to the team. We will email you back.</span>
      </div>
    </div>
  );
}

function KitVisual() {
  const cards = [
    ["X thread", "I doubled my price. My paid tier doubled too."],
    ["LinkedIn", "Most writers underprice. I did for two years."],
    ["Notes", "Price is a signal. Readers told me so."],
    ["Bluesky", "Raised my price to $10. Paid went up."],
  ];
  return (
    <div className="fx fx-kit">
      {cards.map(([label, body], i) => (
        <div key={label} className="fx-card" style={{ ["--d" as string]: `${i * 0.12}s`, ["--r" as string]: `${(i - 1.5) * 4}deg` }}>
          <span className="mono">{label}</span>
          <p>{body}</p>
        </div>
      ))}
    </div>
  );
}

function VoiceVisual() {
  const sliders = [
    ["Stability", 62],
    ["Similarity", 80],
    ["Style", 28],
  ] as const;
  return (
    <div className="fx fx-voice">
      <div className="fx-profile">
        <span className="mono">Your voice</span>
        <p>Warm, direct, short paragraphs. Opens with a number. Never uses jargon.</p>
      </div>
      {sliders.map(([label, v], i) => (
        <div key={label} className="fx-slider" style={{ ["--v" as string]: `${v}%`, ["--d" as string]: `${0.2 + i * 0.15}s` }}>
          <span>{label}</span>
          <i />
        </div>
      ))}
      <div className="fx-clone mono">
        <span className="fx-rec" /> Recording take 2 · 1:24
      </div>
    </div>
  );
}

function PadVisual() {
  const lit = [2, 5, 9, 12, 16, 19];
  return (
    <div className="fx fx-pad">
      <div className="fx-cal">
        {Array.from({ length: 21 }).map((_, i) => (
          <span key={i} className={lit.includes(i) ? "on" : ""} style={{ ["--d" as string]: `${lit.indexOf(i) * 0.12}s` }}>
            {i + 1}
          </span>
        ))}
      </div>
      <div className="fx-launch mono">
        <span>X</span>
        <span>LinkedIn</span>
        <span>Bluesky</span>
        <span>Notes reminder</span>
      </div>
    </div>
  );
}

const FEATURES: Feature[] = [
  {
    id: "research",
    eyebrow: "Research notebook",
    title: "Ask your archive anything. It answers with receipts.",
    body: "Notestack reads your posts the way a careful researcher would: it searches, opens the right post, and cites the exact lines. If you never wrote it, it tells you so instead of guessing.",
    points: ["Every sentence links to the lines it came from", "Chats are saved per notebook", "Thumbs up or down on any answer"],
    visual: <ChatVisual />,
  },
  {
    id: "memory",
    eyebrow: "Memory",
    title: "It remembers who you write for.",
    body: "Notestack keeps short notes about your audience, tone and preferences, learned as you chat, and uses them in every answer and draft. Read, edit or delete any note in Settings.",
    points: ["Notes saved from your conversations", "Edit or delete any note, anytime", "Shared across your notebooks"],
    visual: <MemoryVisual />,
  },
  {
    id: "map",
    eyebrow: "Mind Constellation",
    title: "Fly through the galaxy of your ideas.",
    body: "Open a notebook as a constellation: topics orbit the ideas they share, and every star lists the posts it comes from. Switch the shape, dive in and see what you keep coming back to.",
    points: ["Orbit, spiral, figure or cluster layouts", "Scroll to dive in, click a star to fly to it", "Every star lists the posts behind it"],
    visual: <MapVisual />,
  },
  {
    id: "audio",
    eyebrow: "Audio overview",
    title: "Two hosts talk through your ideas.",
    body: "Turn a post or a whole notebook into a natural conversation, voiced by ElevenLabs. Pick two hosts from a library of voices, or use a voice you made yourself.",
    points: ["Deep dive, brief or debate formats", "Every line grounded in your posts", "Square audiograms from any overview"],
    visual: <AudioVisual />,
  },
  {
    id: "video",
    eyebrow: "Video studio",
    title: "Narrated videos from one post, edited scene by scene.",
    body: "Pick a post or paste a link, choose a template, style and voice, and Notestack writes the script, narrates it and builds the scenes. Edit any scene and watch the live preview update, then render an MP4.",
    points: ["Landscape for YouTube, vertical for Reels and TikTok", "Templates, stock footage, captions and 16 languages", "Square audiograms from any audio overview"],
    visual: <VideoVisual />,
  },
  {
    id: "voice",
    eyebrow: "Voices",
    title: "Sounds like you, on the page and out loud.",
    body: "Notestack learns your writing voice from your own posts. For narration, describe a voice, pick its options, or record a couple of minutes to clone your own, then reuse it in every audio overview and video.",
    points: ["Describe it, pick options or clone yours", "Fine tune stability, similarity and style", "Consented cloning you can revoke anytime"],
    visual: <VoiceVisual />,
  },
  {
    id: "kit",
    eyebrow: "Launch Kit",
    title: "One post becomes a launch on every platform.",
    body: "Hooks, an X thread, a LinkedIn post, Substack Notes, a Bluesky thread, an SEO pack, a carousel and quote cards, all written in your voice from claims the post actually makes.",
    points: ["Edit anything, copy in one click", "Character counts per platform", "Quote cards rendered and ready"],
    visual: <KitVisual />,
  },
  {
    id: "help",
    eyebrow: "Help",
    title: "Stuck? Ask Notestack.",
    body: "A help assistant in the app answers how-to questions about every screen. If it can't, send the question to the team and we will email you back.",
    points: ["Answers about any feature, in plain words", "Hand off to a person in one click", "Always one click away"],
    visual: <HelpVisual />,
  },
  {
    id: "pad",
    eyebrow: "Launchpad",
    title: "Schedule the countdown. We handle liftoff.",
    body: "Plan every post on one calendar. Notestack publishes to X, LinkedIn and Bluesky on time, emails you Substack Notes to paste, and tracks the clicks that follow.",
    points: ["Auto posting with connected accounts", "Tracked links and engagement", "Resurface evergreen posts when they matter"],
    visual: <PadVisual />,
  },
];

export default function FeatureShowcase() {
  return (
    <div className="showcase">
      {FEATURES.map((f, i) => (
        <section key={f.id} id={`feature-${f.id}`} className={`showcase-row arrive${i % 2 ? " flip" : ""}`}>
          <div className="showcase-copy">
            <p className="eyebrow">
              <span className="mono showcase-n">{String(i + 1).padStart(2, "0")}</span> {f.eyebrow}
            </p>
            <h3>{f.title}</h3>
            <p className="muted">{f.body}</p>
            <ul>
              {f.points.map((p) => (
                <li key={p}>{p}</li>
              ))}
            </ul>
            {i === FEATURES.length - 1 && (
              <Link to="/auth?mode=signup" className="btn btn-primary">
                Start Exploring
              </Link>
            )}
          </div>
          <div className="showcase-visual card">{f.visual}</div>
        </section>
      ))}
    </div>
  );
}