// Hawaiian Style — UI Kit primitives
// Reusable building blocks shared across the marketing site.
// Loaded by Babel; all components exported to window so other scripts can use them.

const Pill = ({ variant = 'sun', size = 'md', as: As = 'a', href = '#', children, ...rest }) => {
  const variants = {
    sun: { background: 'var(--orange)', color: 'var(--paper)', boxShadow: '0 4px 0 var(--brown)' },
    brown: { background: 'var(--brown)', color: 'var(--paper)' },
    yellow: { background: 'var(--sun)', color: 'var(--brown)', boxShadow: '0 4px 0 var(--brown)' },
    ghost: { background: 'transparent', border: '1.8px solid var(--brown)', color: 'var(--brown)' },
    'ghost-paper': { background: 'transparent', border: '1.8px solid var(--paper)', color: 'var(--paper)' },
    paper: { background: 'var(--paper-soft)', color: 'var(--brown)', border: '1.8px solid var(--brown)' },
  };
  const sizes = {
    sm: { padding: '10px 16px', fontSize: '11px' },
    md: { padding: '13px 22px', fontSize: '12px' },
    lg: { padding: '16px 28px', fontSize: '13px' },
  };
  return (
    <As href={href}
      className={`hws-pill hws-pill-${variant}`}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        borderRadius: 999, fontFamily: 'var(--font-body)', fontWeight: 800,
        textTransform: 'uppercase', letterSpacing: '0.1em', cursor: 'pointer',
        transition: 'transform .15s, box-shadow .2s, background .2s, color .2s',
        textDecoration: 'none', border: 'none', whiteSpace: 'nowrap',
        ...variants[variant], ...sizes[size],
      }}
      {...rest}>
      {children}
    </As>
  );
};

const Eyebrow = ({ children, color = 'var(--brown-soft)', rule = true, style }) => (
  <span className="hws-eyebrow" style={{
    fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 11,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color, display: 'inline-flex', alignItems: 'center', gap: 10,
    ...style,
  }}>
    {rule && <span style={{ width: 28, height: 1.5, background: 'currentColor', display: 'inline-block' }} />}
    {children}
  </span>
);

// Anton headline with embedded script-accent. Pass children as JSX,
// use <span className="accent"> and <span className="scr"> for emphasis.
const Headline = ({ children, size = 'h2', color = 'var(--brown)', accentColor = 'var(--orange)', scriptRotate = -3 }) => {
  const sizes = {
    h1: 'clamp(72px, 9.5vw, 168px)',
    h2: 'clamp(56px, 6.4vw, 104px)',
    h3: 'clamp(32px, 4.4vw, 64px)',
    h4: '36px',
  };
  return (
    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 400,
      fontSize: sizes[size] || sizes.h2, lineHeight: 0.92,
      letterSpacing: '0.005em', textTransform: 'uppercase',
      margin: 0, color,
      '--accent': accentColor,
    }}>
      <style>{`
        .hws-headline .accent { color: ${accentColor}; }
        .hws-headline .scr {
          font-family: var(--font-script); text-transform: none;
          color: ${accentColor}; letter-spacing: 0;
          font-size: 0.82em; display: inline-block;
          transform: rotate(${scriptRotate}deg) translateY(-0.05em);
          line-height: 0.9;
        }
      `}</style>
      <span className="hws-headline">{children}</span>
    </h2>
  );
};

const Script = ({ children, rotate = -3, color = 'var(--orange)', size = 28, style }) => (
  <span style={{
    fontFamily: 'var(--font-script)', color, fontSize: size,
    transform: `rotate(${rotate}deg)`, display: 'inline-block',
    lineHeight: 0.9, letterSpacing: 0, ...style,
  }}>
    {children}
  </span>
);

const VintageStamp = ({ year, label, script, variant = 'brown', rotate = -10, size = 130 }) => {
  const variants = {
    brown: { background: 'var(--brown)', color: 'var(--paper)', yColor: 'var(--sun)', sColor: 'var(--paper)' },
    paper: { background: 'var(--paper-soft)', color: 'var(--brown)', yColor: 'var(--orange)', sColor: 'var(--brown)', border: '2.5px dashed var(--orange)' },
    sun: { background: 'var(--sun)', color: 'var(--brown)', yColor: 'var(--brown)', sColor: 'var(--brown)', border: '2.5px solid var(--brown)' },
  };
  const v = variants[variant];
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: v.background, color: v.color,
      display: 'grid', placeItems: 'center', textAlign: 'center',
      padding: 14, transform: `rotate(${rotate}deg)`,
      boxShadow: '0 8px 20px rgba(0,0,0,0.25)', border: v.border,
    }}>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: v.yColor, lineHeight: 1 }}>{year}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 8.5, letterSpacing: '0.18em', marginTop: 4, textTransform: 'uppercase' }}>{label}</div>
        {script && <div style={{ fontFamily: 'var(--font-script)', fontSize: 18, marginTop: 4, color: v.sColor }}>{script}</div>}
      </div>
    </div>
  );
};

const SectionHead = ({ eyebrow, title, right, style }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40,
    alignItems: 'end', marginBottom: 56, ...style,
  }}>
    <div>
      <Eyebrow>{eyebrow}</Eyebrow>
      <div style={{ marginTop: 18 }}>{title}</div>
    </div>
    {right && <div style={{ maxWidth: 320, color: 'var(--brown-soft)', fontSize: 15, lineHeight: 1.55 }}>{right}</div>}
  </div>
);

// Inline doodle SVGs — used in hero corners and decorative moments.
const Doodle = {
  Sun: ({ size = 100, color = 'var(--paper)', opacity = 0.55, spin = false }) => (
    <svg viewBox="0 0 100 100" width={size} height={size} fill="none" stroke={color}
      strokeWidth="2.5" strokeLinecap="round" opacity={opacity}
      style={{ animation: spin ? 'hws-spin 40s linear infinite' : 'none' }}>
      <circle cx="50" cy="50" r="14"/>
      <line x1="50" y1="6" x2="50" y2="18"/><line x1="50" y1="82" x2="50" y2="94"/>
      <line x1="6" y1="50" x2="18" y2="50"/><line x1="82" y1="50" x2="94" y2="50"/>
      <line x1="18" y1="18" x2="26" y2="26"/><line x1="74" y1="74" x2="82" y2="82"/>
      <line x1="82" y1="18" x2="74" y2="26"/><line x1="26" y1="74" x2="18" y2="82"/>
    </svg>
  ),
  Palm: ({ size = 70, color = 'var(--paper)', opacity = 0.45 }) => (
    <svg viewBox="0 0 60 80" width={size} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" opacity={opacity}>
      <path d="M30 78 L30 36"/>
      <path d="M30 36 Q 10 30 4 14"/><path d="M30 36 Q 50 30 56 14"/>
      <path d="M30 36 Q 16 22 10 6"/><path d="M30 36 Q 44 22 50 6"/>
      <path d="M30 36 Q 30 24 30 8"/>
    </svg>
  ),
  Shell: ({ size = 60, color = 'var(--paper)', opacity = 0.5 }) => (
    <svg viewBox="0 0 60 50" width={size} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" opacity={opacity}>
      <path d="M30 6 L4 44 L56 44 Z"/><path d="M30 6 L18 44"/>
      <path d="M30 6 L42 44"/><path d="M30 6 L30 44"/>
    </svg>
  ),
  Waves: ({ width = 80, color = 'var(--paper)', opacity = 0.6 }) => (
    <svg viewBox="0 0 80 30" width={width} fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" opacity={opacity}>
      <path d="M2 18 Q 14 6 26 18 T 50 18 T 78 18"/>
      <path d="M2 26 Q 14 14 26 26 T 50 26 T 78 26"/>
    </svg>
  ),
};

const FilmGrain = () => (
  <>
    <style>{`
      .hws-grain::before {
        content: ""; position: fixed; inset: 0; pointer-events: none;
        z-index: 9999; opacity: 0.24; mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      }
      .hws-grain::after {
        content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
        background-image: repeating-linear-gradient(0deg, rgba(61,47,35,0.02) 0 1px, transparent 1px 5px);
      }
      @keyframes hws-spin { to { transform: rotate(360deg); } }
      @keyframes hws-scroll { to { transform: translateX(-50%); } }
    `}</style>
  </>
);

Object.assign(window, { Pill, Eyebrow, Headline, Script, VintageStamp, SectionHead, Doodle, FilmGrain });