/* =====================================================================
   GRUG GROUP — content SECTIONS
   Loaded after grug-core.jsx. Reads helpers from window.GRUG.
   ===================================================================== */
const { useState, useEffect, useRef } = React;
const { R, useReveal, useScrolled, useCountUp, SectionIndex, Ico } = window.GRUG;

/* ============ HERO — rotating render showcase ============ */
const HERO_SLIDES = [
  { imgKey: 'favoriteAlpine' },
  { imgKey: 'ryzrSkyline' },
  { imgKey: 'clientHelipad' },
  { imgKey: 'bjSunset' },
  { imgKey: 'ghostCity' },
  { imgKey: 'clientStealthSunset' },
  { imgKey: 'bjAlps' },
  { imgKey: 'clientVtolNyc' },
  { imgKey: 'clientNasa' },
];
const Hero = () => {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % HERO_SLIDES.length), 5200);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="grug-hero" data-screen-label="Hero">
      {HERO_SLIDES.map((s, i) => (
        <div key={i} className={`grug-hero__slide ${i === idx ? 'is-active' : ''}`}
             style={{ backgroundImage: `url(${R()[s.imgKey]})` }} />
      ))}
      <div className="grug-hero__grid" />
      <div className="grug-hero__scrim" />
      <div className="grug-hero__content">
        <div className="grug-eyebrow" style={{animation: 'fadeUp 1000ms var(--ease-out) 0ms both'}}>Aerospace Design · Aviation Solutions · Since 2017</div>
        <h1 className="grug-display">
          <span className="grug-display__line"><span className="grug-display__inner">From ideation</span></span>
          <span className="grug-display__line"><span className="grug-display__inner">to <span className="blu">concept ready.</span></span></span>
        </h1>
        <p className="grug-hero__sub">A design studio for the future of flight. We help aerospace clients shape ideas into investor-ready concepts — and the brand stories that surround them.</p>
        <div className="grug-hero__cta">
          <a href="portfolio.html" className="grug-btn grug-btn--primary">View our work <span className="chev">›</span></a>
          <a href="capabilities.html" className="grug-btn grug-btn--ghost">Capabilities</a>
        </div>
      </div>
      <div className="grug-hero__corner">
        <div className="k">REEL</div>
        <div className="v">{String(idx+1).padStart(2,'0')} / {String(HERO_SLIDES.length).padStart(2,'0')}</div>
      </div>
    </section>
  );
};

/* ============ MARQUEE ============ */
const Marquee = () => {
  const items = ['Aerospace Design', 'Aviation Solutions', 'Concept Development', 'Industrial Design', 'Visualization', 'Brand Identity', 'Consulting'];
  const doubled = [...items, ...items];
  return (
    <div className="grug-marquee" aria-hidden="true">
      <div className="grug-marquee__track">
        {doubled.map((t, i) => <div key={i} className="grug-marquee__item">{t}</div>)}
      </div>
    </div>
  );
};

/* ============ STATS ============ */
const Stats = () => {
  const items = [
    { val: 9,  suffix: '',  label: 'Years operating' },
    { val: 30, suffix: '+', label: 'Concepts delivered' },
    { val: 29, suffix: '+', label: 'Years experience' },
  ];
  return (
    <section className="grug-stats" data-screen-label="Stats">
      <div className="grug-stats__grid">
        {items.map((s, i) => <StatCell key={i} {...s} delay={i*120} />)}
      </div>
    </section>
  );
};
const StatCell = ({ val, suffix, label, delay }) => {
  const [ref, n] = useCountUp(val);
  return (
    <div ref={ref} className="grug-stat" data-delay={delay}>
      <div className="grug-stat__num">{n.toLocaleString()}<span className="unit">{suffix}</span></div>
      <div className="grug-stat__label">{label}</div>
    </div>
  );
};

/* ============ CAPABILITIES ============ */
const CAPS = [
  { num: '01', icon: 'pencil',   imgKey: 'doggyHero',     title: 'Concept Design',      body: 'The shape of an idea. We work with you to define mission, form, and feel — and translate it into a coherent design language.' },
  { num: '02', icon: 'design',   imgKey: 'bjTopdown',     title: 'Industrial Design',   body: 'Exterior surfaces, line work, materiality, and detail. Our concepts are designed to look the way they should perform.' },
  { num: '03', icon: 'render',   imgKey: 'bjAlps',        title: 'Visualization',       body: 'Photoreal renders, cinematic film, animated walkthroughs — the materials that get your concept funded, signed, and remembered.' },
  { num: '04', icon: 'cabin',    imgKey: 'clientVtolNyc', title: 'Cabin & Interior',    body: 'Interior architecture, passenger experience, layout studies. The inside of the story is as important as the silhouette.' },
  { num: '05', icon: 'strategy', imgKey: 'clientHelipad', title: 'Aviation Consulting', body: 'Strategy, partner introductions, supplier sourcing, and go-to-market support drawn from a decade in aerospace networks.' },
];
const Capabilities = ({ heading = true }) => {
  const head = useReveal();
  const [active, setActive] = useState(0);
  const hoveredRef = useRef(false);
  useEffect(() => {
    const id = setInterval(() => { if (!hoveredRef.current) setActive(a => (a + 1) % CAPS.length); }, 3600);
    return () => clearInterval(id);
  }, []);
  const cap = CAPS[active];
  return (
    <section id="capabilities" className="grug-capabilities" data-screen-label="Capabilities">
      <div className="grug-mark" aria-hidden="true">01</div>
      <SectionIndex no="01" title="Capabilities" meta="Five disciplines" />
      {heading && (
        <div ref={head} className="grug-capabilities__head reveal">
          <div>
            <div className="grug-eyebrow center">What we do</div>
            <h2 className="grug-h2 center">A studio for aerospace design and aviation solutions.</h2>
          </div>
          <p className="grug-p lg">We partner with aviation companies, agencies, and entrepreneurs to take ideas from the first sketch to a concept ready to present, pitch, or build.</p>
        </div>
      )}
      <div className="grug-cap-split">
        <div className="grug-cap-split__list"
          onMouseEnter={() => { hoveredRef.current = true; }}
          onMouseLeave={() => { hoveredRef.current = false; }}>
          {CAPS.map((c, i) => (
            <button key={c.num} className={`grug-cap-row ${active === i ? 'is-active' : ''}`}
              onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)} onClick={() => setActive(i)} type="button">
              <div className="grug-cap-row__num">{c.num}</div>
              <div className="grug-cap-row__icon">{Ico[c.icon]}</div>
              <div className="grug-cap-row__text">
                <h3 className="grug-cap-row__title">{c.title}</h3>
                <p className="grug-cap-row__body">{c.body}</p>
              </div>
              <div className="grug-cap-row__chev">›</div>
            </button>
          ))}
        </div>
        <div className="grug-cap-split__media">
          <div className="grug-cap-split__frame">
            {CAPS.map((c, i) => (
              <div key={c.num} className={`grug-cap-split__img ${active === i ? 'is-active' : ''}`}
                style={{ backgroundImage: `url(${R()[c.imgKey]})` }} />
            ))}
            <div className="grug-cap-split__scrim" />
            <div className="grug-cap-split__meta">
              <span className="grug-tag">{cap.num} · {cap.title.toUpperCase()}</span>
              <div className="grug-cap-split__counter">{cap.num} <span>/ {String(CAPS.length).padStart(2,'0')}</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ SERVICES ============ */
const Services = () => {
  const head = useReveal();
  const groups = [
    { eb: 'TECHNICAL & ENGINEERING', items: [
      { t: 'Concept Design',                 d: 'Concept aircraft ready for preliminary design phase — geometry, weights and balance, performance envelope, propulsion sizing, mass budget.' },
      { t: 'Primary Technical Calculations', d: 'Aerodynamic estimates, propulsion architecture, structural pre-sizing, and mission-profile analysis.' },
      { t: 'Aircraft Records Review',        d: 'Continuous Maintenance Program (CMP) analysis, airworthiness compliance review, certification audits.' },
      { t: 'Technical Proposals',            d: 'Government funding submissions — AFWERX, xTech, SBIR/STTR, defense R&D programs.' },
    ]},
    { eb: 'DEAL-MAKING & DOCUMENTATION', items: [
      { t: 'Aircraft Brochures',             d: 'Investor-grade product brochures from concept page to full technical specification.' },
      { t: 'Commercial Proposals',           d: 'Pitch decks, opportunity briefs, and one-pagers for boardroom and broker channels.' },
      { t: 'Aviation Contracts',             d: 'Letters of Intent (LOI), Purchase Agreements (PA), broker contracts, NDAs, and supplier MoUs.' },
      { t: 'Project Management',             d: 'End-to-end oversight, partner coordination, and supplier sourcing through delivery.' },
    ]},
    { eb: 'VISUALIZATION & PRESENTATION', items: [
      { t: 'Photoreal Renders',              d: 'Press-quality stills for decks, brochures, websites, and editorial placements.' },
      { t: 'Cinematic Video',                d: 'Animated walkthroughs, hero film, and motion reels for launches and investor rooms.' },
      { t: 'VR Experiences (Oculus)',        d: 'Immersive cabin and exterior walkthroughs delivered as standalone Oculus builds.' },
      { t: 'Brand & Identity',               d: 'Aircraft naming, livery, marks, and the supporting site and pitch materials.' },
    ]},
  ];
  return (
    <section id="services" className="grug-services" data-screen-label="Services">
      <div className="grug-mark grug-mark--l" aria-hidden="true">02</div>
      <SectionIndex no="02" title="Services" meta="Twelve deliverables" />
      <div ref={head} className="grug-services__head reveal">
        <div>
          <div className="grug-eyebrow center">What we deliver</div>
          <h2 className="grug-h2 center">Twelve services. One studio.</h2>
        </div>
        <p className="grug-p lg">From technical pre-sizing to VR walkthroughs and the contracts that close the deal — a complete aerospace design partner under one roof.</p>
      </div>
      <div className="grug-services__grid">
        {groups.map((g, gi) => <ServiceColumn key={g.eb} {...g} delay={gi*150} />)}
      </div>
    </section>
  );
};
const ServiceColumn = ({ eb, items, delay }) => {
  const ref = useReveal();
  return (
    <div ref={ref} className="grug-services__col reveal" data-delay={delay}>
      <div className="grug-services__eb">{eb}</div>
      <ul className="grug-services__list">
        {items.map((it, i) => (
          <li key={it.t} className="grug-service-row">
            <span className="grug-service-row__n">{String(i + 1).padStart(2, '0')}</span>
            <div className="grug-service-row__body">
              <div className="grug-service-row__t">{it.t}</div>
              <div className="grug-service-row__d">{it.d}</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

/* ============ CLIENTS ============ */
const Clients = () => {
  const ref = useReveal();
  const clients = [
    { name: 'JETX',            sub: 'CO-VENTURE · ORLANDO, FL',         logo: 'logoJetxReal' },
    { name: 'NALWA AERO',      sub: 'INDIA',                            logo: 'logoNalwa' },
    { name: 'MATRIX AVIATION', sub: 'AVIATION BROKER · FT. LAUDERDALE', logo: 'logoMatrix' },
  ];
  return (
    <section id="clients" ref={ref} className="grug-clients reveal" data-screen-label="Clients">
      <SectionIndex no="06" title="Clients" meta="Partners & co-ventures" />
      <div className="grug-clients__inner">
        <div className="grug-eyebrow center">Trusted by</div>
        <div className="grug-clients__row">
          {clients.map(c => (
            <div key={c.name} className="grug-client">
              <div className="grug-client__logo">
                <img src={R()[c.logo]} alt={c.name} className={`grug-client__img grug-client__img--${c.logo}`} />
              </div>
              <div className="grug-client__sub">{c.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============ AWARDS ============ */
const Awards = () => {
  const ref = useReveal();
  const awards = [
    { logo: 'awardXtech',    name: 'U.S. ARMY xTECH',  year: '2023', detail: '1st Place · Autonomy Competition' },
    { logo: 'awardAfwerx',   name: 'AFWERX',           year: '2024', detail: 'HSVTOL Showcase Participant' },
    { logo: 'awardSbirAf',   name: 'SBIR · STTR',      year: '2024', detail: 'U.S. Air Force · U.S. Space Force' },
    { logo: 'awardArmySbir', name: 'U.S. ARMY SBIR',   year: '2025', detail: 'Phase I Award' },
  ];
  return (
    <section className="grug-awards" data-screen-label="Awards">
      <SectionIndex no="08" title="Defense Programs" meta="Awarded in partnership with JETX" />
      <div ref={ref} className="grug-awards__head reveal">
        <div>
          <div className="grug-eyebrow center">Recognized by</div>
          <h2 className="grug-h2 center">Backed by the Department of Defense.</h2>
        </div>
        <p className="grug-p lg">Selected, awarded, and showcased across the U.S. military innovation pipeline — alongside our co-venture partner JETX in Orlando, Florida.</p>
      </div>
      <div className="grug-awards__grid">
        {awards.map((a, i) => (
          <div key={a.name} className="grug-award" style={{transitionDelay: `${i*80}ms`}}>
            <div className="grug-award__seal" aria-hidden="true"><span>AWARDED</span><span className="g">·</span><span>{a.year}</span></div>
            <div className="grug-award__plate"><img src={R()[a.logo]} alt={a.name} /></div>
            <div className="grug-award__body">
              <div className="grug-award__name">{a.name}</div>
              <div className="grug-award__detail">{a.detail}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ============ VOICES ============ */
const Voices = () => {
  const ref = useReveal();
  const [idx, setIdx] = useState(0);
  const voices = [
    { q: 'GRUG turned an ambition into a concept we could put on a stage. The Speedster came back with proportions we never could have briefed for in words.', who: 'Project Lead', where: 'RYZR Mobility · 2026' },
    { q: 'Most studios send back a render. GRUG sent back a brand. The deck closed our seed round in the first three rooms.', who: 'Founder & CEO', where: 'Nalwa Aero · India' },
    { q: 'Working with Nelson is closer to working with an aerospace partner than a vendor. He shows up to the regulator meetings.', who: 'Co-Founder', where: 'JETX · Orlando' },
    { q: 'A concept package we could hand to engineering on a Monday and to investors on a Tuesday without changing a single page.', who: 'Head of Strategy', where: 'Aviation Broker · FL' },
  ];
  useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % voices.length), 6800);
    return () => clearInterval(id);
  }, [voices.length]);
  const v = voices[idx];
  return (
    <section className="grug-voices" data-screen-label="Voices">
      <div className="grug-mark grug-mark--l" aria-hidden="true">06</div>
      <SectionIndex no="06" title="Voices" meta={`${voices.length} client quotes`} />
      <div ref={ref} className="grug-voices__inner reveal">
        <div className="grug-voices__rail">
          <div className="grug-voices__eb">CLIENT VOICES</div>
          <div className="grug-voices__counter">{String(idx + 1).padStart(2, '0')} <span>/ {String(voices.length).padStart(2, '0')}</span></div>
        </div>
        <div className="grug-voices__stage">
          <div className="grug-voices__mark">&ldquo;</div>
          <blockquote key={idx} className="grug-voices__quote">{v.q}</blockquote>
          <div className="grug-voices__attr">
            <div className="grug-voices__rule" />
            <div className="grug-voices__who">{v.who}</div>
            <div className="grug-voices__where">{v.where}</div>
          </div>
        </div>
        <div className="grug-voices__dots">
          {voices.map((_, i) => (
            <button key={i} type="button" onClick={() => setIdx(i)} className={`grug-voices__dot ${i === idx ? 'is-active' : ''}`} aria-label={`Voice ${i + 1}`} />
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============ SHOWREEL ============ */
const REEL_CLIPS = [
  { key: 'reelVideo',  label: 'Aircraft Animation', tag: 'CINEMATIC · 01' },
  { key: 'reelVideo2', label: 'Concept Motion',     tag: 'CINEMATIC · 02' },
  { key: 'reelVideo3', label: 'Visualization',      tag: 'CINEMATIC · 03' },
  { key: 'reelVideo4', label: 'Aircraft Designs',   tag: 'CINEMATIC · 04' },
  { key: 'reelVideo5', label: 'Scene Study',        tag: 'CINEMATIC · 05' },
];
const Showreel = () => {
  const ref = useReveal();
  const vidRef = useRef(null);
  const [muted, setMuted] = useState(true);
  const [active, setActive] = useState(0);
  const clip = REEL_CLIPS[active];
  useEffect(() => {
    const el = vidRef.current; if (!el) return;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { el.play().catch(() => {}); } else { el.pause(); } });
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  useEffect(() => {
    const el = vidRef.current; if (!el) return;
    el.load(); el.play().catch(() => {});
  }, [active]);
  const onEnded = () => setActive(a => (a + 1) % REEL_CLIPS.length);
  return (
    <section className="grug-reel" data-screen-label="Showreel">
      <div className="grug-mark grug-mark--l" aria-hidden="true">00</div>
      <SectionIndex no="00" title="Studio Reel" meta={`${REEL_CLIPS.length} films · 2026`} />
      <div ref={ref} className="grug-reel__head reveal">
        <div>
          <div className="grug-eyebrow center">Reel</div>
          <h2 className="grug-h2 center">A studio in motion.</h2>
        </div>
        <p className="grug-p lg">Cinematic film, photoreal motion, and animated walkthroughs — the materials that put a concept in the air long before it flies.</p>
      </div>
      <div className="grug-reel__layout">
        <div className="grug-reel__frame">
          <video key={clip.key} ref={vidRef} className="grug-reel__video" src={R()[clip.key]} muted={muted} playsInline autoPlay preload="metadata" onEnded={onEnded} />
          <div className="grug-reel__scrim" />
          <div className="grug-reel__meta">
            <span className="grug-tag">{clip.tag}</span>
            <div className="grug-reel__counter"><span className="dot" /><span>RECORDING 2026</span></div>
          </div>
          <button type="button" className="grug-reel__sound" onClick={() => setMuted(m => !m)} aria-label={muted ? "Unmute" : "Mute"}>
            {muted ? (
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H3v6h3l5 4V5z"/><line x1="22" y1="9" x2="16" y2="15"/><line x1="16" y1="9" x2="22" y2="15"/></svg>
            ) : (
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H3v6h3l5 4V5z"/><path d="M15.5 8.5a4 4 0 010 7"/><path d="M18 6a7 7 0 010 12"/></svg>
            )}
          </button>
          <div className="grug-reel__counterBadge"><span>{String(active+1).padStart(2,'0')}</span><span className="slash">/</span><span className="total">{String(REEL_CLIPS.length).padStart(2,'0')}</span></div>
          <div className="grug-reel__brand" aria-hidden="true">GRUG · STUDIO</div>
        </div>
        <ol className="grug-reel__index">
          {REEL_CLIPS.map((c, i) => (
            <li key={c.key}>
              <button type="button" onClick={() => setActive(i)} className={`grug-reel__chip ${active === i ? 'is-active' : ''}`} aria-label={`Play ${c.label}`}>
                <span className="n">{String(i + 1).padStart(2, '0')}</span>
                <span className="t">{c.label}</span>
                <span className="bar" />
              </button>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

/* ============ PORTFOLIO ============ */
const Project = ({ tag, title, kind, imgKey, onOpen, fit, href, featured }) => {
  const ref = useReveal();
  const className = `grug-project reveal ${featured ? 'is-featured' : ''}`;
  const inner = (
    <>
      <div className={`grug-project__img ${fit === 'contain' ? 'is-contain' : ''}`} style={{ backgroundImage: `url(${R()[imgKey]})` }} />
      <div className="grug-project__scrim" />
      <div className="grug-project__arrow">{href ? '→' : '↗'}</div>
      <div className="grug-project__meta">
        <span className="grug-tag">{tag}</span>
        <div className="grug-project__title">{title}</div>
        <div className="grug-project__kind">{kind}</div>
        {featured && <div className="grug-project__cta">Read case study →</div>}
      </div>
      {featured && <div className="grug-project__badge">CASE STUDY · 2026</div>}
    </>
  );
  if (href) return <a ref={ref} href={href} className={className}>{inner}</a>;
  return <button ref={ref} type="button" onClick={onOpen} className={className}>{inner}</button>;
};

const Lightbox = ({ projects, idx, onClose, onPrev, onNext }) => {
  const isOpen = idx != null;
  useEffect(() => {
    if (!isOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); else if (e.key === 'ArrowLeft') onPrev(); else if (e.key === 'ArrowRight') onNext(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow; document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [isOpen, onClose, onPrev, onNext]);
  if (!isOpen) return null;
  const p = projects[idx];
  return (
    <div className="grug-lightbox" role="dialog" aria-modal="true" onClick={onClose}>
      <button className="grug-lightbox__close" onClick={onClose} aria-label="Close"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 5l14 14 M19 5l-14 14"/></svg></button>
      <button className="grug-lightbox__nav grug-lightbox__nav--prev" onClick={(e) => { e.stopPropagation(); onPrev(); }} aria-label="Previous"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 4l-8 8 8 8"/></svg></button>
      <button className="grug-lightbox__nav grug-lightbox__nav--next" onClick={(e) => { e.stopPropagation(); onNext(); }} aria-label="Next"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 4l8 8 -8 8"/></svg></button>
      <div className="grug-lightbox__inner" onClick={(e) => e.stopPropagation()}>
        <img src={R()[p.imgKey]} alt={p.title} className="grug-lightbox__img" />
        <div className="grug-lightbox__meta">
          <span className="grug-tag">{p.tag}</span>
          <div className="grug-lightbox__title">{p.title}</div>
          <div className="grug-lightbox__kind">{p.kind}</div>
          <div className="grug-lightbox__counter">{String(idx + 1).padStart(2,'0')} / {String(projects.length).padStart(2,'0')}</div>
        </div>
      </div>
    </div>
  );
};

const PORTFOLIO_PROJECTS = [
  { tag: 'RYZR MOBILITY · 2026',   title: 'Designing the future of flight.', kind: 'Our studio’s mobility visions.', imgKey: 'ryzrSkyline', featured: true, href: 'RYZR Speedster.html' },
  { tag: 'GRUG STUDIO · 2024',     title: 'Sculpting speed.',                kind: 'Bizjet form study.',           imgKey: 'favoriteAlpine' },
  { tag: 'BONNIE WHISTLER',        title: 'Reimagining the companion.',     kind: 'Consumer product design.',     imgKey: 'doggyHero' },
  { tag: 'NALWA SAVERA · INDIA',   title: 'Crafting the cabin.',             kind: 'Interior architecture.',       imgKey: 'nalwaCabin' },
  { tag: 'NALWA SAVERA · INDIA',   title: 'Shaping urban flight.',           kind: 'eVTOL form language.',         imgKey: 'nalwaMountains' },
  { tag: 'GRUG STUDIO',            title: 'Drawing the supersonic line.',    kind: 'Silhouette study.',            imgKey: 'bjSunset' },
  { tag: 'NALWA SAVERA · INDIA',   title: 'Designing the flight deck.',      kind: 'Cockpit & HMI.',               imgKey: 'nalwaCockpit' },
  { tag: 'URBAN MOBILITY',         title: 'Refining the air taxi.',          kind: 'eVTOL proportion study.',      imgKey: 'extraEvtol' },
  { tag: 'PRIVATE CLIENT',         title: 'Styling private flight.',         kind: 'Tilt-rotor form.',             imgKey: 'clientVtolNyc' },
  { tag: 'NALWA SAVERA · INDIA',   title: 'Sculpting the fuselage.',         kind: 'Surface study.',               imgKey: 'nalwaCruise' },
  { tag: 'GRUG STUDIO',            title: 'Designing electric flight.',      kind: 'Multirotor form.',             imgKey: 'ghostCity' },
  { tag: 'GRUG STUDIO',            title: 'Engineering the cargo drone.',    kind: 'Logistics form factor.',       imgKey: 'ghostCargo' },
  { tag: 'JETX · CO-VENTURE',      title: 'Proving the concept.',            kind: 'Hover demonstrator.',          imgKey: 'clientJetx' },
  { tag: 'NALWA SAVERA · INDIA',   title: 'Perfecting the profile.',         kind: 'eVTOL exterior.',              imgKey: 'nalwaExterior' },
  { tag: 'GRUG STUDIO',            title: 'Shaping the coastal flyer.',      kind: 'eVTOL exterior study.',        imgKey: 'clientHelipad' },
  { tag: 'BONNIE WHISTLER',        title: 'Detailing the form.',             kind: 'Industrial close-up.',         imgKey: 'doggyDetail' },
  { tag: 'GRUG STUDIO',            title: 'Studied in white.',               kind: 'Form & surface study.',        imgKey: 'bjWhite' },
  { tag: 'U.S. AIR FORCE',         title: 'Designing for defense.',          kind: 'Stealth form package.',        imgKey: 'clientStealthFleet' },
  { tag: 'CLASSIFIED',             title: 'Challenging the unseen.',         kind: 'Stealth silhouette.',          imgKey: 'clientStealthSunset' },
  { tag: 'NASA · CONCEPT',         title: 'Exploring new forms.',            kind: 'Mission UAV design.',          imgKey: 'extraNasa' },
  { tag: 'NAVAL · CONCEPT',        title: 'Designing for the carrier.',      kind: 'Maritime eVTOL form.',         imgKey: 'clientNavy' },
  { tag: 'CLASSIFIED',             title: 'Cutting through the sky.',        kind: 'Stealth profile study.',       imgKey: 'clientStealthClouds' },
  { tag: 'VELTRO · CO-VENTURE',    title: 'Shaping the commute.',            kind: 'Quad-tilt air taxi.',          imgKey: 'clientVeltro' },
  { tag: 'SPACE · EXPLORATION',    title: 'Designing for endurance.',        kind: 'Long-range UAV form.',         imgKey: 'clientNasa' },
];
const PORTFOLIO_PATTERN = ['full','three','two','three','full','three','two','three','full','three','two'];

const Portfolio = ({ heading = true, limit = null }) => {
  const head = useReveal();
  const [openIdx, setOpenIdx] = useState(null);
  const projects = PORTFOLIO_PROJECTS;
  const pattern = limit ? ['full','three','two'] : PORTFOLIO_PATTERN;
  const rows = [];
  let cursor = 0;
  pattern.forEach((kind) => {
    const n = kind === 'full' ? 1 : kind === 'two' ? 2 : 3;
    const slice = projects.slice(cursor, cursor + n).map((p, i) => ({ ...p, _absIdx: cursor + i }));
    cursor += n;
    if (slice.length) rows.push({ kind, items: slice });
  });
  return (
    <section id="portfolio" className="grug-portfolio" data-screen-label="Portfolio">
      <div className="grug-mark" aria-hidden="true">03</div>
      <SectionIndex no="03" title="Portfolio" meta={`${projects.length} projects`} />
      {heading && (
        <div ref={head} className="grug-portfolio__head reveal">
          <div>
            <div className="grug-eyebrow center">Selected work</div>
            <h2 className="grug-h2 center">A selection of our work.</h2>
          </div>
          <p className="grug-p lg">Concepts and visualizations developed for our clients and for our own studio explorations.</p>
        </div>
      )}
      <div className="grug-portfolio__rows">
        {rows.map((row, ri) => (
          <div key={ri} className={`grug-prow grug-prow--${row.kind}`}>
            {row.items.map((p) => <Project key={p._absIdx} {...p} onOpen={() => setOpenIdx(p._absIdx)} />)}
          </div>
        ))}
      </div>
      {limit && (
        <div className="grug-portfolio__more">
          <a href="portfolio.html" className="grug-btn grug-btn--ghost">View all {projects.length} projects <span className="chev">›</span></a>
        </div>
      )}
      <Lightbox projects={projects} idx={openIdx} onClose={() => setOpenIdx(null)}
        onPrev={() => setOpenIdx((idx) => (idx + projects.length - 1) % projects.length)}
        onNext={() => setOpenIdx((idx) => (idx + 1) % projects.length)} />
    </section>
  );
};

/* ============ PROTOTYPE ============ */
const Prototype = () => {
  const head = useReveal();
  const centerRef = useReveal();
  const detailRef = useReveal();
  const flightRef = useReveal();
  const details = [
    { n: '01', k: 'PROPULSION', t: 'Twin ducted fans.',      b: 'High-efficiency EDF modules paired with custom inlet ducts — printed, balanced, bench-tested.', imgKey: 'protoTwinFans' },
    { n: '02', k: 'ACTUATION',  t: 'Servo-driven gimbal.',   b: 'Carbon-arm pivot that swings the nozzle through its full thrust-vector envelope.',              imgKey: 'protoHinge' },
    { n: '03', k: 'NOZZLE',     t: 'Printed thrust nozzle.', b: 'Flow visualization confirms attached jet through the convergent exit — no separation, no roar.', imgKey: 'protoNozzleFlow' },
    { n: '04', k: 'VECTORING',  t: 'Deflector vane.',        b: 'Auxiliary aerosurface that translates thrust into pitch authority during slow-flight regimes.',  imgKey: 'protoVane' },
  ];
  return (
    <section id="prototype" className="grug-proto" data-screen-label="Prototype">
      <div className="grug-mark" aria-hidden="true">04</div>
      <SectionIndex no="04" title="Prototype" meta="Concept to hardware" />
      <div ref={head} className="grug-proto__head reveal">
        <div className="grug-eyebrow">From render to runway</div>
        <h2 className="grug-proto__h">Our concepts are designed to <em>fly,</em> not just to render.</h2>
        <p className="grug-proto__lede">The work doesn't stop at a beautiful image. We design surfaces that fabricate, proportions that balance, and propulsion that survives the test bench. Below — one of our concepts, built and airborne with our client partners.</p>
      </div>
      <div ref={centerRef} className="grug-proto__capability reveal">
        <div className="grug-proto__capHead">
          <div className="grug-proto__subTag">CAPABILITY · 01</div>
          <h3 className="grug-proto__subH">Fluidic <em>thrust vectoring,</em> from sketch to hardware.</h3>
          <p className="grug-proto__subLede">A printed, instrumented multirotor demonstrator built around a custom EDF-and-nozzle propulsion stack. Every component drawn, machined, or printed in-studio — then flown.</p>
        </div>
        <div className="grug-proto__centerGrid">
          <figure className="grug-proto__hero">
            <img src={R().protoAirframe} alt="Multi-rotor airframe — full assembly with ducted fans, ESCs, and avionics" />
            <div className="grug-proto__heroPlate"><span className="grug-proto__dot" />AIRFRAME · V2 · STUDIO BUILD</div>
            <figcaption className="grug-proto__heroCap"><span className="grug-proto__capTag">EXPLODED · TOP-DOWN</span>Three ducted-fan units · printed thermoplastic frame · field-replaceable avionics tray.</figcaption>
          </figure>
          <figure className="grug-proto__flow">
            <img src={R().protoFluidic} alt="Head-on view of nozzle exit with flow-visualization smoke" />
            <div className="grug-proto__heroPlate"><span className="grug-proto__dot" />FLOW VIS · SMOKE TUNNEL</div>
            <figcaption className="grug-proto__heroCap"><span className="grug-proto__capTag">HEAD-ON · EXIT PLANE</span>Smoke confirms attached, axisymmetric flow through the printed convergent nozzle.</figcaption>
          </figure>
        </div>
      </div>
      <div ref={detailRef} className="grug-proto__details reveal">
        <div className="grug-proto__subTag">CAPABILITY · 02</div>
        <h3 className="grug-proto__subH">Four assemblies. <em>One propulsion stack.</em></h3>
        <div className="grug-proto__detailGrid">
          {details.map((d) => (
            <figure key={d.n} className="grug-proto__detail">
              <div className="grug-proto__detailImg" style={{ backgroundImage: `url(${R()[d.imgKey]})` }} />
              <figcaption className="grug-proto__detailCap">
                <div className="grug-proto__detailN">{d.n} · {d.k}</div>
                <div className="grug-proto__detailT">{d.t}</div>
                <div className="grug-proto__detailB">{d.b}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
      <div ref={flightRef} className="grug-proto__flight reveal">
        <div className="grug-proto__subTag">CLIENT BUILT · 03</div>
        <h3 className="grug-proto__subH">Nalwa Savera <em>eVTOL</em> — concept to flying prototype.</h3>
        <p className="grug-proto__subLede">Concept design and visualization by GRUG GROUP. Engineering, fabrication, and flight test by our partner <b style={{color:'#fff'}}>Nalwa Aero (India).</b> The frames below are the production hardware — an <b style={{color:'#fff'}}>octacopter with tilting rotors</b> — airborne.</p>
        <div className="grug-proto__nalwaGrid">
          <figure className="grug-proto__nalwaCard nalwa-tl">
            <div className="grug-proto__nalwaImg" style={{ backgroundImage: `url(${R().nalwaProtoPark})` }} />
            <div className="grug-proto__nalwaPlate"><span className="grug-proto__dot" />NALWA SAVERA · IN HOVER</div>
          </figure>
          <figure className="grug-proto__nalwaCard nalwa-tr">
            <div className="grug-proto__nalwaImg" style={{ backgroundImage: `url(${R().nalwaProtoRooftop})` }} />
            <div className="grug-proto__nalwaPlate"><span className="grug-proto__dot" />NALWA SAVERA · IN GROUND EFFECT</div>
            <figcaption className="grug-proto__nalwaCap"><span className="grug-proto__capTag">CLIENT PROTOTYPE · NALWA SAVERA</span>Octacopter with tilting rotors — hover trials near the engineering campus.</figcaption>
          </figure>
          <figure className="grug-proto__nalwaCard nalwa-bl">
            <div className="grug-proto__nalwaImg" style={{ backgroundImage: `url(${R().nalwaProtoGround})` }} />
            <div className="grug-proto__nalwaPlate"><span className="grug-proto__dot" />NALWA SAVERA · STATIC</div>
            <figcaption className="grug-proto__nalwaCap"><span className="grug-proto__capTag">CLIENT PROTOTYPE · NALWA SAVERA</span>Full airframe at rest — eight tilting-rotor units on the ring frame, central pod.</figcaption>
          </figure>
          <figure className="grug-proto__nalwaCard nalwa-br">
            <div className="grug-proto__nalwaImg" style={{ backgroundImage: `url(${R().nalwaProtoClouds})` }} />
            <div className="grug-proto__nalwaPlate"><span className="grug-proto__dot" />NALWA SAVERA · IN FLIGHT</div>
          </figure>
        </div>
      </div>
      <div className="grug-proto__strip">
        <div className="grug-proto__stat"><div className="grug-proto__statK">STAGE</div><div className="grug-proto__statV">Flight-test</div></div>
        <div className="grug-proto__stat"><div className="grug-proto__statK">CONFIG</div><div className="grug-proto__statV">Octacopter · tilt-rotor</div></div>
        <div className="grug-proto__stat"><div className="grug-proto__statK">FABRICATION</div><div className="grug-proto__statV">FDM · in-house</div></div>
        <div className="grug-proto__stat"><div className="grug-proto__statK">DESIGN BY</div><div className="grug-proto__statV">GRUG GROUP</div></div>
      </div>
    </section>
  );
};

/* ============ SPOTLIGHT ============ */
const Spotlight = () => {
  const ref = useReveal();
  return (
    <section className="grug-spotlight" data-screen-label="Spotlight">
      <div className="grug-mark" aria-hidden="true">07</div>
      <SectionIndex no="07" title="Design Boards" meta="Wireframe → Concept → Final" />
      <div ref={ref} className="grug-spotlight__head reveal">
        <div className="grug-eyebrow center">Featured work</div>
        <h2 className="grug-h2 center">Every concept, fully documented.</h2>
        <p className="grug-p lg" style={{margin: '0 auto'}}>Beyond renders — we deliver full design boards, technical views, and presentation materials your team can use the moment we hand them over.</p>
      </div>
      <div className="grug-spotlight__frame">
        <div className="grug-spotlight__img" style={{ backgroundImage: `url(${R().processBoard})` }} />
        <div className="grug-spotlight__overlay"><span className="grug-tag">SUPERSONIC BJ · DESIGN BOARD</span></div>
        <div className="grug-spotlight__phases" aria-hidden="true">
          <div><span className="n">A</span><span className="t">WIREFRAME</span></div>
          <div><span className="n">B</span><span className="t">CONCEPT</span></div>
          <div><span className="n">C</span><span className="t">FINAL RENDER</span></div>
        </div>
      </div>
    </section>
  );
};

/* ============ PROCESS ============ */
const Process = () => {
  const [visible, setVisible] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { setVisible(true); io.unobserve(el); } }); }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const steps = [
    { n: '01', t: 'Discover',  b: 'We sit down with you, understand the mission, the audience, and the ambition. No assumptions.' },
    { n: '02', t: 'Design',    b: 'Form, surface, identity. We move from rough silhouettes to a final visual language.' },
    { n: '03', t: 'Visualize', b: 'Renders, film, and presentation materials — built to win pitches and investor rooms.' },
    { n: '04', t: 'Hand-off',  b: 'A complete concept package, ready for the next step — partner outreach, engineering, or production.' },
  ];
  const headRef = useReveal();
  return (
    <section id="process" ref={ref} className={`grug-process ${visible ? 'is-visible' : ''}`} data-screen-label="Process">
      <div className="grug-mark grug-mark--l" aria-hidden="true">04</div>
      <SectionIndex no="04" title="Process" meta="Four phases" />
      <div ref={headRef} className="grug-process__head reveal">
        <div className="grug-eyebrow center">How we work</div>
        <h2 className="grug-h2 center">From a sketch to a story.</h2>
      </div>
      <div className="grug-process__rail">
        <div className="grug-process__line"><div className="fill" /></div>
        {steps.map(s => (
          <div key={s.n} className="grug-step">
            <div className="grug-step__dot">{s.n}</div>
            <div className="grug-step__title">{s.t}</div>
            <p className="grug-step__body">{s.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ============ LEADERSHIP ============ */
const Leadership = () => {
  const ref = useReveal();
  const leads = [
    {
      name: 'Nelson J.', last: 'Salas', role: 'FOUNDER · LEAD DESIGNER', photo: 'teamNelson',
      bio: [
        'Twenty-nine years moving aircraft from sketch to certification — and the founder behind every line GRUG has drawn since 2017.',
        'Nelson\u2019s practice sits at the intersection of aerospace engineering and industrial design. He has led concept work on more than ten eVTOL platforms, presented at the AFWERX HSVTOL Showcase, and took first place in the 2023 U.S. Army xTech Autonomy Competition — backed by over $500K in U.S. Department of Defense contracts.',
        'Clients from India to Orlando work with him because he stays in the room. The first whiteboard session, the regulator pre-brief, the final hand-off — same person draws the silhouette and signs the engineering memo.',
      ],
      stats: [{ k: 'Experience', v: '29+ years' }, { k: 'eVTOL', v: '10+ concepts' }, { k: 'Programs', v: 'AFWERX · xTech' }, { k: 'Contracts', v: '$500K+ DoD' }],
      tags: ['GRUG GROUP', 'JETX', 'NALWA AERO', 'MATRIX AVIATION'],
    },
    {
      name: 'Urupagua', last: 'Urquiola', role: 'CO-FOUNDER · LEGAL & OPERATIONS', photo: 'teamUrupagua',
      bio: [
        'Co-founder and legal counsel for GRUG Group since 2017. Directs corporate operations, international contracts, and partner agreements across the studio\u2019s defense, space, and commercial mobility engagements.',
        'The reason every deal closes clean.',
      ],
      stats: [{ k: 'Co-Founder', v: 'Since 2017' }, { k: 'Practice', v: 'Aviation Law' }, { k: 'Scope', v: 'International' }, { k: 'Operations', v: 'Studio Ops' }],
      tags: ['LEGAL', 'CONTRACTS', 'COMPLIANCE', 'INVESTOR RELATIONS'],
    },
  ];
  return (
    <section id="leadership" className="grug-leadership" data-screen-label="Leadership">
      <div className="grug-mark" aria-hidden="true">05</div>
      <SectionIndex no="05" title="Leadership" meta="Two partners" />
      <div ref={ref} className="grug-leadership__head reveal">
        <div>
          <div className="grug-eyebrow center">Leadership</div>
          <h2 className="grug-h2 center">The team behind every project.</h2>
        </div>
        <p className="grug-p lg">A two-partner studio. Every project led personally, from the first conversation to the final delivery.</p>
      </div>
      <div className="grug-leadership__grid">
        {leads.map((p, i) => <LeaderCard key={p.last} {...p} idx={i} />)}
      </div>
    </section>
  );
};
const LeaderCard = ({ name, last, role, photo, bio, stats, tags, idx }) => {
  const ref = useReveal();
  return (
    <article ref={ref} className="grug-leader reveal" data-delay={idx * 150}>
      <div className="grug-leader__media">
        <img src={R()[photo]} alt={`${name} ${last}`} />
        <div className="grug-leader__role">{role}</div>
      </div>
      <div className="grug-leader__body">
        <h3 className="grug-leader__name"><span className="block">{name}</span><span className="block chrome">{last}.</span></h3>
        <div className="grug-leader__bioWrap">
          {(Array.isArray(bio) ? bio : [bio]).map((para, i) => <p key={i} className={`grug-p ${i === 0 ? 'is-lede' : ''}`}>{para}</p>)}
        </div>
        <div className="grug-leader__stats">
          {stats.map(s => <div key={s.k} className="grug-leader__stat"><div className="grug-leader__statK">{s.k}</div><div className="grug-leader__statV">{s.v}</div></div>)}
        </div>
        <div className="grug-leader__tags">{tags.map(t => <span key={t} className="grug-leader__tag">{t}</span>)}</div>
      </div>
    </article>
  );
};

/* ============ STORY — About narrative ============ */
const Story = () => {
  const ref = useReveal();
  const pillars = [
    { k: 'VISION',  t: 'A design partner for the future of flight.', b: 'We believe the next era of aviation will be defined as much by how aircraft look and tell their story as by how they fly. We exist to give that story form.' },
    { k: 'MISSION', t: 'Ideas to investor-ready, end to end.', b: 'From the first sketch to the brochure, the render, and the contract — we carry a concept the whole distance, so our clients can walk into any room ready.' },
    { k: 'FOCUS',   t: 'Advanced air mobility & next-gen aviation.', b: 'eVTOL, supersonic, defense, and space — wherever flight is being reinvented, we help shape the concepts that get it funded and built.' },
  ];
  return (
    <section className="grug-story" data-screen-label="Story">
      <div ref={ref} className="grug-story__head reveal">
        <div className="grug-eyebrow center">Our story</div>
        <h2 className="grug-h2 center">Founded in 2017 to design the future of flight.</h2>
        <p className="grug-p lg" style={{margin: '0 auto'}}>GRUG GROUP is an aerospace design studio and aviation solutions company based in Fort Lauderdale, Florida. We partner with aviation companies, agencies, and entrepreneurs worldwide — turning ambitions into concept-ready aircraft and the brand stories that surround them.</p>
      </div>
      <div className="grug-story__grid">
        {pillars.map((p, i) => (
          <StoryCard key={p.k} {...p} delay={i*120} />
        ))}
      </div>
    </section>
  );
};
const StoryCard = ({ k, t, b, delay }) => {
  const ref = useReveal();
  return (
    <div ref={ref} className="grug-story__card reveal" data-delay={delay}>
      <div className="grug-story__k">{k}</div>
      <h3 className="grug-story__t">{t}</h3>
      <p className="grug-story__b">{b}</p>
    </div>
  );
};

/* ============ CTA ============ */
const CTA = () => {
  const ref = useReveal();
  return (
    <section id="cta" className="grug-cta" data-screen-label="CTA">
      <div className="grug-cta__bg" style={{ backgroundImage: `url(${R().clientVtolNyc})` }} />
      <div className="grug-cta__scrim" />
      <div ref={ref} className="grug-cta__inner reveal">
        <div className="grug-eyebrow center">START A PROJECT</div>
        <h2 className="grug-h2 center">Have something<br/>you want to <span className="blu" style={{color:'var(--grug-blue-400)'}}>design?</span></h2>
        <p className="grug-p">Tell us about your idea. We'll come back with a scoped brief, a rough timeline, and a fixed quote — within five business days.</p>
        <a className="grug-btn grug-btn--primary" href="contact.html">Start a project <span className="chev">›</span></a>
      </div>
    </section>
  );
};

/* ============ CONTACT ============ */
const Contact = () => {
  const ref = useReveal();
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', company: '', type: 'Project inquiry', message: '' });
  const onSubmit = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent(`[${form.type}] from ${form.name || 'website'}`);
    const body = encodeURIComponent(
      `Name: ${form.name}\nEmail: ${form.email}\nCompany: ${form.company}\nInquiry: ${form.type}\n\n${form.message}`
    );
    window.location.href = `mailto:info@gruggroup.com?subject=${subject}&body=${body}`;
    setSent(true);
  };
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const channels = [
    { k: 'GENERAL',     v: 'info@gruggroup.com',          href: 'mailto:info@gruggroup.com' },
    { k: 'PARTNERSHIPS',v: 'Co-ventures & suppliers',     href: 'mailto:info@gruggroup.com?subject=Partnership%20inquiry' },
    { k: 'MEDIA',       v: 'Press & editorial',           href: 'mailto:info@gruggroup.com?subject=Media%20inquiry' },
    { k: 'WHATSAPP',    v: 'Message us directly',         href: 'https://wa.link/33zwnl' },
  ];
  const inquiryTypes = ['Project inquiry', 'Partnership', 'Media / press', 'Other'];
  return (
    <section id="contact" className="grug-contact" data-screen-label="Contact">
      <div className="grug-mark" aria-hidden="true">05</div>
      <SectionIndex no="05" title="Contact" meta="Let's build something" />
      <div ref={ref} className="grug-contact__grid reveal">
        <div className="grug-contact__info">
          <div className="grug-eyebrow">Get in touch</div>
          <h2 className="grug-contact__h">Tell us about<br/>your <span className="blu">idea.</span></h2>
          <p className="grug-contact__lede">We work with aviation companies, agencies, and entrepreneurs worldwide. Send us the brief — we'll come back with a scoped proposal, timeline, and fixed quote within five business days.</p>
          <div className="grug-contact__channels">
            {channels.map(c => (
              <a key={c.k} href={c.href} className="grug-contact__channel" target={c.href.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer">
                <div className="grug-contact__channelK">{c.k}</div>
                <div className="grug-contact__channelV">{c.v}</div>
              </a>
            ))}
          </div>
          <div className="grug-contact__hq">
            <div className="grug-contact__hqK">HEADQUARTERS</div>
            <div className="grug-contact__hqV">Fort Lauderdale, Florida · USA</div>
            <div className="grug-contact__hqK" style={{marginTop:'14px'}}>OPERATING SINCE</div>
            <div className="grug-contact__hqV">2017</div>
          </div>
          <div className="grug-contact__socials">
            {window.GRUG.SOCIALS.map(s => (
              <a key={s.k} href={s.href} target="_blank" rel="noopener noreferrer" className="grug-footer__social is-tall" aria-label={s.k} title={s.k}>{s.svg}</a>
            ))}
          </div>
        </div>

        <div className="grug-contact__formWrap">
          {sent ? (
            <div className="grug-contact__sent">
              <div className="grug-contact__sentMark">✓</div>
              <h3>Your email is ready to send.</h3>
              <p>We opened your mail app with the message pre-filled. If it didn't open, write us directly at <a href="mailto:info@gruggroup.com">info@gruggroup.com</a>.</p>
              <button type="button" className="grug-btn grug-btn--ghost" onClick={() => setSent(false)}>Back to form</button>
            </div>
          ) : (
            <form className="grug-contact__form" onSubmit={onSubmit}>
              <div className="grug-field">
                <label htmlFor="cf-name">Name</label>
                <input id="cf-name" type="text" required value={form.name} onChange={set('name')} placeholder="Your name" />
              </div>
              <div className="grug-field grug-field--row">
                <div className="grug-field">
                  <label htmlFor="cf-email">Email</label>
                  <input id="cf-email" type="email" required value={form.email} onChange={set('email')} placeholder="you@company.com" />
                </div>
                <div className="grug-field">
                  <label htmlFor="cf-company">Company</label>
                  <input id="cf-company" type="text" value={form.company} onChange={set('company')} placeholder="Optional" />
                </div>
              </div>
              <div className="grug-field">
                <label>Inquiry type</label>
                <div className="grug-contact__types">
                  {inquiryTypes.map(t => (
                    <button type="button" key={t} className={`grug-contact__type ${form.type === t ? 'is-active' : ''}`} onClick={() => setForm(f => ({ ...f, type: t }))}>{t}</button>
                  ))}
                </div>
              </div>
              <div className="grug-field">
                <label htmlFor="cf-msg">Project details</label>
                <textarea id="cf-msg" rows="5" required value={form.message} onChange={set('message')} placeholder="Tell us about the aircraft, the audience, and what you need — concept, renders, brochure, the full package…" />
              </div>
              <button type="submit" className="grug-btn grug-btn--primary grug-contact__submit">Send inquiry <span className="chev">›</span></button>
              <p className="grug-contact__fine">This opens your email app with the details pre-filled. We reply within five business days.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

/* ---- export ---- */
window.GRUG = Object.assign(window.GRUG || {}, {
  Hero, Marquee, Stats, Capabilities, Services, Clients, Awards, Voices,
  Showreel, Portfolio, Prototype, Spotlight, Process, Leadership, Story, CTA, Contact,
});