// Hub view — Linktree-style personal brand hub with 3 style variants

const HUB_LINKS = [
  {
    key: 'call',
    label: 'Book an intro call',
    sub: '30-min chemistry call',
    href: 'https://cal.com/megan-hunter',
    tag: 'CONNECT',
    featured: true,
  },
  {
    key: 'consultant',
    label: 'Fractional CX & Product Leadership',
    sub: 'Financial services & women\'s health',
    href: '/makingitmatter',
    tag: 'WORK TOGETHER',
    onClick: 'switchToFull',
  },
  {
    key: 'nadi',
    label: 'Nadi',
    sub: "Founder · Women's health",
    href: 'https://nadi.health',
    tag: 'EXPLORE MENSTRUAL HEALTH',
  },
  {
    key: 'mentor',
    label: 'Mentor & Coach',
    sub: 'For individuals growing into leadership',
    href: 'https://mentorcruise.com/mentor/meganhunter/',
    tag: 'GROW',
  },
  {
    key: 'podcast',
    label: 'The Making It Matter Podcast',
    sub: 'Founders & leaders on what matters',
    href: 'https://www.youtube.com/@making.it.matter',
    tag: 'LISTEN',
  },
  {
    key: 'substack',
    label: "Megan's Substack",
    sub: "Menstrual cycles · Travel · My perspectives",
    href: 'https://substack.com/@megannnhunter',
    tag: 'READ',
  },
];

function Hub({ hubStyle = 'editorial', logoVariant = 'a', onSwitchToFull }) {
  if (hubStyle === 'magazine') return <HubMagazine logoVariant={logoVariant} onSwitchToFull={onSwitchToFull} />;
  if (hubStyle === 'monogram') return <HubMonogram logoVariant={logoVariant} onSwitchToFull={onSwitchToFull} />;
  return <HubEditorial logoVariant={logoVariant} onSwitchToFull={onSwitchToFull} />;
}

// — Editorial variant: photo + stacked link cards, lots of whitespace
function HubEditorial({ logoVariant, onSwitchToFull }) {
  return (
    <div className="hub hub-editorial">
      <div className="hub-container">
        <div className="hub-head">
          <Logo variant={logoVariant} size="md" />
          <div className="hub-head-right">
            <span className="mono" style={{ color: 'var(--body-soft)' }}>Europe · UAE · Fully remote</span>
          </div>
        </div>

        <div className="hub-hero">
          <div className="hub-portrait">
            <img src="assets/megan-portrait.png" alt="Megan Hunter" draggable="false" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%', display: 'block', pointerEvents: 'none', userSelect: 'none' }} />
          </div>
          <div className="hub-hero-text">
            <h1 className="hub-name">
              Megan Hunter<span style={{ color: 'var(--navy)' }}>.</span>
            </h1>
            <p className="hub-bio">
              Fractional CX and product leadership for financial services and women's health teams. Founder at <a href="https://nadi.health" target="_blank" rel="noopener noreferrer">Nadi</a>. Board Member. Podcast Host.
            </p>
          </div>
        </div>

        <div className="hub-links">
          {HUB_LINKS.map(l => (
            <HubLink key={l.key} {...l} onSwitchToFull={onSwitchToFull} />
          ))}
        </div>

        <div className="hub-foot">
          <div className="mono" style={{ color: 'var(--body-soft)' }}>Trusted by</div>
          <div className="hub-trusted">
            {[
              ['Phoenix Group', 'FTSE 100'],
              ['Standard Life', 'FTSE 100'],
              ['Bettii', "Women's Health Start Up"],
              ['Inclusive Outcomes', 'CX & Inclusive Design'],
              ['Octopus Money', 'Financial Coaching'],
              ['Africa Tech Summit', 'Pan-African Tech & Investment'],
              ['Fihri Foundation', 'Period Poverty Nonprofit'],
              ['CHAI', 'Anti-Poverty Charity'],
              ['MentorCruise', ''],
            ].map(([n, ctx]) => (
              <span key={n} className="logo-bar-item" style={{ flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}><span className="dot"/>{n}</span>
                {ctx && <span style={{ color: 'var(--body-soft)', fontFamily: "'Lato', sans-serif", fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{ctx}</span>}
              </span>
            ))}
          </div>
          <div className="hub-social">
            <a href="https://www.linkedin.com/in/meganahunter/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M20.4 3H3.6C3.3 3 3 3.3 3 3.6v16.8c0 .3.3.6.6.6h16.8c.3 0 .6-.3.6-.6V3.6c0-.3-.3-.6-.6-.6zM8.3 18.3H5.7V9.8h2.6v8.5zM7 8.6C6.2 8.6 5.5 8 5.5 7.1s.6-1.5 1.5-1.5 1.5.6 1.5 1.5-.6 1.5-1.5 1.5zm11.3 9.7h-2.6v-4.1c0-1 0-2.2-1.4-2.2s-1.6 1.1-1.6 2.2v4.2h-2.6V9.8h2.5v1.1c.4-.7 1.2-1.4 2.5-1.4 2.7 0 3.2 1.8 3.2 4.1v4.7z"/></svg>
            </a>
            <a href="mailto:megan@brawconsultancy.com" aria-label="Email">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/></svg>
            </a>
          </div>
          <div style={{ fontSize: 11, color: 'var(--body-soft)', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.1em' }}>Megan Hunter · Founder, Nadi · Consultant, Making It Matter · © 2026</div>
        </div>
      </div>
    </div>
  );
}

// — Magazine variant: bold masthead, rules, numbered
function HubMagazine({ logoVariant, onSwitchToFull }) {
  return (
    <div className="hub hub-magazine">
      <div className="hub-container">
        <div className="hub-masthead">
          <div className="mono" style={{ color: 'var(--navy)' }}>VOL · I · ISSUE 01</div>
          <div className="mono" style={{ color: 'var(--body-soft)' }}>EST. 2025 · EDINBURGH</div>
        </div>
        <div className="hub-rule thick"/>

        <h1 className="mag-title">
          Megan Hunter<span style={{ color: 'var(--navy)' }}>.</span>
        </h1>
        <div className="mag-subtitle">
          CONSULTANT · FOUNDER · HOST
        </div>

        <div className="hub-rule"/>

        <div className="mag-lede">
          <div className="mono" style={{ color: 'var(--navy)' }}>// A PERSONAL BRAND HUB</div>
          <p>
            Senior customer, product and operations support for teams in financial services and women's health, from FTSE 100 experience through to scale-up and enterprise advisory. Built on <span className="serif-it" style={{ color: 'var(--navy)' }}>Making It Matter</span>.
          </p>
        </div>

        <div className="hub-rule"/>

        <div className="mag-grid">
          {HUB_LINKS.map((l, i) => (
            <a href={l.href}
              onClick={(e) => {
                if (l.onClick === 'switchToFull') { e.preventDefault(); onSwitchToFull?.(); }
              }}
              {...(/^https?:/i.test(l.href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
              key={l.key} className={`mag-card ${l.featured ? 'featured' : ''}`}>
              <div className="mag-num">0{i+1}</div>
              <div className="mag-tag">{l.tag}</div>
              <h3 className="mag-label">{l.label}</h3>
              <p className="mag-sub">{l.sub}</p>
              <div className="mag-arrow">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </div>
            </a>
          ))}
        </div>

        <div className="hub-rule"/>

        <div className="mag-foot">
          <div>
            <div className="mono" style={{ color: 'var(--body-soft)' }}>CONTACT</div>
            <a href="mailto:megan@brawconsultancy.com" style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: 'var(--ink)' }}>megan@brawconsultancy.com</a>
          </div>
          <div>
            <div className="mono" style={{ color: 'var(--body-soft)' }}>ELSEWHERE</div>
            <a href="https://www.linkedin.com/in/meganahunter/" target="_blank" rel="noopener noreferrer" style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: 'var(--ink)' }}>LinkedIn →</a>
          </div>
          <div>
            <div className="mono" style={{ color: 'var(--body-soft)' }}>TAGLINE</div>
            <div className="serif-it" style={{ fontSize: 22, color: 'var(--navy)' }}>Making It Matter.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// — Monogram variant: giant M. mark, minimal premium
function HubMonogram({ logoVariant, onSwitchToFull }) {
  return (
    <div className="hub hub-monogram">
      <div className="mono-giant" aria-hidden>M<span style={{ color: 'var(--navy)' }}>.</span></div>
      <div className="hub-container">
        <div className="hub-head">
          <div className="mono" style={{ color: 'var(--body-soft)' }}>MEGAN HUNTER</div>
          <div className="mono" style={{ color: 'var(--body-soft)' }}>MAKING IT MATTER</div>
        </div>

        <div className="monogram-center">
          <div className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>Fractional CX & Product Leadership · Founder · Host</div>
          <h1 style={{ fontSize: 'clamp(52px, 7vw, 104px)', letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 28, textWrap: 'balance' }}>
            Making it matter<span style={{ color: 'var(--navy)' }}>.</span> <br/>One engagement at a time.
          </h1>
          <p style={{ fontSize: 19, maxWidth: 560, margin: '0 auto', color: 'var(--body)' }}>
            A hub for everything Megan. Consulting, podcast, venture, mentorship, writing.
          </p>
        </div>

        <div className="monogram-links">
          {HUB_LINKS.map(l => (
            <HubLink key={l.key} {...l} variant="monogram" onSwitchToFull={onSwitchToFull} />
          ))}
        </div>

        <div className="monogram-foot">
          <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: 'var(--body-soft)' }}>
            Let's make it matter, together.
          </div>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href="https://www.linkedin.com/in/meganahunter/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink)' }}>
              <svg width="34" height="34" viewBox="0 0 24 24" fill="currentColor"><path d="M20.4 3H3.6C3.3 3 3 3.3 3 3.6v16.8c0 .3.3.6.6.6h16.8c.3 0 .6-.3.6-.6V3.6c0-.3-.3-.6-.6-.6zM8.3 18.3H5.7V9.8h2.6v8.5zM7 8.6C6.2 8.6 5.5 8 5.5 7.1s.6-1.5 1.5-1.5 1.5.6 1.5 1.5-.6 1.5-1.5 1.5zm11.3 9.7h-2.6v-4.1c0-1 0-2.2-1.4-2.2s-1.6 1.1-1.6 2.2v4.2h-2.6V9.8h2.5v1.1c.4-.7 1.2-1.4 2.5-1.4 2.7 0 3.2 1.8 3.2 4.1v4.7z"/></svg>
            </a>
            <a href="mailto:megan@brawconsultancy.com" style={{ color: 'var(--ink)' }}>
              <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/></svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

// Shared link card
function HubLink({ label, sub, href, tag, featured, onClick, onSwitchToFull, variant }) {
  const handle = (e) => {
    if (onClick === 'switchToFull') {
      e.preventDefault();
      onSwitchToFull?.();
    }
  };
  const isExternal = /^https?:/i.test(href);
  return (
    <a href={href} className={`hub-link ${featured ? 'featured' : ''} ${variant ? 'variant-' + variant : ''}`} onClick={handle}
       {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
      <div className="hub-link-tag mono">{tag}</div>
      <div className="hub-link-main">
        <div className="hub-link-label">{label}</div>
        <div className="hub-link-sub">{sub}</div>
      </div>
      <div className="hub-link-arrow">
        <svg width="18" height="18" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
      </div>
    </a>
  );
}

window.Hub = Hub;