"use client";

import { useEffect, useState } from "react";
import { RefreshCcw } from "lucide-react";
import { StoryBackdrop } from "@/components/marketing/StoryBackdrop";
import { randomStory, type GoalStory } from "@/lib/stories";

/**
 * Mobile onboarding screen with a rotating goal-story video background.
 * A different human moment greets the user every time the app opens.
 */
export function StoryOnboarding() {
  const [story, setStory] = useState<GoalStory | null>(null);
  useEffect(() => setStory(randomStory()), []);

  return (
    <div className="relative -m-5 h-[calc(100%+40px)] overflow-hidden">
      {story ? (
        <StoryBackdrop story={story} dim="soft" />
      ) : (
        <div className="absolute inset-0 bg-gradient-to-br from-[#0A5240] to-[#0F6E56]" />
      )}
      <div className="relative flex h-full flex-col justify-end p-5 pb-12">
        {story && (
          <>
            <p className="text-[11px] font-bold uppercase tracking-wider text-mint">
              {story.emoji} {story.tag}
            </p>
            <h2 className="mt-2 font-display text-3xl leading-tight text-paper">{story.headline}</h2>
            <p className="mt-2 text-sm leading-6 text-paper/75">{story.subline}</p>
          </>
        )}
        <p className="mt-4 text-xs font-semibold text-paper/60">
          Your goal is next. Aartha gets you there.
        </p>
        <button className="mt-4 rounded-lg bg-mint py-3 font-bold text-ink">Get started</button>
        <button
          onClick={() => setStory((s) => randomStory(s?.id))}
          className="mt-3 inline-flex items-center justify-center gap-1.5 text-xs font-semibold text-paper/60"
        >
          <RefreshCcw size={12} /> See another story
        </button>
      </div>
    </div>
  );
}