// SharedComponents.jsx — small primitives used across sections

// Central config for external links & CTAs. Update these in one place and they'll
// propagate to every "Get the app" button and App Store badge across the site.
const LINKS = {
  // Live App Store listing — confirmed 2025
  appStore: 'https://apps.apple.com/us/app/seat-connect/id6747786170',
  // Google Play — shown as "coming soon" until the app ships
  googlePlay: null,
};

// Primary download CTA label used across the site. Tested variations:
//   "Get the app"       — punchy, conversational (current default)
//   "Download the app"  — more literal, action-forward
//   "Get SeatConnect"   — brand-forward, strongest for top-funnel
const CTA_LABEL = 'Get the app';

const Logo = ({ height = 24 }) => (
  <img src="assets/logo.png" alt="SeatConnect" style={{
    height, width: 'auto', display: 'block',
    filter: 'var(--logo-filter, none)',
  }}/>
);

const Nav = () => {
  const links = [
    { label: 'Buy Tickets', href: '#how-it-works' },
    { label: 'Sell Tickets', href: '#marketplace-types' },
    { label: 'Team Hubs', href: '#team-hubs' },
    { label: 'Trust & Safety', href: '#trust' },
    { label: 'About', href: '#fan-cards' },
  ];
  return (
    <header className="sc-nav" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.78)',
      backdropFilter: 'blur(18px) saturate(160%)',
      WebkitBackdropFilter: 'blur(18px) saturate(160%)',
      borderBottom: 'none',
      boxShadow: '0 1px 0 rgba(255,255,255,0.5) inset',
    }}>
      <div className="container sc-nav-inner" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 68, gap: 12,
      }}>
        <Logo />
        <nav className="sc-nav-links" style={{ display: 'flex', gap: 32 }}>
          {links.map(l => (
            <a key={l.label} href={l.href} style={{
              fontSize: 14, color: 'var(--ink-2)', textDecoration: 'none',
              fontWeight: 500, transition: 'color 0.2s',
            }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-2)'}
            >{l.label}</a>
          ))}
        </nav>
        <div className="sc-nav-cta" style={{ display: 'flex', gap: 10, alignItems: 'center', flexShrink: 0 }}>
          <a href={LINKS.appStore} target="_blank" rel="noopener" className="btn sc-nav-cta-btn" style={{
            padding: '10px 18px', fontSize: 14,
            background: 'var(--accent)', color: '#fff',
            boxShadow: '0 6px 16px -4px rgba(107, 61, 232, 0.35)',
            whiteSpace: 'nowrap',
          }}>
            {CTA_LABEL}
          </a>
        </div>
      </div>
      {/* Soft gradient bleed — blends the nav's white into whatever section is below (lavender hero, etc.) */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: 0, right: 0, top: '100%',
        height: 32,
        background: 'linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0))',
        pointerEvents: 'none',
      }}/>
    </header>
  );
};

const AppStoreBadge = ({ variant = 'apple' }) => {
  const isGoogle = variant !== 'apple';
  const href = isGoogle ? null : LINKS.appStore;
  const Tag = isGoogle ? 'div' : 'a';
  const linkProps = isGoogle
    ? { title: 'Coming soon to Google Play', 'aria-disabled': 'true' }
    : { href, target: '_blank', rel: 'noopener' };
  return (
    <Tag
      {...linkProps}
      className="sc-app-badge"
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '10px 18px 10px 16px',
        background: 'var(--accent)', color: '#ffffff',
        borderRadius: 12,
        cursor: isGoogle ? 'not-allowed' : 'pointer',
        textDecoration: 'none',
        border: '1.5px solid var(--accent)',
        boxShadow: '0 6px 16px -4px rgba(107, 61, 232, 0.35)',
        minWidth: 200,
        justifyContent: 'flex-start',
      }}
    >
      {variant === 'apple' ? (
        <svg width="22" height="24" viewBox="0 0 22 24" fill="currentColor">
          <path d="M18.1 12.9c0-3 2.4-4.4 2.5-4.5-1.4-2-3.5-2.3-4.3-2.3-1.8-.2-3.5 1.1-4.5 1.1s-2.4-1-3.9-1c-2 0-3.9 1.2-5 3-2.1 3.7-.5 9.1 1.5 12 1 1.5 2.2 3.1 3.7 3 1.5-.1 2.1-.9 3.9-.9s2.3.9 3.9.9 2.6-1.5 3.6-2.9c1.1-1.7 1.6-3.3 1.6-3.4-.1-.1-3-1.2-3-4.9zM15.3 4.5c.8-1 1.4-2.4 1.2-3.8-1.2.1-2.6.8-3.4 1.8-.8 1-1.5 2.4-1.3 3.8 1.3.1 2.7-.7 3.5-1.8z" />
        </svg>
      ) : (
        <svg width="22" height="24" viewBox="0 0 22 24" fill="currentColor">
          <path d="M2 2v20l10-10L2 2z" opacity="0.9"/>
          <path d="M2 2l10 10 4-2.5L2 2z" opacity="0.7"/>
          <path d="M2 22l14-7.5-4-2.5L2 22z" opacity="0.5"/>
        </svg>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
        <span style={{ fontSize: 10, opacity: 0.85, fontWeight: 400, letterSpacing: isGoogle ? '0.04em' : 0 }}>
          {isGoogle ? 'Coming soon to' : 'Download on the'}
        </span>
        <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>
          {isGoogle ? 'Google Play' : 'App Store'}
        </span>
      </div>
    </Tag>
  );
};

// Placeholder image with striped pattern (per aesthetic guidance)
const Placeholder = ({ w = '100%', h = 200, label, style = {}, rounded = 12, tone = 'warm' }) => {
  const bg = tone === 'dark' ? '#1a1a1a' : 'var(--bg-2)';
  const stripe = tone === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.04)';
  const textC = tone === 'dark' ? '#999' : 'var(--ink-4)';
  return (
    <div style={{
      width: w, height: h, borderRadius: rounded,
      background: `repeating-linear-gradient(-45deg, ${bg} 0 10px, ${stripe} 10px 11px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: textC, fontFamily: 'var(--font-mono)', fontSize: 11,
      border: '1px solid var(--line)',
      textTransform: 'uppercase', letterSpacing: '0.1em',
      ...style,
    }}>
      {label}
    </div>
  );
};

// Verified check badge
const VerifiedBadge = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M8 1l1.8 1.3 2.2-.2.5 2.2 1.7 1.4-.9 2 .9 2-1.7 1.4-.5 2.2-2.2-.2L8 14.4 6.2 13.1 4 13.3l-.5-2.2L1.8 9.7l.9-2-.9-2L3.5 4.3 4 2.1l2.2.2L8 1z"
      fill="var(--accent)" />
    <path d="M5.5 8l1.8 1.8L10.8 6" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

Object.assign(window, { Logo, Nav, AppStoreBadge, Placeholder, VerifiedBadge });