/* global React */
const { useState: sU, useEffect: sE, useRef: sR } = React;

/* ── Premium CSS injection ─────────────────────── */
(function injectPremiumStyles() {
  if (document.getElementById('aura-premium-css')) return;
  const s = document.createElement('style');
  s.id = 'aura-premium-css';
  s.textContent = `
    /* Cinematic vignette */
    body::after {
      content: '';
      position: fixed; inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.32));
      z-index: 999;
    }

    /* Premium flip/product card */
    .premium-card {
      background: rgba(255,255,255,0.03);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 30px;
      box-shadow:
        0 30px 80px rgba(0,0,0,0.35),
        inset 0 1px 1px rgba(255,255,255,0.10);
      transition:
        transform 0.7s cubic-bezier(0.16,1,0.3,1),
        box-shadow 0.5s ease,
        border-color 0.4s ease;
      overflow: hidden;
      will-change: transform;
    }
    .premium-card::before {
      content: '';
      position: absolute;
      inset: -100%;
      background: radial-gradient(circle at center, rgba(255,255,255,0.14), transparent 65%);
      opacity: 0;
      transition: opacity 0.8s ease;
      pointer-events: none;
    }
    .premium-card:hover {
      border-color: rgba(255,255,255,0.28);
      box-shadow:
        0 40px 100px rgba(0,0,0,0.45),
        0 0 60px rgba(255,255,255,0.06);
    }
    .premium-card:hover::before { opacity: 1; }

    /* Image zoom inside flip front */
    .flip-front .placeholder img,
    .product-card .placeholder img {
      transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
    }
    .premium-card:hover .flip-front .placeholder img,
    .premium-card:hover .product-card .placeholder img {
      transform: scale(1.08);
    }

    /* Partner cards */
    .partner-card-premium {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.025);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow:
        0 24px 64px rgba(0,0,0,0.28),
        inset 0 1px 1px rgba(255,255,255,0.08);
      transition:
        transform 0.6s cubic-bezier(0.16,1,0.3,1),
        box-shadow 0.5s ease,
        border-color 0.4s ease;
      will-change: transform;
      cursor: default;
    }
    .partner-card-premium::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
      pointer-events: none;
    }
    .partner-card-premium:hover {
      border-color: rgba(255,255,255,0.22);
      box-shadow:
        0 40px 90px rgba(0,0,0,0.38),
        0 0 50px rgba(255,255,255,0.05);
    }
    .partner-img-wrap {
      overflow: hidden;
    }
    .partner-img-wrap img {
      transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
    }
    .partner-card-premium:hover .partner-img-wrap img {
      transform: scale(1.06);
    }

    /* Animated gradient divider */
    .gradient-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        var(--accent) 30%,
        rgba(201,169,110,0.6) 60%,
        transparent 100%
      );
      background-size: 200% 100%;
      animation: dividerShift 4s ease-in-out infinite alternate;
    }
    @keyframes dividerShift {
      from { background-position: 0% 0%; }
      to   { background-position: 100% 0%; }
    }

    /* Floating light particles */
    .particle {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      animation: particleFloat linear infinite;
      opacity: 0;
    }
    @keyframes particleFloat {
      0%   { transform: translateY(0) scale(1);   opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 0.6; }
      100% { transform: translateY(-120px) scale(0.4); opacity: 0; }
    }
  `;
  document.head.appendChild(s);
})();

/* ── Marquee strip ─────────────────────────────── */
function Marquee() {
  const items = [
    'Immersive 360°',
    'Architecture & Interior',
    'WebXR Ready',
    'Real-time Sync',
    '11 Cities',
    'Studio Aura',
    'No Install',
    'Design before built',
  ];
  const row = [...items, ...items, ...items];
  return (
    <div style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', padding: '22px 0', overflow: 'hidden', background: 'var(--bg-2)' }}>
      <div className="marquee">
        {row.map((it, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 28, marginRight: 40 }}>
            <span className="serif" style={{ fontSize: 32, lineHeight: 1, color: 'var(--ink)' }}>{it}</span>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)' }} />
          </span>
        ))}
      </div>
    </div>
  );
}

/* ── Spaces row ────────────────────────────────── */
/* ── Flip card (front: image · back: description + CTA) ─ */
function FlipCard({ space, aspect }) {
  const [flipped, setFlipped] = sU(false);
  const cardRef = sR(null);
  const I = window.IMAGES || {};

  function handleMouseMove(e) {
    const el = cardRef.current;
    if (!el || flipped) return;
    const { left, top, width, height } = el.getBoundingClientRect();
    const x = (e.clientX - left) / width  - 0.5;
    const y = (e.clientY - top)  / height - 0.5;
    el.style.transform = `perspective(1800px) rotateY(${x * 12}deg) rotateX(${-y * 10}deg) translateZ(8px)`;
  }
  function handleMouseLeave() {
    const el = cardRef.current;
    if (!el) return;
    el.style.transform = 'perspective(1800px) rotateY(0deg) rotateX(0deg) translateZ(0px)';
  }

  return (
    <div
      ref={cardRef}
      className="flip-card premium-card"
      data-cursor="view"
      onClick={() => setFlipped(f => !f)}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{
        aspectRatio: aspect,
        cursor: 'pointer',
        position: 'relative',
        overflow: 'hidden',
        borderRadius: 30,
        transition: 'transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease, border-color 0.4s ease',
      }}
    >
      <div className={`flip-inner ${flipped ? 'is-flipped' : ''}`}>
        <div className="flip-face flip-front">
          <div className={`placeholder ${space.ph}`} style={{ '--img': `url(${I[space.img]})`, width: '100%', height: '100%' }}><span>{space.tag}</span></div>
          <div className="flip-hint mono">↻ Flip</div>
        </div>
        <div className="flip-face flip-back">
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 14 }}>
            {space.id} · {space.tag}
          </div>
          <div className="serif" style={{ fontSize: 'clamp(22px, 2.4vw, 32px)', lineHeight: 1.1, marginBottom: 16 }}>
            View the interior at your convenience.
          </div>
          <p style={{ fontSize: 13, color: 'var(--ink-mid)', lineHeight: 1.65, marginBottom: 'auto' }}>
            {space.desc || 'Pan, walk, scrub through time of day. Re-skin walls, swap finishes, share with one link.'}
          </p>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 20, gap: 12 }}>
            <a href="/experience" onClick={(e)=>e.stopPropagation()} className="btn-primary" style={{ padding: '12px 18px', fontSize: 10 }}>
              Step Inside
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
            </a>
            <span className="mono" style={{ fontSize: 9, letterSpacing: '0.18em', color: 'var(--ink-mid)', textTransform: 'uppercase' }}>
              {space.city}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

const SPACES = [
  { id: '01', title: 'Penthouse 02',  city: 'Lisbon',     ph: 'ph-bone',     img: 'livingWarm',  tag: '360° Tour' },
  { id: '02', title: 'North Loft',    city: 'Berlin',     ph: 'ph-shadow',   img: 'loftBerlin',  tag: '3D Walkthrough' },
  { id: '03', title: 'Sun Room',      city: 'Lisbon',     ph: 'ph-clay',     img: 'windowView',  tag: 'AR Preview', desc: 'A west-facing reading room. Walls warm with light through the afternoon — preview the swing of shadow across every surface.' },
  { id: '04', title: 'Cabin 11',      city: 'Hokkaido',   ph: 'ph-graphite', img: 'cabinJp',     tag: 'VR Ready',   desc: 'A two-person retreat. Black timber, snow at the window, a single hearth. Walk it in headset before the foundation is poured.' },
  { id: '05', title: 'Atelier 04',    city: 'Paris',      ph: 'ph-mist',     img: 'archLight',   tag: '360° Tour',  desc: 'A working studio above the courtyard — daylight from three directions. Inspect every join, every shelf, at human scale.' },
  { id: '06', title: 'Garden Pavilion', city: 'Kyoto',    ph: 'ph-sage',     img: 'pavilion',    tag: '3D Model',   desc: 'A glass room set among maples. Time-of-day toggle reveals how it lives from dawn to dusk through the seasons.' },
];

// patch first two with descriptions
SPACES[0].desc = 'Top-floor residence with sea horizon. Step in, walk corner to corner, change the cabinetry on the fly — your interior, before it becomes interior.';
SPACES[1].desc = 'A converted printworks. We modelled every brick, every beam — choose your bedroom palette and watch the loft re-light around you.';

function SpacesSection() {
  return (
    <section id="spaces" style={{ padding: '160px 0 120px' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 32px' }}>
        <FadeUp>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 80 }}>
            <span className="section-tag">— 01 / Spaces</span>
          </div>
        </FadeUp>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 36, marginBottom: 80 }}>
          <h2 className="serif kerning-tight" style={{ fontSize: 'clamp(40px, 6.5vw, 110px)', lineHeight: 0.95, maxWidth: 1100 }}>
            <Reveal text="Every room a draft," />
            <br />
            <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>
              <Reveal text="every detail rehearsed." baseDelay={0.2} />
            </span>
          </h2>
          <FadeUp delay={0.3} className="" >
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <p style={{ maxWidth: 380, color: 'var(--ink-mid)', fontSize: 14, lineHeight: 1.7 }}>
                Six environments, hand-modelled and lit. Pan, walk, scrub through time of day —
                or pin them to your floor with AR and stand inside.
              </p>
            </div>
          </FadeUp>
        </div>

        <div className="space-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          {SPACES.map((s, i) => {
            const span = i % 5 === 0 ? 6 : i % 5 === 1 ? 6 : i % 5 === 2 ? 4 : i % 5 === 3 ? 4 : 4;
            const aspect = i % 5 === 0 ? '5/4' : i % 5 === 1 ? '5/4' : '4/5';
            return (
              <FadeUp key={s.id} delay={i*0.08} className="" >
                <div className="space-cell" style={{ gridColumn: `span ${span}` }}>
                  <FlipCard space={s} aspect={aspect} />
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginTop: 16, gap: 12 }}>
                    <div>
                      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-mid)', textTransform: 'uppercase', marginBottom: 6 }}>
                        {s.id} / {s.city}
                      </div>
                      <div className="serif" style={{ fontSize: 28, lineHeight: 1.1 }}>{s.title}</div>
                    </div>
                    <span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--accent)', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
                      ↗ Click to flip
                    </span>
                  </div>
                </div>
              </FadeUp>
            );
          })}
        </div>

        <FadeUp delay={0.2}>
          <div style={{ marginTop: 80, display: 'flex', justifyContent: 'flex-end' }}>
            <Magnetic strength={0.25}>
              <a href="#" className="btn-ghost" data-cursor="click">All 24 Spaces ↗</a>
            </Magnetic>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

/* ── Experience (3D / AR / VR) ─────────────────── */
function ExperienceSection() {
  return (
    <section id="experience" style={{ padding: '140px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 32px' }}>
        <FadeUp>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 60 }}>
            <span className="section-tag">— 02 / Experience</span>
          </div>
        </FadeUp>

        <h2 className="serif kerning-tight" style={{ fontSize: 'clamp(40px, 6.5vw, 110px)', lineHeight: 0.95, marginBottom: 80, maxWidth: 1100 }}>
          <Reveal text="Three lenses." />
          <br />
          <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>
            <Reveal text="One unbuilt world." baseDelay={0.2} />
          </span>
        </h2>

        <div className="exp-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {[
            { num: '3D', title: 'Walk-through',    desc: 'Drag to orbit, scroll to zoom, tap to step inside any object.',    ph: 'ph-shadow', img: 'arch3',      href: '/experience' },
            { num: 'AR', title: 'Real-room scale', desc: 'Pin a model to your floor at 1:1 — phone or tablet, no install.', ph: 'ph-clay',   img: 'floorPlan',  href: '#ar-soon' },
            { num: 'XR', title: 'VR ready',        desc: 'Headset playback in WebXR. Spatial audio mapped per surface.',    ph: 'ph-sage',   img: 'vrHeadset',  href: '/experience' },
          ].map((c, i) => (
            <FadeUp key={i} delay={i*0.1}>
              <a href={c.href} data-cursor="view" style={{ display: 'block' }}>
                <div className="product-card premium-card" style={{ aspectRatio: '4/5', marginBottom: 18, position: 'relative' }}>
                  <div className={`placeholder ${c.ph}`} style={{ '--img': `url(${(window.IMAGES||{})[c.img]})` }}><span>{c.num} Capture</span></div>
                </div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 8 }}>
                  Mode {String(i+1).padStart(2, '0')} · {c.num}
                </div>
                <div className="serif" style={{ fontSize: 32, lineHeight: 1.05, marginBottom: 8 }}>{c.title}</div>
                <p style={{ color: 'var(--ink-mid)', fontSize: 13, maxWidth: 320, lineHeight: 1.6 }}>{c.desc}</p>
              </a>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Manifesto ─────────────────────────────────── */
function Manifesto() {
  return (
    <section id="manifesto" style={{ padding: '180px 0' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
        <FadeUp>
          <span className="section-tag">— 03 / Manifesto</span>
        </FadeUp>
        <div style={{ marginTop: 60 }}>
          <p className="serif kerning-tight" style={{ fontSize: 'clamp(32px, 4.4vw, 72px)', lineHeight: 1.15 }}>
            <Reveal text="A room is a question." />
            <br />
            <Reveal text="Drawings answer in lines;" baseDelay={0.2} />
            <br />
            <span style={{ color: 'var(--ink-mid)' }}>
              <Reveal text="renders answer in glass." baseDelay={0.4} />
            </span>
            <br />
            <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>
              <Reveal text="We answer in footsteps." baseDelay={0.6} />
            </span>
          </p>
        </div>

        <FadeUp delay={0.4}>
          <div className="stat-grid" style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, paddingTop: 40, borderTop: '1px solid var(--line)' }}>
            {[
              ['024', 'spaces published'],
              ['11', 'studios worldwide'],
              ['97k', 'visitors / month'],
              ['2.4M', 'square feet rendered'],
            ].map(([n, l], i) => (
              <div key={i}>
                <div className="serif" style={{ fontSize: 56, lineHeight: 1, marginBottom: 8 }}>{n}</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-mid)', textTransform: 'uppercase' }}>{l}</div>
              </div>
            ))}
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

/* ── Journal ───────────────────────────────────── */
const JOURNAL = [
  { tag: 'Note',  date: 'May 02, 2026', title: 'On the silence inside soft rooms',     ph: 'ph-mist',     img: 'essay1' },
  { tag: 'Field', date: 'Apr 18, 2026', title: 'Three weeks in a half-finished house', ph: 'ph-rust',     img: 'essay2' },
  { tag: 'Tools', date: 'Mar 30, 2026', title: 'Why we ship in WebXR, not WebGL',      ph: 'ph-graphite', img: 'essay3' },
];

function JournalSection() {
  return (
    <section id="journal" style={{ padding: '140px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 32px' }}>
        <FadeUp>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80, gap: 32, flexWrap: 'wrap' }}>
            <h2 className="serif kerning-tight" style={{ fontSize: 'clamp(40px, 5.5vw, 88px)', lineHeight: 0.95 }}>
              <Reveal text="From the" />{' '}
              <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>
                <Reveal text="Journal." baseDelay={0.2} />
              </span>
            </h2>
            <a href="#" className="link-line mono" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase' }} data-cursor="click">
              All entries ↗
            </a>
          </div>
        </FadeUp>

        <div className="journal-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {JOURNAL.map((j, i) => (
            <FadeUp key={i} delay={i*0.1}>
              <a href="#" className="journal-card" data-cursor="view">
                <div className="img-wrap"><div className={`placeholder ${j.ph}`} style={{ '--img': `url(${(window.IMAGES||{})[j.img]})` }}><span>Photo Essay</span></div></div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-mid)', textTransform: 'uppercase', marginBottom: 12 }}>
                  {j.tag} — {j.date}
                </div>
                <div className="serif" style={{ fontSize: 28, lineHeight: 1.15, maxWidth: 380 }}>{j.title}</div>
              </a>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Trusted Partners ──────────────────────────── */
function PartnerRow({ p, i }) {
  const cardRef = sR(null);
  const [hovered, setHovered] = sU(false);
  const isEven = i % 2 === 0;

  function handleMouseMove(e) {
    const el = cardRef.current;
    if (!el) return;
    const { left, top, width, height } = el.getBoundingClientRect();
    const x = (e.clientX - left) / width  - 0.5;
    const y = (e.clientY - top)  / height - 0.5;
    el.style.transform = `perspective(1600px) rotateY(${x * 4}deg) rotateX(${-y * 3}deg)`;
  }
  function handleMouseLeave() {
    const el = cardRef.current;
    if (!el) return;
    el.style.transform = 'perspective(1600px) rotateY(0deg) rotateX(0deg)';
    setHovered(false);
  }

  const logoPanel = (
    <div style={{
      flex: '0 0 45%',
      background: hovered
        ? 'linear-gradient(145deg, #fffef9, #f0ece2)'
        : 'linear-gradient(145deg, #fdfcf7, #ede9df)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '56px 64px',
      position: 'relative', overflow: 'hidden',
      transition: 'background 0.5s ease',
      minHeight: 300,
    }}>
      {/* Subtle radial glow behind logo */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.8) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />
      {/* Top-left texture lines */}
      <div style={{
        position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
        backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(21,20,15,0.025) 47px, rgba(21,20,15,0.025) 48px)',
        pointerEvents: 'none',
      }} />
      <img
        src={p.logo}
        alt={p.name}
        style={{
          width: '100%', height: '100%', maxHeight: 180,
          objectFit: 'contain', display: 'block',
          position: 'relative', zIndex: 1,
          transition: 'transform 0.7s cubic-bezier(0.16,1,0.3,1)',
          transform: hovered ? 'scale(1.06)' : 'scale(1)',
        }}
      />
      {/* Index number */}
      <div className="serif" style={{
        position: 'absolute', bottom: 20, left: 28,
        fontSize: 72, lineHeight: 1, color: 'rgba(21,20,15,0.055)',
        fontStyle: 'italic', userSelect: 'none', pointerEvents: 'none',
      }}>
        {String(i + 1).padStart(2, '0')}
      </div>
    </div>
  );

  const detailPanel = (
    <div style={{
      flex: 1,
      background: '#15140F',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      padding: '56px 60px',
      position: 'relative', overflow: 'hidden',
      minHeight: 300,
    }}>
      {/* Ambient glow */}
      <div style={{
        position: 'absolute',
        width: 400, height: 400, borderRadius: '50%',
        background: `radial-gradient(circle, rgba(184,92,58,${hovered ? 0.12 : 0.06}), transparent 70%)`,
        right: -100, top: '50%', transform: 'translateY(-50%)',
        transition: 'background 0.5s ease',
        pointerEvents: 'none',
      }} />
      {/* Grain */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.04, pointerEvents: 'none',
        backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
        backgroundSize: '160px 160px',
      }} />

      <div style={{ position: 'relative', zIndex: 1 }}>
        {/* Eyebrow */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
          <div style={{
            width: 32, height: 1,
            background: 'linear-gradient(90deg, var(--accent), transparent)',
          }} />
          <span className="mono" style={{
            fontSize: 9, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'rgba(239,234,224,0.4)',
          }}>Partner {String(i + 1).padStart(2, '0')}</span>
        </div>

        {/* Name */}
        <div className="serif" style={{
          fontSize: 'clamp(28px, 3vw, 44px)',
          lineHeight: 1.1, color: '#EFEAE0',
          marginBottom: 20,
          letterSpacing: '-0.01em',
          whiteSpace: 'pre-line',
        }}>{p.name}</div>

        {/* Tagline with gradient */}
        <div className="mono" style={{
          fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
          background: 'linear-gradient(90deg, #B85C3A, #C9A96E)',
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          marginBottom: 36,
        }}>{p.tagline}</div>

        {/* Meta pills */}
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {p.meta.map((m, mi) => (
            <span key={mi} className="mono" style={{
              fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
              padding: '7px 14px', borderRadius: 999,
              border: '1px solid rgba(239,234,224,0.12)',
              color: 'rgba(239,234,224,0.5)',
              transition: 'border-color 0.3s, color 0.3s',
            }}>{m}</span>
          ))}
        </div>
      </div>

      {/* Animated accent line at bottom */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0,
        height: 2,
        width: hovered ? '100%' : '0%',
        background: 'linear-gradient(90deg, var(--accent), #C9A96E)',
        transition: 'width 0.6s cubic-bezier(0.16,1,0.3,1)',
      }} />
    </div>
  );

  return (
    <FadeUp delay={i * 0.15}>
      <div
        ref={cardRef}
        onMouseMove={handleMouseMove}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={handleMouseLeave}
        style={{
          display: 'flex',
          flexDirection: isEven ? 'row' : 'row-reverse',
          overflow: 'hidden',
          border: '1px solid rgba(21,20,15,0.1)',
          transition: 'transform 0.55s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease',
          boxShadow: hovered
            ? '0 32px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(184,92,58,0.2)'
            : '0 8px 32px rgba(0,0,0,0.08)',
          willChange: 'transform',
        }}
      >
        {logoPanel}
        {detailPanel}
      </div>
    </FadeUp>
  );
}

function TrustedPartners() {
  const partners = [
    {
      name: 'VK Builders',
      logo: '/latest/partner-vk-builders.jpeg',
      tagline: 'Quality · Stability · Trust',
      meta: ['Construction', 'Residential', 'Hyderabad'],
    },
    {
      name: 'Sri SVK Durga\nConstruction Services Pvt Ltd',
      logo: '/latest/partner-svk-durga.jpeg',
      tagline: 'Building excellence since inception',
      meta: ['Real Estate', 'Commercial', 'Khammam'],
    },
  ];

  return (
    <section style={{ padding: '160px 0', position: 'relative', overflow: 'hidden', background: '#EFEAE0' }}>
      {/* Faint ruled lines texture */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.03,
        backgroundImage: 'repeating-linear-gradient(to bottom, transparent 0px, transparent 47px, #15140F 47px, #15140F 48px)',
      }} />

      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>

        {/* Header */}
        <FadeUp>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 80, gap: 32, flexWrap: 'wrap' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
                <div style={{ width: 40, height: 1, background: 'var(--accent)' }} />
                <span className="mono" style={{ fontSize: 9, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--ink-mid)' }}>Trusted Partners</span>
              </div>
              <h2 className="serif kerning-tight" style={{ fontSize: 'clamp(48px, 7vw, 100px)', lineHeight: 0.92, letterSpacing: '-0.02em' }}>
                Built on<br />
                <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>trust.</span>
              </h2>
            </div>
            <p style={{ maxWidth: 320, fontSize: 14, color: 'var(--ink-mid)', lineHeight: 1.75 }}>
              Our partners bring decades of construction expertise, anchoring every immersive preview in real-world buildability.
            </p>
          </div>
        </FadeUp>

        {/* Partner rows */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {partners.map((p, i) => <PartnerRow key={i} p={p} i={i} />)}
        </div>

        {/* Footer rule */}
        <FadeUp delay={0.3}>
          <div style={{ marginTop: 80, display: 'flex', alignItems: 'center', gap: 20 }}>
            <div className="gradient-divider" style={{ flex: 1 }} />
            <span className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-mid)', whiteSpace: 'nowrap' }}>
              {partners.length} active partnerships
            </span>
            <div className="gradient-divider" style={{ flex: 1 }} />
          </div>
        </FadeUp>

      </div>
    </section>
  );
}

/* ── Footer ────────────────────────────────────── */
function Footer() {
  return (
    <footer style={{ padding: '120px 0 40px' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 32px' }}>
        <FadeUp>
          <h2 className="serif kerning-tight" style={{ fontSize: 'clamp(60px, 12vw, 220px)', lineHeight: 0.86, marginBottom: 60, whiteSpace: 'nowrap' }}>
            <Reveal text="Step inside. " />
            <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>
              <Reveal text="Aura." baseDelay={0.2} />
            </span>
          </h2>
        </FadeUp>

        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, paddingTop: 60, borderTop: '1px solid var(--line)' }}>
          <div>
            <img src="/latest/logo-dark.png" alt="Aura World 4U" style={{ height: 36, width: 'auto', marginBottom: 20 }} />
            <div style={{ fontSize: 14, color: 'var(--ink-mid)', lineHeight: 1.7, maxWidth: 300 }}>
              Aura is an immersive design studio. We render, walk, revise — then build only what survived.
            </div>
          </div>

          <div>
            <div className="footer-mono" style={{ color: 'var(--ink-mid)', marginBottom: 12 }}>Index</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {['Spaces', 'Experience', 'Manifesto', 'Journal'].map(l => (
                <a key={l} href={`#${l.toLowerCase()}`} className="link-line" data-cursor="click">{l}</a>
              ))}
            </div>
          </div>

          <div>
            <div className="footer-mono" style={{ color: 'var(--ink-mid)', marginBottom: 12 }}>Contact</div>
            <div style={{ fontSize: 14, color: 'var(--ink)', marginBottom: 4, fontFamily: 'Inter, sans-serif', letterSpacing: 'normal', fontWeight: 400 }}>auraworld4u@gmail.com</div>
            <div style={{ fontSize: 14, color: 'var(--ink-mid)', fontFamily: 'Inter, sans-serif', letterSpacing: 'normal', fontWeight: 400 }}>Hyderabad</div>
          </div>

          <div>
            <div className="footer-mono" style={{ color: 'var(--ink-mid)', marginBottom: 16 }}>Follow</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                {
                  label: 'Instagram',
                  href: 'https://www.instagram.com/auraworld4u?igsh=bWw0azJrbmtrYXl3&utm_source=qr',
                  color: '#E1306C',
                  icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>,
                },
                {
                  label: 'Facebook',
                  href: 'https://www.facebook.com/share/1CbfJ38DAS/?mibextid=wwXIfr',
                  color: '#1877F2',
                  icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>,
                },
                {
                  label: 'YouTube',
                  href: 'https://youtube.com/@auraworld-4u?si=fM7vBifv0yVZ_Ntj',
                  color: '#FF0000',
                  icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>,
                },
              ].map(({ label, href, icon, color }) => (
                <a
                  key={label}
                  href={href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  title={label}
                  data-cursor=""
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    height: 38, borderRadius: 999,
                    border: '1px solid var(--line)',
                    color: 'var(--ink-mid)',
                    padding: '0 14px',
                    fontSize: 11,
                    letterSpacing: '0.12em',
                    textTransform: 'uppercase',
                    fontFamily: "'JetBrains Mono', monospace",
                    transition: 'border-color .25s, color .25s, background .25s',
                    whiteSpace: 'nowrap',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = color; e.currentTarget.style.color = color; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.color = 'var(--ink-mid)'; }}
                >
                  {icon}
                  {label}
                </a>
              ))}
            </div>
          </div>
        </div>

        <div style={{ marginTop: 48, paddingTop: 28, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span className="footer-mono" style={{ color: 'var(--ink-mid)' }}>© 2026 Aura Studio</span>
          <span className="footer-mono" style={{ color: 'var(--ink-mid)' }}>Built in motion </span>
        </div>
      </div>
    </footer>
  );
}

window.Marquee = Marquee;
window.SpacesSection = SpacesSection;
window.ExperienceSection = ExperienceSection;
window.Manifesto = Manifesto;
window.JournalSection = JournalSection;
window.TrustedPartners = TrustedPartners;
window.Footer = Footer;