/* Golden Circle website — page sections. Composes design-system primitives.
   Loaded after parts.jsx and the bundle; exports sections to window. */

const { Button, Card, Tabs, Badge, Input, Select } = window.GoldenCircleDesignSystem_b7b2f4;
const { Eyebrow, Rule, Figure, FollowSpot, EnquiryForm } = window;

const NAV = [
  { label: 'What we do', href: '#services' },
  { label: 'Work', href: '#work' },
  { label: 'Approach', href: '#approach' },
  { label: 'Contact', href: '#contact' },
];

/* ---------------- Header ---------------- */
function SiteHeader({ onEnquire }) {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector('[data-scroll]') || window;
    const node = el === window ? document.documentElement : el;
    const onScroll = () => setSolid((el === window ? window.scrollY : el.scrollTop) > 40);
    el.addEventListener('scroll', onScroll); onScroll();
    return () => el.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50,
      background: solid ? 'rgba(20,16,11,0.86)' : 'transparent',
      backdropFilter: solid ? 'blur(10px)' : 'none',
      borderBottom: solid ? '1px solid rgba(184,155,94,0.18)' : '1px solid transparent',
      transition: 'background .4s ease, border-color .4s ease' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '18px clamp(1.5rem,5vw,3.5rem)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" aria-label="Golden Circle home" style={{ display: 'inline-flex' }}>
          <img src="assets/logos/horizontal_gold.svg" alt="Golden Circle Productions" style={{ height: 104, display: 'block' }} />
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
          {NAV.map(n => (
            <a key={n.href} href={n.href} style={{ fontFamily: 'var(--font-billing)', fontSize: 12,
              fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'var(--gc-footlight)', textDecoration: 'none', opacity: 0.82 }}
              className="gc-navlink">{n.label}</a>
          ))}
          <Button variant="primary" size="sm" onClick={onEnquire}>Inquire</Button>
        </nav>
      </div>
    </header>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ onEnquire }) {
  return (
    <section id="top" style={{ position: 'relative', minHeight: '92vh', display: 'flex',
      alignItems: 'center', justifyContent: 'center', textAlign: 'center',
      padding: '8vh clamp(1.5rem,5vw,3.5rem) 12vh', overflow: 'hidden' }}>
      {/* follow-spot wash */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(60% 55% at 50% 38%, rgba(184,155,94,0.14), transparent 62%)' }} />
      <div style={{ position: 'relative', maxWidth: 880 }}>
        <div className="hero-spot" style={{ display: 'flex', justifyContent: 'center', marginBottom: 30 }}>
          <FollowSpot size="clamp(160px, 26vw, 300px)" />
        </div>
        <Eyebrow tone="gold" style={{ marginBottom: 22 }}>Luxury events &middot; New York &amp; beyond</Eyebrow>
        <h1 className="hero-line" style={{ fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 'clamp(2.6rem, 6vw, 5.2rem)', lineHeight: 1.04, letterSpacing: '0.01em',
          color: 'var(--gc-footlight)', margin: '0 0 26px' }}>
          Advise or produce…<br /><span style={{ color: 'var(--gc-gold)' }}>either way, flawless.</span>
        </h1>
        <p className="hero-sub" style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(1.05rem,1.6vw,1.3rem)',
          lineHeight: 1.6, color: 'var(--gc-stone-soft)', maxWidth: 560, margin: '0 auto 38px' }}>
          We produce, advise on, and elevate luxury events for cultural institutions,
          major corporations, and discerning hosts who set New York&rsquo;s standard.
        </p>
        <div className="hero-cta" style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="primary" onClick={onEnquire}>Start a conversation</Button>
          <Button variant="secondary" onDark as="a" href="#work">See selected work</Button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Services ---------------- */
function Services() {
  const modes = [
    { eyebrow: 'Full management', title: 'Hand off the entire program…',
      body: 'When you want it off your desk: we plan, staff, and run the evening end to end — vendors, run-of-show, the room, and the recovery. You arrive as a guest at your own event.' },
    { eyebrow: 'Advisory', title: 'A seasoned partner, not a babysitter…',
      body: 'When you already know what you want: we sit beside your team, pressure-test the plan, open doors, and keep the standards high — without taking the wheel from you.' },
  ];
  return (
    <section id="services" style={{ background: 'var(--gc-program)',
      padding: 'var(--section-y) clamp(1.5rem,5vw,3.5rem)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ maxWidth: 750, marginBottom: 56 }}>
          <Eyebrow tone="muted">What we do</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(2rem,3.6vw,3rem)',
            lineHeight: 1.12, color: 'var(--gc-score)', margin: 0 }}>
            Two ways to work…both equal &mdash; and most clients move between them.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 28 }}>
          {modes.map((m, i) => (
            <Card key={i} raised>
              <Eyebrow tone="muted" style={{ marginBottom: 14 }}>{m.eyebrow}</Eyebrow>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 26, lineHeight: 1.16,
                color: 'var(--gc-score)', margin: '0 0 14px' }}>{m.title}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.62,
                color: 'var(--gc-score)', margin: 0 }}>{m.body}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Work ---------------- */
function Work() {
  const E = 'assets/events/';
  return (
    <section id="work" style={{ background: 'var(--gc-program)',
      padding: '0 clamp(1.5rem,5vw,3.5rem) var(--section-y)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Rule style={{ marginBottom: 56 }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          gap: 24, marginBottom: 46, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow tone="muted">Selected work</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(2rem,3.6vw,3rem)',
              lineHeight: 1.12, color: 'var(--gc-score)', margin: 0 }}>Experiences we&rsquo;ve curated…</h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 28, alignItems: 'stretch' }}
          className="work-grid">
          <Figure fill className="work-hero" src={E + 'nyc-gala-2016.jpg'} position="center"
            label="NYC Gala" />
          <div style={{ display: 'grid', gap: 28 }}>
            <Figure ratio="3 / 2" src={E + 'hamptons-2018.jpg'} label="The Hamptons" />
            <Figure ratio="3 / 2" src={E + 'hamptons-2019-a.jpg'} position="center 60%"
              label="The Hamptons" />
            <Figure ratio="3 / 2" src={E + 'nyc-gala-2018-c.jpg'} position="left"
              label="NYC Gala" />
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 28, marginTop: 28 }}
          className="work-grid work-row-2">
          <Figure ratio="3 / 2" src={E + 'nyc-gala-2018-a.jpg'} position="center"
            label="NYC Gala" />
          <Figure ratio="3 / 2" src={E + 'hamptons-2019-b.jpg'} position="center"
            label="The Hamptons" />
          <Figure ratio="3 / 2" src={E + 'nyc-gala-2018-b.jpg'} position="center"
            label="NYC Gala" />
        </div>
      </div>
    </section>
  );
}

/* ---------------- People ---------------- */
function People() {
  const E = 'assets/events/';
  const people = [
    { src: E + 'martha-stewart.jpg', name: 'Martha Stewart', note: 'The Hamptons', pos: 'center 30%' },
    { src: E + 'tori-amos.jpg', name: 'Tori Amos', note: 'NYC Gala', pos: 'center 22%' },
    { src: E + 'alan-cumming.jpg', name: 'Alan Cumming', note: 'NYC Gala', pos: 'center 30%' },
  ];
  return (
    <section id="people" style={{ background: 'var(--gc-program)',
      padding: '0 clamp(1.5rem,5vw,3.5rem) var(--section-y)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Rule style={{ marginBottom: 56 }} />
        <div style={{ maxWidth: 560, marginBottom: 46 }}>
          <Eyebrow tone="muted">A few celebrities we&rsquo;ve worked with</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(2rem,3.6vw,3rem)',
            lineHeight: 1.12, color: 'var(--gc-score)', margin: 0 }}>In good company…</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 28 }} className="people-grid">
          {people.map((p, i) => (
            <div key={i}>
              <Figure ratio="4 / 5" src={p.src} position={p.pos} radius="var(--radius-md)" />
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 22,
                color: 'var(--gc-score)', margin: '16px 0 4px' }}>{p.name}</h3>
              <p style={{ fontFamily: 'var(--font-billing)', fontSize: 11, fontWeight: 600,
                letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--gc-stone-deep)', margin: 0 }}>{p.note}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Clientele ---------------- */
function Clientele() {
  const rows = [
    ['Cultural institutions', 'Performing arts organizations, museums, and educational stalwarts.'],
    ['Non-profit galas', 'Concerts, balls, dinners, fashion shows, and Broadway readings that fund the mission.'],
    ['Corporate & brand', 'Conferences, incentive programs, activations, and hospitality with a standard to keep.'],
    ['Private hosts', 'Discerning hosts who need help realizing their vision.'],
    ['Travel', 'NYC or any destination around the world…we can help you plan the perfect group getaway of your dreams.'],
  ];
  return (
    <section style={{ background: 'var(--gc-sand)',
      padding: 'var(--section-y) clamp(1.5rem,5vw,3.5rem)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ maxWidth: 650, marginBottom: 46 }}>
          <Eyebrow tone="muted">Who we serve</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(2rem,3.6vw,3rem)',
            lineHeight: 1.12, color: 'var(--gc-score)', margin: 0 }}>Expertise based on experience…</h2>
        </div>
        <div>
          {rows.map((r, i) => (
            <div key={i}>
              <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 24,
                padding: '22px 0', alignItems: 'baseline' }} className="client-row">
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(1.3rem,2vw,1.7rem)',
                  color: 'var(--gc-score)', margin: 0 }}>{r[0]}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6,
                  color: 'var(--gc-stone-deep)', margin: 0 }}>{r[1]}</p>
              </div>
              {i < rows.length - 1 && <Rule />}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Approach (dark statement) ---------------- */
function Approach() {
  return (
    <section id="approach" style={{ background: 'var(--gc-curtain)', position: 'relative',
      padding: 'var(--section-y) clamp(1.5rem,5vw,3.5rem)', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(50% 60% at 78% 30%, rgba(184,155,94,0.12), transparent 60%)' }} />
      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto' }}>
        <Eyebrow tone="gold">How we work</Eyebrow>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(1.8rem,3.4vw,2.9rem)',
          lineHeight: 1.22, letterSpacing: '0.005em', color: 'var(--gc-footlight)', margin: '0 0 40px' }}>
          One accountable lead assembles the right specialists for each event…
          <span style={{ color: 'var(--gc-stone-soft)' }}>not a fixed in-house roster you&rsquo;re forced to
          fit into.</span>
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 28 }}>
          {[
            ['Boots on the ground', 'Based in New York, with reach wherever the program travels.'],
            ['Discreet by default', 'Your evening, your guests, your name — never ours on the marquee.'],
            ['Easy to collaborate with', 'Built for clients who don’t live in the events world.'],
          ].map((c, i) => (
            <div key={i}>
              <Rule dark style={{ marginBottom: 16 }} />
              <h3 style={{ fontFamily: 'var(--font-billing)', fontSize: 13, fontWeight: 600,
                letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--gc-gold)', margin: '0 0 10px' }}>{c[0]}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.6,
                color: 'var(--gc-stone-soft)', margin: 0 }}>{c[1]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Contact / Footer ---------------- */
function ContactFooter({ onEnquire }) {
  return (
    <footer id="contact" style={{ background: 'var(--gc-curtain)',
      padding: 'var(--section-y) clamp(1.5rem,5vw,3.5rem) 48px',
      borderTop: '1px solid rgba(184,155,94,0.18)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center' }}
          className="contact-grid">
          <div>
            <Eyebrow tone="gold">Start a conversation</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(2rem,3.8vw,3.2rem)',
              lineHeight: 1.1, color: 'var(--gc-footlight)', margin: '0 0 22px' }}>
              Tell us about your evening…
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6,
              color: 'var(--gc-stone-soft)', maxWidth: 500, margin: '0 0 30px' }}>
              A short note with your vision is plenty to start.<br />We reply within one business day.
            </p>
          </div>
          <EnquiryForm onDark />
        </div>
        <Rule dark style={{ margin: '56px 0 28px' }} />
        <div className="footer-meta" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 20, flexWrap: 'wrap' }}>
          <img src="assets/logos/horizontal_gold.svg" alt="Golden Circle Productions" style={{ height: 64, display: 'block' }} />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--gc-stone-soft)', margin: 0 }}>
            New York, NY &nbsp;·&nbsp; hello@goldencircleproductions.com
          </p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--gc-stone-deep)', margin: 0 }}>
            &copy; 2026 Golden Circle Productions LLC
          </p>
        </div>
        <p style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, margin: '28px 0 0',
          fontFamily: 'var(--font-billing)', fontSize: 11, fontWeight: 600, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: 'var(--gc-stone-soft)' }}>
          Made with
          <svg width="13" height="13" viewBox="0 0 24 24" fill="var(--gc-gold)" role="img" aria-label="love">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
          </svg>
          in NYC
        </p>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, Hero, Services, Work, People, Clientele, Approach, ContactFooter });