// Shared primitive components for the SCN2A Australia site prototype.

// -------- Wordmark --------
function Wordmark({ variant = 'dark', size = 'md', descriptor = true }) {
 const sizes = {
 sm: { primary: 14, descriptor: 9 },
 md: { primary: 18, descriptor: 10 },
 lg: { primary: 28, descriptor: 12 },
 xl: { primary: 40, descriptor: 14 },
 };
 const s = sizes[size];
 const primary = variant === 'light' ? '#FFFFFF' : '#0D1B2A';
 const descriptorColor = variant === 'light' ? 'rgba(255,255,255,0.85)' : '#0D1B2A';
 return (
 <div style={{ display: 'inline-flex', flexDirection: 'column', lineHeight: 1, fontFamily: "'Plus Jakarta Sans','Inter',sans-serif" }}>
 <span style={{ fontWeight: 800, fontSize: s.primary, letterSpacing: '0.04em', color: primary }}>
 SCN2A AUSTRALIA
 </span>
 {descriptor && (
 <span style={{
 fontSize: s.descriptor, fontWeight: 600, letterSpacing: '0.22em',
 textTransform: 'uppercase', color: descriptorColor, marginTop: Math.max(3, s.primary * 0.2),
 }}>
 Research · Advocacy · Education
 </span>
 )}
 </div>
 );
}

// -------- Button --------
function Button({ variant = 'primary', size = 'md', children, onClick, icon, type = 'button', as, href, full, target, rel }) {
 const base = {
 fontFamily: "'Plus Jakarta Sans','Inter',sans-serif", fontWeight: 700,
 border: 0, cursor: 'pointer',
 borderRadius: 5,
 display: 'inline-flex', alignItems: 'center', gap: 8, lineHeight: 1,
 letterSpacing: '0.01em', textDecoration: 'none',
 transition: 'background 120ms cubic-bezier(0.4,0,0.2,1), color 120ms, border-color 120ms',
 width: full ? '100%' : undefined,
 justifyContent: full ? 'center' : undefined,
 };
 const sizes = {
 sm: { fontSize: 13, padding: '9px 14px' },
 md: { fontSize: 15, padding: '11px 20px' },
 lg: { fontSize: 16, padding: '14px 26px' },
 };
 const variants = {
 primary: { background: '#1E3A6E', color: '#fff' },
 coral: { background: '#8E3B5E', color: '#fff' },
 mulberry: { background: '#8E3B5E', color: '#fff' },
 navy: { background: '#1E3A6E', color: '#fff' },
 onTeal: { background: '#fff', color: '#0D1B2A' },
 outline: { background: 'transparent', color: '#0D1B2A', border: '1.5px solid #0D1B2A' },
 outlineLight: { background: 'transparent', color: '#fff', border: '1.5px solid rgba(255,255,255,0.6)' },
 ghost: { background: 'transparent', color: '#0D1B2A', padding: '11px 4px' },
 };
 const [hover, setHover] = React.useState(false);
 const hovers = {
 primary: { background: '#16305C' },
 coral: { background: '#76304D' },
 mulberry: { background: '#76304D' },
 navy: { background: '#16305C' },
 onTeal: { background: '#F7F4F0' },
 outline: { background: '#E8E3DA' },
 outlineLight: { background: 'rgba(255,255,255,0.10)', borderColor: '#fff' },
 ghost: { color: '#8E3B5E' },
 };
 const sz = sizes[size];
 if (variant === 'outline' || variant === 'outlineLight') {
 // compensate for 1.5px border to keep height stable
 const [py, px] = sz.padding.split(' ').map(s => parseInt(s));
 sz.padding = `${py - 1.5}px ${px - 1.5}px`;
 }
 const Tag = as === 'a' ? 'a' : 'button';
 return (
 <Tag
 type={Tag === 'button' ? type : undefined}
 href={Tag === 'a' ? (href || '#') : undefined}
 target={Tag === 'a' ? target : undefined}
 rel={Tag === 'a' ? (rel || (target === '_blank' ? 'noopener' : undefined)) : undefined}
 onClick={onClick}
 onMouseEnter={() => setHover(true)}
 onMouseLeave={() => setHover(false)}
 style={{ ...base, ...sz, ...variants[variant], ...(hover ? hovers[variant] : {}) }}>
 {icon && <i data-lucide={icon} style={{ width: 16, height: 16 }} />}
 {children}
 </Tag>
 );
}

// -------- NetworkMotif --------
function NetworkMotif({ opacity = 0.18, height = '100%', stroke = '#0D1B2A', dense = false }) {
 const arcs = dense ? (
 <g fill="none" stroke={stroke} strokeWidth="1.2">
 <path d="M -20 320 Q 180 80 380 240 T 780 180 T 1240 280" />
 <path d="M -20 200 Q 220 360 460 220 T 880 280 T 1240 140" />
 <path d="M -20 80 Q 200 240 440 120 T 840 200 T 1240 60" />
 <path d="M -20 260 Q 240 60 480 320 T 920 140 T 1240 200" />
 <path d="M -20 140 Q 200 320 420 60 T 820 320 T 1240 100" />
 </g>
 ) : (
 <g fill="none" stroke={stroke} strokeWidth="1.4">
 <path d="M -20 320 Q 180 80 380 240 T 780 180 T 1240 280" />
 <path d="M -20 200 Q 220 360 460 220 T 880 280 T 1240 140" />
 <path d="M -20 80 Q 200 240 440 120 T 840 200 T 1240 60" />
 </g>
 );
 return (
 <svg viewBox="0 0 1200 400" preserveAspectRatio="none" width="100%" height={height}
 style={{ position: 'absolute', inset: 0, opacity, pointerEvents: 'none' }}>
 {arcs}
 <g fill={stroke}>
 <circle cx="120" cy="220" r="3.5" />
 <circle cx="280" cy="160" r="3.5" />
 <circle cx="440" cy="200" r="3.5" />
 <circle cx="600" cy="140" r="3.5" />
 <circle cx="780" cy="220" r="3.5" />
 <circle cx="960" cy="170" r="3.5" />
 <circle cx="1120" cy="220" r="3.5" />
 </g>
 </svg>
 );
}

// -------- Callout --------
function Callout({ kind = 'definition', label, children, maxWidth }) {
 const styles = {
 definition: { bg: '#E8E3DA', fg: '#0D1B2A' },
 alert: { bg: '#E8E3DA', fg: '#8E3B5E' },
 slate: { bg: '#F7F4F0', fg: '#0D1B2A' },
 }[kind];
 return (
 <div style={{
 background: styles.bg, borderRadius: 0,
 padding: '20px 24px', color: '#0D1B2A', maxWidth: maxWidth || 820,
 borderLeft: `4px solid ${styles.fg}`,
 }}>
 {label && <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: styles.fg }}>{label}</div>}
 <div style={{ marginTop: label ? 6 : 0, fontSize: 16, lineHeight: 1.6 }}>{children}</div>
 </div>
 );
}

// -------- Eyebrow + Section Heading helpers --------
function SectionHeading({ eyebrow, title, kicker, align = 'left', maxWidth = 760, accent = 'teal' }) {
 return (
 <div style={{ maxWidth, textAlign: align, margin: align === 'center' ? '0 auto' : undefined }}>
 {eyebrow && <div className="eyebrow" style={{ color: accent === 'coral' ? '#8E3B5E' : '#0D1B2A' }}>{eyebrow}</div>}
 <h2 style={{
 fontSize: 'clamp(28px, 3.4vw, 38px)', fontWeight: 700, color: '#0D1B2A',
 margin: '12px 0 16px', lineHeight: 1.2, letterSpacing: '-0.01em',
 }}>{title}</h2>
 {kicker && <p style={{ fontSize: 17, lineHeight: 1.6, color: '#6B6659', margin: 0, maxWidth: 620 }}>{kicker}</p>}
 <hr className={accent === 'coral' ? 'rule-coral' : 'rule-teal'} style={{ marginTop: 20 }} />
 </div>
 );
}

// -------- Photo helpers --------
const PHOTO = {
 international: 'assets/photography/team-portrait-outdoor-international.jpg',
 conferenceUNSW: 'assets/photography/conference-speaker-unsw.jpg',
 meetupHobart: 'assets/photography/epilepsy-meeting-hobart.jpg',
 meetupIndoor: 'assets/photography/community-meetup-indoor.jpg',
 advocacy: 'assets/photography/advocacy-group-outdoor.jpg',
 teamIndoor: 'assets/photography/team-portrait-indoor.jpg',
 luminescePanel: 'assets/photography/luminesce-alliance-panel.jpg',
 luminescePortrait: 'assets/photography/luminesce-alliance-portrait.jpg',
 deta: 'assets/photography/deta-conference-2025.jpg',
 familyZoo: 'assets/photography/family-zoo-portrait.jpeg',
 rainforestSelfie: 'assets/photography/rainforest-selfie.jpeg',
 familyCare: 'assets/photography/family-hospital-three-gen.jpeg',
 cliniciansGroup: 'assets/photography/clinicians-researchers-group.jpg',
 familiesCarers: 'assets/photography/families-carers-selfie.jpg',
 familyStory: 'assets/photography/family-story-portrait.jpg',
 familyStoryFeature: 'assets/photography/family-story-marathon.jpg',
 homeHero: 'assets/photography/family-cafe-group.jpeg',
};

// -------- Logo lockup (compact mark + word) --------
// A compact, neutral nodes-and-arcs mark to pair with the wordmark.
function LogoMark({ size = 36, color = '#0D1B2A' }) {
 return (
 <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
 <circle cx="8" cy="20" r="3" fill={color} />
 <circle cx="20" cy="8" r="3" fill={color} />
 <circle cx="32" cy="20" r="3" fill={color} />
 <circle cx="20" cy="32" r="3" fill={color} />
 <circle cx="20" cy="20" r="2.2" fill={color} />
 <path d="M8 20 L20 8 L32 20 L20 32 Z" stroke={color} strokeWidth="1.4" />
 <path d="M8 20 L32 20 M20 8 L20 32" stroke={color} strokeWidth="1.4" opacity="0.5" />
 </svg>
 );
}

function Logo({ variant = 'dark', size = 'md', descriptor = true }) {
 // v1.1 brand: wordmark-only lockup. The geometric LogoMark is retired.
 return <Wordmark variant={variant} size={size} descriptor={descriptor} />;
}

// Real-path href for a route id ('home' -> '/'). Keeps <a href> crawlable while
// onClick still drives client-side navigation.
function hrefFor(route) { return (!route || route === 'home') ? '/' : '/' + route; }

// Registry / "Join" sign-up link — defined in ONE place so it is a single-line
// change. TODO: replace with the Mailchimp signup URL when supplied.
const REGISTRY_SIGNUP_URL = 'https://scn2aaustralia.org/join/';

Object.assign(window, { Wordmark, Button, NetworkMotif, Callout, SectionHeading, PHOTO, LogoMark, Logo, hrefFor, REGISTRY_SIGNUP_URL });