Hero 7

"use client";

import * as React from "react";
import { ArrowRight } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";

import { Button } from "@/registry/hirael/ui/button";
import { cn } from "@/lib/utils";

const HEADLINE = "Build the page once, ship it everywhere";

function Headline() {
  const reduce = useReducedMotion();
  const words = HEADLINE.split(" ");

  return (
    <h1
      data-slot="hero-headline"
      className="max-w-3xl font-serif text-[42px] font-medium leading-[1.04] tracking-tight text-foreground sm:text-5xl md:text-7xl"
    >
      {words.map((word, i) => {
        const accent = i >= words.length - 2;
        return (
          <motion.span
            key={`${word}-${i}`}
            className={cn("inline-block", accent && "italic text-foreground")}
            initial={
              reduce ? false : { opacity: 0, y: 16, filter: "blur(8px)" }
            }
            whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            viewport={{ once: true }}
            transition={{
              duration: 0.5,
              ease: "easeOut",
              delay: 0.3 + i * 0.12,
            }}
          >
            {word}
            {i < words.length - 1 ? " " : null}
          </motion.span>
        );
      })}
    </h1>
  );
}

function Beam({
  className,
  reduce,
}: {
  className?: string;
  reduce: boolean | null;
}) {
  const verticals = [
    "M141.338 232.625V5.075",
    "M200.338 232.625V5.075",
    "M259.338 231.625V4.075",
    "M318.338 230.625V3.075",
  ];
  const curves = [
    "M459.649 152.723 351.613 69.264a11 11 0 0 1-4.275-8.705V.074",
    "m.338 152.723 108.036-83.459a11 11 0 0 0 4.275-8.705V.074",
  ];

  return (
    <svg
      width={460}
      height={233}
      fill="none"
      viewBox="0 0 460 233"
      className={cn("text-foreground", className)}
      aria-hidden="true"
    >
      {[...verticals, ...curves].map((d, i) => (
        <path
          key={`base-${i}`}
          d={d}
          stroke="currentColor"
          strokeWidth="1"
          className="opacity-15"
        />
      ))}
      {curves.map((d, i) => (
        <motion.path
          key={`beam-${i}`}
          d={d}
          stroke="url(#hero07-beam)"
          strokeWidth="2.5"
          strokeLinecap="round"
          strokeDasharray="1000"
          initial={{ strokeDashoffset: 0 }}
          animate={reduce ? undefined : { strokeDashoffset: [0, -900, 0] }}
          transition={
            reduce
              ? undefined
              : {
                  duration: 5 + i * 1.2,
                  repeat: Infinity,
                  ease: "linear",
                }
          }
          style={{ willChange: "stroke-dashoffset" }}
        />
      ))}
      <defs>
        <linearGradient
          id="hero07-beam"
          x1="230"
          y1="233"
          x2="230"
          y2="0"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="transparent" offset="0%" />
          <stop
            stopColor="color-mix(in oklch, var(--primary) 60%, transparent)"
            offset="30%"
          />
          <stop stopColor="var(--foreground)" offset="50%" />
          <stop
            stopColor="color-mix(in oklch, var(--primary) 60%, transparent)"
            offset="70%"
          />
          <stop stopColor="transparent" offset="100%" />
        </linearGradient>
      </defs>
    </svg>
  );
}

function SideBeam({
  className,
  reduce,
}: {
  className?: string;
  reduce: boolean | null;
}) {
  const paths = [
    "M0 442.957L209.048 442.957C212.366 442.957 215.508 441.458 217.596 438.879L321.802 310.196",
    "M0 1.19531L209.048 1.19557C212.366 1.19558 215.508 2.69391 217.596 5.27302L321.802 133.956",
  ];

  return (
    <svg
      width={200}
      height={444}
      viewBox="0 0 323 444"
      fill="none"
      className={cn("text-foreground", className)}
      aria-hidden="true"
    >
      {paths.map((d, i) => (
        <path
          key={`base-${i}`}
          d={d}
          stroke="currentColor"
          strokeWidth="1"
          className="opacity-15"
        />
      ))}
      {paths.map((d, i) => (
        <motion.path
          key={`beam-${i}`}
          d={d}
          stroke="url(#hero07-side)"
          strokeWidth="3"
          strokeLinecap="round"
          strokeDasharray="1200"
          initial={{ strokeDashoffset: 0 }}
          animate={reduce ? undefined : { strokeDashoffset: [0, -900, 0] }}
          transition={
            reduce
              ? undefined
              : {
                  duration: 6 + i * 1.5,
                  repeat: Infinity,
                  ease: "linear",
                }
          }
          style={{ willChange: "stroke-dashoffset" }}
        />
      ))}
      <defs>
        <linearGradient
          id="hero07-side"
          x1="160.901"
          y1="444"
          x2="160.901"
          y2="0"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="transparent" offset="0%" />
          <stop
            stopColor="color-mix(in oklch, var(--primary) 60%, transparent)"
            offset="30%"
          />
          <stop stopColor="var(--foreground)" offset="50%" />
          <stop
            stopColor="color-mix(in oklch, var(--primary) 60%, transparent)"
            offset="70%"
          />
          <stop stopColor="transparent" offset="100%" />
        </linearGradient>
      </defs>
    </svg>
  );
}

export default function Hero07() {
  const reduce = useReducedMotion();

  return (
    <section
      data-slot="hero"
      className="relative isolate grid min-h-[640px] place-items-center overflow-hidden bg-background px-6 py-28 text-center text-foreground md:px-10 md:py-32"
    >
      <div
        aria-hidden
        data-slot="hero-backdrop"
        className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,black_10%,transparent_72%)]"
        style={{
          background:
            "radial-gradient(120% 120% at 50% 30%, color-mix(in oklch, var(--primary) 8%, transparent), transparent 60%)",
        }}
      />

      <Beam
        reduce={reduce}
        className="pointer-events-none absolute -top-8 start-1/2 -translate-x-1/2 scale-[0.6] rtl:translate-x-1/2 sm:top-0 sm:scale-90"
      />
      <Beam
        reduce={reduce}
        className="pointer-events-none absolute -bottom-8 start-1/2 -translate-x-1/2 -scale-[0.6] rtl:translate-x-1/2 sm:bottom-0 sm:-scale-90"
      />
      <SideBeam
        reduce={reduce}
        className="pointer-events-none absolute top-1/2 start-0 hidden -translate-y-1/2 scale-90 rtl:-scale-x-90 md:block"
      />
      <SideBeam
        reduce={reduce}
        className="pointer-events-none absolute top-1/2 end-0 hidden -translate-y-1/2 -scale-x-90 rtl:scale-90 md:block"
      />

      <motion.div
        className="relative z-10 mx-auto flex w-full max-w-3xl flex-col items-center gap-5"
        initial={reduce ? false : { opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8, ease: "easeOut" }}
      >
        <span
          data-slot="hero-badge"
          className="inline-flex w-fit items-center gap-2 rounded-full border border-border bg-card/70 px-4 py-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground backdrop-blur-sm"
        >
          <span className="relative flex size-1.5">
            <span
              className="absolute inline-flex size-full animate-ping rounded-full opacity-75"
              style={{ background: "var(--accent-cool)" }}
            />
            <span
              className="relative inline-flex size-1.5 rounded-full"
              style={{ background: "var(--accent-cool)" }}
            />
          </span>
          Now in beta
        </span>

        <Headline />

        <p
          data-slot="hero-subhead"
          className="mt-2 max-w-xl text-muted-foreground sm:mt-4"
        >
          One source of truth for your interface. Design it, theme it, and reuse
          it across every project without rewriting the same components.
        </p>

        <div className="mt-4 flex flex-col gap-3 sm:flex-row">
          <Button asChild size="lg" className="group rounded-full px-7">
            <a href="#">
              <span>Get started</span>
              <ArrowRight className="size-4 -rotate-45 transition-transform duration-150 ease-out group-hover:translate-x-0.5 rtl:rotate-[135deg] rtl:group-hover:-translate-x-0.5" />
            </a>
          </Button>
          <Button
            asChild
            size="lg"
            variant="outline"
            className="rounded-full px-7"
          >
            <a href="#">
              <span>Read the docs</span>
            </a>
          </Button>
        </div>
      </motion.div>
    </section>
  );
}