/* Components.jsx — Vy Group website UI kit */
const { useState } = React;

// ============================================================
// Atoms
// ============================================================

function Eyebrow({ children, color = '#8a6f3a' }) {
  return (
    <div style={{
      fontFamily: 'Inter, sans-serif',
      fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em',
      fontWeight: 600, color, marginBottom: 12,
    }}>{children}</div>
  );
}

function ChampagneRule({ width = 48, color = '#c2a05a', mt = 14, mb = 0 }) {
  return <div style={{ display: 'inline-block', width, height: 1, background: color, marginTop: mt, marginBottom: mb }} />;
}

function Button({ children, variant = 'primary', onClick, size = 'md', disabled = false, type }) {
  const sizes = { sm: { padding: '8px 16px', fontSize: 13 }, md: { padding: '11px 20px', fontSize: 14 }, lg: { padding: '14px 26px', fontSize: 15 } };
  const variants = {
    primary: { background: '#14161a', color: '#fbf8f3', border: 0 },
    outline: { background: 'transparent', color: '#14161a', border: '1px solid #3d424b' },
    accent:  { background: '#c2a05a', color: '#14161a', border: 0 },
    link:    { background: 'transparent', color: '#8a6f3a', border: 0, borderBottom: '1px solid #c2a05a', borderRadius: 0, padding: '11px 4px' },
  };
  return (
    <button type={type} onClick={onClick} disabled={disabled} style={{
      fontFamily: 'Inter, sans-serif', fontWeight: 500, borderRadius: 4,
      cursor: disabled ? 'wait' : 'pointer',
      opacity: disabled ? 0.6 : 1,
      transition: 'background 200ms cubic-bezier(0.22,0.61,0.36,1), color 200ms cubic-bezier(0.22,0.61,0.36,1), opacity 200ms',
      ...sizes[size], ...variants[variant],
    }}>{children}</button>
  );
}

function Logo({ size = 36 }) {
  return <img src="../../assets/logo-vy-group.png" alt="Vy Group" style={{ width: size, height: size, borderRadius: 4, objectFit: 'cover' }} />;
}

// ============================================================
// Site chrome
// ============================================================

function Header({ active = 'practices', onNav }) {
  const [open, setOpen] = useState(false);
  const items = [
    { id: 'practices', label: 'Practices' },
    { id: 'work', label: 'Work' },
    { id: 'perspectives', label: 'Perspectives' },
    { id: 'about', label: 'About' },
  ];
  const go = (id) => { setOpen(false); onNav?.(id); };
  // Lock body scroll while sheet is open + close on Escape
  React.useEffect(() => {
    if (open) {
      document.body.classList.add('vy-menu-open');
      const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
      document.addEventListener('keydown', onKey);
      return () => {
        document.body.classList.remove('vy-menu-open');
        document.removeEventListener('keydown', onKey);
      };
    }
  }, [open]);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(251,248,243,0.85)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid #ebe4d4',
    }}>
      <div className="vy-header-inner" style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 32, padding: '20px 32px' }}>
        <a onClick={() => go('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', textDecoration: 'none', borderBottom: 0, flex: '0 0 auto' }}>
          <Logo size={40} />
          <div>
            <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em', color: '#14161a', lineHeight: 1 }}>Vy Group</div>
            <div style={{ fontSize: 10, color: '#5a6069', fontStyle: 'italic', marginTop: 2 }}>Technology · Strategy · Design</div>
          </div>
        </a>
        <nav className="vy-header-nav" style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'center' }}>
          {items.map(it => (
            <a key={it.id} onClick={() => go(it.id)} style={{
              fontSize: 14, fontWeight: 500, cursor: 'pointer',
              color: active === it.id ? '#14161a' : '#3d424b',
              borderBottom: active === it.id ? '1px solid #c2a05a' : '1px solid transparent',
              paddingBottom: 2, textDecoration: 'none',
            }}>{it.label}</a>
          ))}
        </nav>
        <div className="vy-header-cta" style={{ marginLeft: 'auto' }}>
          <Button size="sm" onClick={() => go('contact')}>Get in touch</Button>
        </div>
        <button
          className="vy-header-menu"
          onClick={() => setOpen(o => !o)}
          aria-label="Open menu"
          style={{
            marginLeft: 'auto', display: 'none', alignItems: 'center', justifyContent: 'center',
            width: 44, height: 44, padding: 0, background: 'transparent', border: '1px solid #c2c6cc', borderRadius: 4, cursor: 'pointer',
          }}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#14161a" strokeWidth="1.5" strokeLinecap="round">
            {open ? (<><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></>) : (<><line x1="4" y1="7" x2="20" y2="7" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="17" x2="20" y2="17" /></>)}
          </svg>
        </button>
      </div>
      <div className={open ? 'vy-mobile-sheet open' : 'vy-mobile-sheet'} aria-hidden={!open}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 24, borderBottom: '1px solid #ebe4d4' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Logo size={36} />
            <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>Vy Group</div>
          </div>
          <button onClick={() => setOpen(false)} aria-label="Close" style={{ width: 44, height: 44, background: 'transparent', border: '1px solid #c2c6cc', borderRadius: 4, cursor: 'pointer' }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#14161a" strokeWidth="1.5" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></svg>
          </button>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', marginTop: 16 }}>
          {items.map(it => (
            <a key={it.id} onClick={() => go(it.id)} style={{
              fontFamily: 'Cormorant Garamond, serif', fontSize: 32, padding: '20px 0', borderBottom: '1px solid #ebe4d4',
              color: active === it.id ? '#8a6f3a' : '#14161a', fontStyle: active === it.id ? 'italic' : 'normal', cursor: 'pointer',
            }}>{it.label}</a>
          ))}
        </nav>
        <div style={{ marginTop: 'auto', paddingTop: 24 }}>
          <Button size="lg" onClick={() => go('contact')}>Get in touch</Button>
          <div style={{ marginTop: 24, fontSize: 13, color: '#5a6069' }}>
            info@vygroup.net<br />+1-470-888-7250
          </div>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer style={{ background: '#0c1320', color: '#9ba0a8', padding: '64px 32px 40px', marginTop: 96 }}>
      <div className="vy-grid-footer" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48 }}>
        <div>
          <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 28, fontWeight: 500, color: '#fbf8f3', letterSpacing: '-0.02em' }}>Vy Group, LLC</div>
          <ChampagneRule mt={12} mb={16} />
          <div style={{ fontSize: 14, lineHeight: 1.7, maxWidth: 360 }}>
            A boutique advisory for senior leaders. Technology, strategy, marketing &amp; design — partner-led, with a small number of engagements each year.
          </div>
        </div>
        <div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', color: '#d4b878', fontWeight: 600, marginBottom: 14 }}>Practices</div>
          {['Technology', 'Strategy', 'Marketing & Design'].map(x => (
            <div key={x} style={{ fontSize: 14, marginBottom: 8, color: '#c2c6cc' }}>{x}</div>
          ))}
        </div>
        <div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', color: '#d4b878', fontWeight: 600, marginBottom: 14 }}>Company</div>
          {['Work', 'Perspectives', 'About', 'Careers'].map(x => (
            <div key={x} style={{ fontSize: 14, marginBottom: 8, color: '#c2c6cc' }}>{x}</div>
          ))}
        </div>
        <div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', color: '#d4b878', fontWeight: 600, marginBottom: 14 }}>Reach us</div>
          <div style={{ fontSize: 14, marginBottom: 8, color: '#c2c6cc' }}>info@vygroup.net</div>
          <div style={{ fontSize: 14, color: '#c2c6cc' }}>+1-470-888-7250</div>
        </div>
      </div>
      <div className="vy-footer-bottom" style={{ maxWidth: 1200, margin: '48px auto 0', borderTop: '1px solid #1c2740', paddingTop: 20, fontSize: 12, color: '#5a6069', display: 'flex', justifyContent: 'space-between' }}>
        <div>© 2026 Vy Group, LLC. All rights reserved.</div>
        <div>Privacy · Terms</div>
      </div>
    </footer>
  );
}

// ============================================================
// Hero
// ============================================================

function Hero({ onNav }) {
  return (
    <section className="vy-hero" style={{ padding: '72px 32px 64px' }}>
      <div className="vy-grid-2" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <Eyebrow>Boutique advisory · partner-led</Eyebrow>
          <h1 className="vy-h1" style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontSize: 'clamp(44px, 5.5vw, 80px)', lineHeight: 1.05, letterSpacing: '-0.02em',
            fontWeight: 500, color: '#14161a', margin: '12px 0 0',
          }}>
            A boutique advisory<br />
            <span style={{ fontStyle: 'italic', color: '#3d424b' }}>for senior leaders.</span>
          </h1>
          <ChampagneRule width={64} mt={32} />
          <div style={{ fontSize: 18, lineHeight: 1.7, color: '#3d424b', marginTop: 24 }}>
            Technology, strategy, marketing &amp; design — three practices, partner-led from the first conversation. We work with a small number of executive teams each year.
          </div>
          <div className="vy-buttons" style={{ display: 'flex', gap: 12, marginTop: 36 }}>
            <Button size="lg" onClick={() => onNav?.('contact')}>Schedule a call</Button>
            <Button size="lg" variant="outline" onClick={() => onNav?.('practices')}>How we work</Button>
          </div>
        </div>
        <div className="vy-hero-portrait" style={{ position: 'relative', aspectRatio: '4/5', borderRadius: 8, overflow: 'hidden', background: '#0c1320' }}>
          <img src={VY_IMAGERY.hero_portrait} alt="A senior advisor in conversation" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.92) contrast(1.02)' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(12,19,32,0) 55%, rgba(12,19,32,0.55) 100%)' }} />
          <div style={{ position: 'absolute', left: 24, bottom: 24, right: 24, color: '#fbf8f3' }}>
            <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600, color: '#d4b878' }}>In session</div>
            <div style={{ fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontSize: 22, lineHeight: 1.35, marginTop: 6 }}>One conversation, three disciplines, no juniors-by-stealth.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Practices section
// ============================================================

function PracticeIcon({ name, color }) {
  const props = { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'palette') return (
    <svg {...props}><circle cx="13.5" cy="6.5" r=".5" fill={color} /><circle cx="17.5" cy="10.5" r=".5" fill={color} /><circle cx="8.5" cy="7.5" r=".5" fill={color} /><circle cx="6.5" cy="12.5" r=".5" fill={color} /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></svg>
  );
  if (name === 'terminal') return (
    <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2" /><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /></svg>
  );
  return (
    <svg {...props}><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" /><circle cx="12" cy="12" r="10" /></svg>
  );
}

function PracticeCard({ icon, color, title, description, services, image }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: '#fff', border: '1px solid #ebe4d4', borderTop: `2px solid ${color}`,
        borderRadius: 8, overflow: 'hidden',
        boxShadow: hover ? '0 2px 4px rgba(20,22,26,0.05), 0 4px 12px rgba(20,22,26,0.04)' : '0 1px 2px rgba(20,22,26,0.04), 0 1px 1px rgba(20,22,26,0.03)',
        transition: 'box-shadow 320ms cubic-bezier(0.22,0.61,0.36,1), transform 320ms cubic-bezier(0.22,0.61,0.36,1)',
        transform: hover ? 'translateY(-2px)' : 'none',
        cursor: 'pointer',
        display: 'flex', flexDirection: 'column',
      }}
    >
      <div style={{ aspectRatio: '16/9', overflow: 'hidden', position: 'relative', background: '#0c1320' }}>
        <img src={image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 600ms cubic-bezier(0.22,0.61,0.36,1)', transform: hover ? 'scale(1.04)' : 'scale(1)' }} />
        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, rgba(12,19,32,0) 50%, rgba(12,19,32,0.45) 100%)` }} />
        <div style={{ position: 'absolute', left: 16, bottom: 14, color: '#fbf8f3', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: color }} />
          <span style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', fontWeight: 600 }}>{title}</span>
        </div>
      </div>
      <div style={{ padding: '28px 32px 28px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <PracticeIcon name={icon} color={color} />
        <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 28, lineHeight: 1.15, letterSpacing: '-0.02em', fontWeight: 500, color: '#14161a', marginTop: 14 }}>{title}</div>
        <ChampagneRule width={32} mt={12} />
        <div style={{ fontSize: 15, lineHeight: 1.7, color: '#3d424b', marginTop: 14 }}>{description}</div>
        <div style={{ borderTop: '1px solid #e2e4e8', marginTop: 22, paddingTop: 16 }}>
          {services.map(s => (
            <div key={s} style={{ fontSize: 13, color: '#5a6069', padding: '5px 0', display: 'flex', justifyContent: 'space-between' }}>
              <span>{s}</span>
              <span style={{ color: '#9ba0a8' }}>→</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Practices() {
  return (
    <section className="vy-section-pad" style={{ padding: '64px 32px', background: '#f5f1e8' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Eyebrow>Three practices</Eyebrow>
        <h2 className="vy-h2" style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 'clamp(28px,3vw,40px)', letterSpacing: '-0.02em', fontWeight: 500, color: '#14161a', margin: 0, maxWidth: 720 }}>
          Senior counsel across the work that matters.
        </h2>
        <div className="vy-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 48 }}>
          <PracticeCard icon="terminal" color="#5a7b8a" title="Technology"
            image={VY_IMAGERY.practice_tech}
            description="Architecture review, platform decisions, AI integration. Partner-led engagements with senior engineers — no juniors-by-stealth."
            services={['Architecture review', 'Platform engineering', 'AI integration', 'CTO advisory']} />
          <PracticeCard icon="compass" color="#6e6a8a" title="Strategy"
            image={VY_IMAGERY.practice_strategy}
            description="Where to play, how to win. Six-week engagements that produce decisions — not slide decks — for the C-suite and board."
            services={['Market positioning', 'Org design', 'M&A advisory', 'Executive coaching']} />
          <PracticeCard icon="palette" color="#b08a5a" title="Marketing & Design"
            image={VY_IMAGERY.practice_design}
            description="Brand systems, content, creative production. We help your work look as considered as it is."
            services={['Brand identity', 'Website design & build', 'Editorial & content', 'Campaigns']} />
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Imagery — editorial photography
// ============================================================
//
// Sources are Unsplash hosted images, license-free for commercial use,
// chosen to reflect the brand: senior leaders meeting in high-end
// conference rooms, diverse teams in conversation, considered workspaces.

const VY_IMAGERY = {
  // Hero — Black woman executive in conversation, warm light, glass-walled boardroom
  hero_portrait: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1400&q=80',
  // Diverse leadership team in a high-end boardroom
  boardroom_1: 'https://images.unsplash.com/photo-1664575196412-ed801e8333a1?w=1600&q=80',
  // Diverse executive meeting around a conference table
  meeting_warm: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1200&q=80',
  // Black woman + Asian colleague in a glass-walled conference room
  presenting: 'https://images.unsplash.com/photo-1573497620053-ea5300f94f21?w=1200&q=80',
  // Diverse pair in conversation in an executive setting
  conversation: 'https://images.unsplash.com/photo-1573497019418-b400bb3ab074?w=1200&q=80',
  // Mixed senior team in a high-end office
  office_interior: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?w=1600&q=80',
  // Wood-paneled boardroom interior — architectural
  workspace: 'https://images.unsplash.com/photo-1431540015161-0bf868a2d407?w=1200&q=80',
  // Practice cards — disciplines
  practice_tech: 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=900&q=80', // close-up of code/screens, warm
  practice_strategy: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?w=900&q=80', // handshake / executives at table
  practice_design: 'https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=900&q=80', // designer's desk, paper, type
  // Cinematic quote backdrop — candid executive in conversation, warm tones
  quote_portrait: 'https://images.unsplash.com/photo-1573164574572-cb89e39749b4?w=1600&q=80',
};

function FeatureImage() {
  return (
    <section className="vy-feature" style={{ padding: '0 32px 64px' }}>
      <div className="vy-feature-frame" style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', borderRadius: 8, overflow: 'hidden', aspectRatio: '21 / 9', background: '#0c1320' }}>
        <img src={VY_IMAGERY.boardroom_1} alt="Executives in conversation" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.9) contrast(0.98)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(120deg, rgba(12,19,32,0.55) 0%, rgba(12,19,32,0.0) 60%)' }} />
        <div className="vy-feature-overlay" style={{ position: 'absolute', left: 48, bottom: 40, color: '#fbf8f3', maxWidth: 520 }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', fontWeight: 600, color: '#d4b878', marginBottom: 10 }}>How we work</div>
          <div className="vy-feature-overlay-h" style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 36, lineHeight: 1.15, letterSpacing: '-0.02em', fontWeight: 500 }}>
            <em>One room. </em>The partners on your engagement are the partners doing the work.
          </div>
        </div>
      </div>
    </section>
  );
}

function ImageMosaic() {
  return (
    <section className="vy-section-pad" style={{ padding: '64px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Eyebrow>The practice</Eyebrow>
        <h2 className="vy-h2" style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 'clamp(28px,3vw,40px)', letterSpacing: '-0.02em', fontWeight: 500, margin: 0, maxWidth: 720 }}>
          Considered work, made in person.
        </h2>
        <ChampagneRule width={48} mt={20} />
        <div className="vy-grid-12" style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 16 }}>
          <figure style={{ gridColumn: 'span 7', margin: 0, aspectRatio: '4/3', borderRadius: 8, overflow: 'hidden' }}>
            <img src={VY_IMAGERY.meeting_warm} alt="Three colleagues at a wooden table" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </figure>
          <figure style={{ gridColumn: 'span 5', margin: 0, aspectRatio: '4/3', borderRadius: 8, overflow: 'hidden' }}>
            <img src={VY_IMAGERY.presenting} alt="Executive presenting at the head of a conference table" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </figure>
          <figure style={{ gridColumn: 'span 5', margin: 0, aspectRatio: '4/3', borderRadius: 8, overflow: 'hidden' }}>
            <img src={VY_IMAGERY.conversation} alt="Two professionals in conversation" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </figure>
          <figure style={{ gridColumn: 'span 7', margin: 0, aspectRatio: '4/3', borderRadius: 8, overflow: 'hidden' }}>
            <img src={VY_IMAGERY.office_interior} alt="High-end office interior, warm wood and glass" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </figure>
        </div>
      </div>
    </section>
  );
}

function Work() { return null; }

// ============================================================
// Quote & Contact
// ============================================================

function Quote() {
  return (
    <section className="vy-quote" style={{ position: 'relative', padding: '120px 32px', background: '#0c1320', overflow: 'hidden' }}>
      <img src={VY_IMAGERY.quote_portrait} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.32, filter: 'grayscale(0.2) contrast(1.05)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(12,19,32,0.92) 0%, rgba(12,19,32,0.78) 60%, rgba(12,19,32,0.55) 100%)' }} />
      <div style={{ position: 'relative', maxWidth: 920, margin: '0 auto' }}>
        <Eyebrow color="#d4b878">Client</Eyebrow>
        <blockquote className="vy-quote-text" style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 'clamp(28px,3.5vw,44px)', lineHeight: 1.25, letterSpacing: '-0.02em', fontWeight: 500, color: '#fbf8f3', margin: '12px 0 0', fontStyle: 'italic' }}>
          “They told us what we needed to hear, not what we wanted to hear. The result was a sharper company.”
        </blockquote>
        <ChampagneRule width={48} mt={32} />
        <div style={{ marginTop: 16, color: '#c2c6cc', fontSize: 14 }}>
          <strong style={{ color: '#fbf8f3', fontWeight: 600 }}>Helena Marsh</strong>
          <span style={{ color: '#5a6069', margin: '0 10px' }}>·</span>
          CEO, Northwood Capital
        </div>
      </div>
    </section>
  );
}

const FORMSPREE_ENDPOINT = 'https://formspree.io/f/xzdoebnj';

function ContactPanel({ onSubmit }) {
  const [form, setForm] = useState({ name: '', email: '', practice: '', message: '' });
  const [status, setStatus] = useState('idle'); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = useState('');
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    setErrorMsg('');
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          practice: form.practice,
          message: form.message,
          _subject: `New note from ${form.name || 'website'} — ${form.practice || 'Vy Group'}`,
        }),
      });
      if (res.ok) {
        setStatus('success');
        onSubmit?.(form);
        setForm({ name: '', email: '', practice: '', message: '' });
      } else {
        const data = await res.json().catch(() => ({}));
        setStatus('error');
        setErrorMsg(data?.errors?.[0]?.message || 'Something went wrong. Please email us directly.');
      }
    } catch (err) {
      setStatus('error');
      setErrorMsg('Network error. Please email us directly.');
    }
  };

  return (
    <section className="vy-section-pad" style={{ padding: '96px 32px', background: '#fbf8f3' }}>
      <div className="vy-grid-2" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64 }}>
        <div>
          <Eyebrow>Get in touch</Eyebrow>
          <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 'clamp(28px,3vw,40px)', letterSpacing: '-0.02em', fontWeight: 500, margin: 0 }}>
            Tell us what you're working on.
          </h2>
          <ChampagneRule width={48} mt={20} />
          <div style={{ marginTop: 24, color: '#3d424b', fontSize: 16, lineHeight: 1.7 }}>
            We reply to every note within two business days. If it's a fit, we'll set up a 30-minute call to learn more.
          </div>
          <div style={{ marginTop: 32, padding: 24, background: '#fff', border: '1px solid #ebe4d4', borderRadius: 8 }}>
            <div style={{ fontSize: 12, color: '#8a6f3a', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>Direct</div>
            <div style={{ fontSize: 16, color: '#14161a', marginBottom: 4 }}>info@vygroup.net</div>
            <div style={{ fontSize: 14, color: '#5a6069' }}>+1-470-888-7250</div>
          </div>
        </div>
        <div style={{ background: '#fff', border: '1px solid #ebe4d4', borderRadius: 8, padding: 32 }}>
          {status === 'success' ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '24px 0' }}>
              <Eyebrow>Note sent</Eyebrow>
              <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 32, letterSpacing: '-0.02em', fontWeight: 500, margin: 0, color: '#14161a' }}>
                Thank you. We'll be in touch shortly.
              </h3>
              <ChampagneRule width={48} mt={4} />
              <div style={{ fontSize: 15, lineHeight: 1.7, color: '#3d424b' }}>
                A partner will reply to <strong style={{ color: '#14161a' }}>{form.email || 'your inbox'}</strong> within two business days.
              </div>
              <button onClick={() => setStatus('idle')} style={{ alignSelf: 'flex-start', marginTop: 8, background: 'transparent', border: 0, padding: 0, fontSize: 13, color: '#8a6f3a', borderBottom: '1px solid #c2a05a', cursor: 'pointer' }}>Send another note</button>
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <Field label="Your name" value={form.name} onChange={set('name')} placeholder="Alex Chen" />
              <Field label="Email" type="email" value={form.email} onChange={set('email')} placeholder="alex@company.com" />
              <SelectField label="Practice of interest" value={form.practice} onChange={set('practice')} options={['', 'Technology', 'Strategy', 'Marketing & Design', 'Not sure yet']} />
              <Field label="What are you working on?" value={form.message} onChange={set('message')} placeholder="A few sentences is fine." textarea />
              <Button disabled={status === 'sending'}>{status === 'sending' ? 'Sending…' : 'Send note'}</Button>
              {status === 'error' && (
                <div style={{ fontSize: 13, color: '#7d3a31', background: '#f5e8e6', borderRadius: 4, padding: '10px 12px' }}>{errorMsg}</div>
              )}
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, placeholder, type = 'text', textarea }) {
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 12, color: '#3d424b', fontWeight: 500 }}>{label}</span>
      <Tag value={value} onChange={onChange} placeholder={placeholder} type={type} rows={textarea ? 4 : undefined}
        style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, padding: '10px 12px', background: '#fff', border: '1px solid #c2c6cc', borderRadius: 2, color: '#14161a', outline: 'none', resize: textarea ? 'vertical' : 'none' }} />
    </label>
  );
}

function SelectField({ label, value, onChange, options }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 12, color: '#3d424b', fontWeight: 500 }}>{label}</span>
      <select value={value} onChange={onChange} style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, padding: '10px 12px', background: '#fff', border: '1px solid #c2c6cc', borderRadius: 2, color: '#14161a', outline: 'none' }}>
        {options.map(o => <option key={o} value={o}>{o || 'Select one…'}</option>)}
      </select>
    </label>
  );
}

// ============================================================
// Practices detail page (alt route)
// ============================================================

function PracticesPage() {
  return (
    <>
      <section style={{ padding: '96px 32px 32px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <Eyebrow>Practices</Eyebrow>
          <h1 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 'clamp(40px,5vw,64px)', lineHeight: 1.1, letterSpacing: '-0.02em', fontWeight: 500, margin: 0, maxWidth: 920 }}>
            Three teams that talk to each other.
          </h1>
          <ChampagneRule width={64} mt={28} />
          <div style={{ fontSize: 18, lineHeight: 1.7, color: '#3d424b', maxWidth: 640, marginTop: 20 }}>
            Most consultancies pretend their disciplines don't overlap. Ours start in the same room — you get one team that's wearing three hats, not three teams that send invoices.
          </div>
        </div>
      </section>
      <Practices />
    </>
  );
}

Object.assign(window, { Header, Footer, Hero, Practices, Work, FeatureImage, ImageMosaic, Quote, ContactPanel, PracticesPage, Logo, Button, Eyebrow, ChampagneRule, VY_IMAGERY });