import React from 'react';
import { ArrowUpRight } from 'lucide-react';

interface PillProps {
  to: string;
  children: React.ReactNode;
  variant?: 'primary' | 'accent' | 'outline' | 'outline-light';
  className?: string;
  arrow?: boolean;
  onClick?: () => void;
}

const pillVariants = {
  primary: 'bg-primary text-primary-foreground hover:bg-[#072C24] shadow-xs',
  accent: 'bg-accent text-accent-foreground hover:brightness-95 font-bold shadow-xs',
  outline: 'border border-border bg-card text-foreground hover:bg-secondary shadow-2xs',
  'outline-light': 'border border-primary-foreground/40 text-primary-foreground hover:bg-primary-foreground/10',
};

export function Pill({
  to,
  children,
  variant = 'primary',
  className = '',
  arrow = true,
  onClick,
}: PillProps) {
  const classes = `inline-flex items-center justify-center gap-2 min-h-[44px] rounded-full px-6 py-2.5 text-sm font-semibold transition cursor-pointer select-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ${pillVariants[variant]} ${className}`;

  const content = (
    <>
      <span>{children}</span>
      {arrow && (
        <ArrowUpRight
          className="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
          aria-hidden="true"
        />
      )}
    </>
  );

  if (to.startsWith('http')) {
    return (
      <a href={to} target="_blank" rel="noreferrer" className={classes} onClick={onClick}>
        {content}
      </a>
    );
  }

  // Handle SPA hash navigation
  return (
    <a
      href={`#${to}`}
      className={classes}
      onClick={(e) => {
        if (onClick) {
          e.preventDefault();
          onClick();
        }
      }}
    >
      {content}
    </a>
  );
}

export function Container({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return <div className={`mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 ${className}`}>{children}</div>;
}

export function Eyebrow({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return (
    <p className={`text-xs font-bold tracking-[0.15em] uppercase text-teal ${className}`}>
      {children}
    </p>
  );
}

export function CtaBanner() {
  return (
    <Container className="mt-16 mb-8">
      <div className="relative overflow-hidden bg-primary text-primary-foreground rounded-3xl p-8 md:p-12 flex flex-col md:flex-row md:items-center justify-between gap-6 shadow-md border border-primary/20">
        <div className="space-y-2">
          <Eyebrow className="text-accent">Empower Your Future</Eyebrow>
          <h2 className="text-3xl md:text-5xl font-bold leading-tight">
            Ready for your <span className="serif-accent text-accent">next skill?</span>
          </h2>
          <p className="text-sm md:text-base text-primary-foreground/80 max-w-lg">
            Explore 22 live online programmes, download detailed syllabi, or speak with an admissions advisor today.
          </p>
        </div>
        <div className="flex flex-wrap items-center gap-3 shrink-0">
          <Pill to="/programmes" variant="accent">
            Browse programmes
          </Pill>
          <Pill to="/contact?mode=guidance" variant="outline-light" arrow={false}>
            Speak with an advisor
          </Pill>
        </div>
      </div>
    </Container>
  );
}

export function PhotoHead({
  eyebrow,
  a,
  b,
  children,
  img,
  alt = '',
  block = 'bg-accent',
  accent = 'text-teal',
}: {
  eyebrow: string;
  a: string;
  b: string;
  children?: React.ReactNode;
  img: React.ReactNode;
  alt?: string;
  block?: string;
  accent?: string;
}) {
  return (
    <section className="mesh" aria-label={alt || `${a} ${b}`}>
      <Container className="pt-10 pb-14 grid gap-10 lg:grid-cols-12 items-center">
        <div className="lg:col-span-6 space-y-4">
          <Eyebrow>{eyebrow}</Eyebrow>
          <h1 className="text-3xl sm:text-5xl md:text-6xl font-bold leading-[1.05] mt-2 break-words text-foreground">
            {a} <span className={`serif-accent ${accent}`}>{b}</span>
          </h1>
          {children}
        </div>

        <div className="lg:col-span-6 relative">
          <div
            className={`absolute -top-3 -right-3 w-2/3 h-2/3 rounded-[2rem] rotate-3 ${block} opacity-30`}
            aria-hidden="true"
          />
          <div className="relative rounded-[2rem] overflow-hidden shadow-xl aspect-[16/10] bg-muted">
            {img}
          </div>
        </div>
      </Container>
    </section>
  );
}