"use client";
import { useEffect, useRef } from "react";
import { SmileyIcon } from "../common/SmileyIcon";
import CheckoutButton from "../common/CheckoutButton";
import { STRIPE_PLANS } from "@/data/designshare";

const words = [
  { text: "Design", italic: false },
  { text: "unlimited.", italic: true },
  { text: "One", italic: false },
  { text: "flat", italic: false },
  { text: "fee.", italic: false },
];

const StarIcon = () => (
  <svg viewBox="0 0 16 16" fill="currentColor">
    <path d="M8 1l2.2 4.8L15 6.4l-3.8 3.4 1.2 5L8 12.2 3.6 14.8l1.2-5L1 6.4l4.8-.6z" />
  </svg>
);

export function Hero() {
  const wordRefs = useRef<(HTMLSpanElement | null)[]>([]);

  useEffect(() => {
    wordRefs.current.forEach((el, i) => {
      if (!el) return;
      setTimeout(() => el.classList.add("ds-word-in"), 220 + i * 90);
    });
  }, []);

  return (
    <section className="ds-hero" id="top">
      {/* Floating decorative cards */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          pointerEvents: "none",
          zIndex: 0,
        }}
      >
        <div className="ds-float-card ds-float-1">
          <span className="ds-float-check">
            <svg viewBox="0 0 14 14" fill="none" width="13" height="13">
              <path
                d="M2 7 L6 11 L12 3"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </span>
          <div>
            Webflow site
            <span className="ds-float-meta">✓ Live in 52 hours</span>
          </div>
        </div>
        <div className="ds-float-card ds-float-2">
          <div
            style={{
              width: 36,
              height: 36,
              borderRadius: "50%",
              overflow: "hidden",
              flexShrink: 0,
            }}
          >
            <svg viewBox="0 0 44 44">
              <circle cx="22" cy="22" r="22" fill="#1E5EFF" />
              <circle cx="22" cy="18" r="6.5" fill="#FFFFFF" />
              <path
                d="M22 26c-6 0-10 3-10 9v9h20v-9c0-6-4-9-10-9z"
                fill="#FFFFFF"
              />
            </svg>
          </div>
          <div>
            Figma. 7 screens
            <span className="ds-float-meta">Drafts in your workspace</span>
          </div>
        </div>
        <div className="ds-float-card ds-float-3">
          <div
            style={{
              width: 36,
              height: 36,
              borderRadius: "50%",
              overflow: "hidden",
              flexShrink: 0,
            }}
          >
            <svg viewBox="0 0 44 44">
              <circle cx="22" cy="22" r="22" fill="#1E5EFF" />
              <circle cx="22" cy="18" r="6.5" fill="#FFFFFF" />
              <path
                d="M22 26c-6 0-10 3-10 9v9h20v-9c0-6-4-9-10-9z"
                fill="#FFFFFF"
              />
            </svg>
          </div>
          <div>
            PM. Designer
            <span className="ds-float-meta">Online · replies &lt; 1h</span>
          </div>
        </div>
        <div className="ds-float-card ds-float-4">
          <span className="ds-float-check">
            <svg viewBox="0 0 14 14" fill="none" width="13" height="13">
              <path
                d="M2 7 L6 11 L12 3"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </span>
          <div>
            +34% conversion lift
            <span className="ds-float-meta">MdsyncNet · 2 weeks</span>
          </div>
        </div>
      </div>

      <div
        style={{
          textAlign: "center",
          position: "relative",
          maxWidth: 1080,
          margin: "0 auto",
          padding: "0 32px",
          zIndex: 1,
        }}
      >
        <SmileyIcon
          faceColor="#1E5EFF"
          featColor="#FFFFFF"
          spin
          size={90}
          className="ds-hero-smiley"
          style={
            { display: "block", margin: "0 auto 18px" } as React.CSSProperties
          }
        />

        <div className="ds-hero-pill">
          <span className="ds-hero-pulse" />
          Accepting new clients · 2 spots left this month
        </div>

        <h1 className="ds-h-mega" style={{ margin: "0 0 20px" }}>
          {words.map((w, i) => (
            <span key={i}>
              <span
                ref={(el) => {
                  wordRefs.current[i] = el;
                }}
                className={`ds-word${w.italic ? " ds-italic" : ""}`}
              >
                {w.text}
              </span>
              {i === 1 ? <br /> : " "}
            </span>
          ))}
        </h1>

        <p className="ds-hero-sub">
          Subscribe to DesignShare and get a senior design team on tap.{" "}
          <b>Unlimited requests</b>, ~48-hour delivery, and a flat monthly rate.{" "}
          <b>Pause or cancel</b> anytime.
        </p>

        <div
          style={{
            display: "flex",
            gap: 16,
            justifyContent: "center",
            alignItems: "center",
            flexWrap: "wrap",
            marginBottom: 24,
          }}
        >
          <CheckoutButton
            priceId={STRIPE_PLANS.MONTHLY}
            className="ds-btn ds-btn--lime ds-btn--lg"
          >
            Join the club — $3,495/mo
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path
                d="M1 7h12m0 0L8 2m5 5L8 12"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </CheckoutButton>
          <a href="#work" className="ds-btn-text">
            See the work →
          </a>
        </div>

        <div className="ds-hero-trust">
          <span className="ds-hero-stars" aria-label="4.9 of 5 stars">
            {Array.from({ length: 5 }).map((_, i) => (
              <StarIcon key={i} />
            ))}
          </span>
          <span>
            <b>4.9</b> on Trustpilot
          </span>
          <span className="ds-trust-sep" />
          <span>
            <b>315+</b> projects shipped
          </span>
          <span className="ds-trust-sep" />
          <span>
            <b>170+</b> founders served
          </span>
        </div>
      </div>
    </section>
  );
}