"use client";

import { useLucideIcons } from "@/hooks/useLucideIcons";

/* -------------------------------------------------------------------------- */
/* TypeGrid — icon card grid                                                  */
/* -------------------------------------------------------------------------- */

export interface TypeCard {
  icon: string;
  title: string;
  description: string;
  variant?: "green" | "sand";
}

export function TypeGrid({ cards }: { cards: ReadonlyArray<TypeCard> }) {
  useLucideIcons();
  return (
    <div className="type-grid">
      {cards.map((card) => (
        <div key={card.title} className={`type-card${card.variant ? ` ${card.variant}` : ""}`}>
          <div className="ic">
            <i data-lucide={card.icon} />
          </div>
          <h3>{card.title}</h3>
          <p>{card.description}</p>
        </div>
      ))}
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* OfferGrid — numbered offer rows                                            */
/* -------------------------------------------------------------------------- */

export interface OfferItem {
  num: string;
  title: string;
  description: string;
  variant?: "green";
}

export function OfferGrid({ items }: { items: ReadonlyArray<OfferItem> }) {
  return (
    <div className="offer-grid">
      {items.map((item) => (
        <div key={item.num} className={`offer${item.variant ? ` ${item.variant}` : ""}`}>
          <span className="n">{item.num}</span>
          <div>
            <div className="ttl">{item.title}</div>
            <p className="desc">{item.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* ChipList — icon chips                                                       */
/* -------------------------------------------------------------------------- */

export interface Chip {
  icon: string;
  label: string;
}

interface ChipListProps {
  chips: ReadonlyArray<Chip>;
  centered?: boolean;
  accent?: "purple" | "green";
}

export function ChipList({ chips, centered = true, accent = "purple" }: ChipListProps) {
  useLucideIcons();
  const className = accent === "green" ? "chip-list green" : "chip-list";
  return (
    <div className={className} style={centered ? { justifyContent: "center" } : undefined}>
      {chips.map((chip) => (
        <span key={chip.label} className="chip">
          <i data-lucide={chip.icon} />
          {chip.label}
        </span>
      ))}
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* FeatureList — tick list                                                     */
/* -------------------------------------------------------------------------- */

export interface FeatureItem {
  title: string;
  description: string;
}

interface FeatureListProps {
  items: ReadonlyArray<FeatureItem>;
  accent?: "purple" | "green";
}

export function FeatureList({ items, accent }: FeatureListProps) {
  useLucideIcons();
  const className = accent ? `feature-list ${accent}` : "feature-list";
  return (
    <ul className={className}>
      {items.map((item) => (
        <li key={item.title}>
          <span className="tick">
            <i data-lucide="check" />
          </span>
          <div>
            <b>{item.title}</b>
            <small>{item.description}</small>
          </div>
        </li>
      ))}
    </ul>
  );
}

/* -------------------------------------------------------------------------- */
/* SplitIntro — left-headline + right-content layout used by many `.sec`s     */
/* -------------------------------------------------------------------------- */

interface SplitIntroProps {
  eyebrow: string;
  heading: React.ReactNode;
  lede?: string;
  accent?: "purple" | "green";
  children: React.ReactNode;
}

export function SplitIntro({ eyebrow, heading, lede, accent = "purple", children }: SplitIntroProps) {
  const accentClass = accent === "green" ? " green" : "";
  return (
    <div className="split-intro">
      <div className="split-intro__lead">
        <span className={`eyebrow${accentClass}`}>
          <span className="pip" />
          {eyebrow}
        </span>
        <h2 className={`h-section${accentClass}`}>{heading}</h2>
        {lede && <p className="lede">{lede}</p>}
      </div>
      <div className="split-intro__body">{children}</div>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* SecWrap — generic `<section class="sec">` with optional inline styles      */
/* -------------------------------------------------------------------------- */

interface SecWrapProps {
  className?: string;
  style?: React.CSSProperties;
  screenLabel?: string;
  id?: string;
  children: React.ReactNode;
}

export function SecWrap({ className = "sec", style, screenLabel, id, children }: SecWrapProps) {
  return (
    <section className={className} id={id} style={style} data-screen-label={screenLabel}>
      <div className="wrap">{children}</div>
    </section>
  );
}