// "What's inside" — the three studios (Product / Social / Poster).
// Earns the broader "Vault Creative Studio" name: place a product, make ads
// and social posts, or design a poster from a prompt with no product at all.
const STUDIOS = [
  {
    name: 'Product Studio',
    desc: 'Drop your product into any of 10,000+ real Vault Stock photographs.',
    img: 'assets/byredo-output.jpg',
    tag: null,
  },
  {
    name: 'Social Studio',
    desc: 'Turn it into scroll-stopping ads and social posts in seconds.',
    img: 'assets/colby-press.jpg',
    tag: null,
  },
  {
    name: 'Poster Studio',
    desc: 'Design any poster from a single line of text.',
    img: '/product-studio/poster-examples/quiet-riot.webp',
    tag: null,
  },
  {
    name: 'Image Studio',
    desc: 'No product? Generate your own images, or tweak ours to suit you.',
    img: 'assets/agave-moody.jpg',
    tag: null,
  },
];

function PSStudios() {
  return (
    <section id="studios" className="ps-section" data-mobile-pad="true" data-mobile-y="lg" style={{ background: 'var(--cream)', padding: '128px 48px 96px', position: 'relative' }}>
      <style>{`
        .ps-studios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        .ps-studio-card { transition: transform 280ms cubic-bezier(.22,.61,.36,1); }
        .ps-studio-card:hover { transform: translateY(-6px); }
        .ps-studio-card:hover .ps-studio-open { gap: 12px; }
        @media (max-width: 1100px) { .ps-studios-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
        @media (max-width: 600px) { .ps-studios-grid { grid-template-columns: 1fr; } }
      `}</style>

      {/* Header */}
      <div className="ps-stack-mobile" style={{ maxWidth: 1320, margin: '0 auto 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--cocoa)', verticalAlign: 'middle', marginRight: 12 }}></span>
            What&rsquo;s inside
          </div>
          <h2 className="celestial" style={{ fontSize: 'clamp(48px, 6vw, 96px)', color: 'var(--cocoa)', margin: 0, lineHeight: 0.98 }}>
            Four ways to create,<br/>one place.
          </h2>
        </div>
        <p style={{ fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: 480, margin: 0, justifySelf: 'end' }}>
          Bring a product, or come empty-handed. Place it in a real scene, spin it into ads and social posts, or design a poster from a single line of text. All built on real Vault Stock photography.
        </p>
      </div>

      {/* Cards */}
      <div className="ps-studios-grid" style={{ maxWidth: 1320, margin: '0 auto' }}>
        {STUDIOS.map((s) => (
          <a key={s.name} href={window.PORTAL_URL || '/dashboard/product-studio'} className="ps-studio-card" style={{ textDecoration: 'none', display: 'flex', flexDirection: 'column' }}>
            <div style={{ position: 'relative', width: '100%', aspectRatio: '4 / 5', overflow: 'hidden', borderRadius: 4, background: 'var(--cocoa-deep, #1d1814)', boxShadow: '0 20px 44px -22px rgba(42,36,32,0.4)' }}>
              <img src={s.img} alt={s.name} loading="lazy" decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }} />
              {s.tag && (
                <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: '"La Villa", sans-serif', fontSize: 9.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cream)', background: 'rgba(42,36,32,0.6)', backdropFilter: 'blur(6px)', padding: '6px 10px', borderRadius: 999 }}>{s.tag}</div>
              )}
            </div>
            <div style={{ paddingTop: 20 }}>
              <h3 className="celestial" style={{ fontSize: 26, color: 'var(--cocoa)', margin: 0, letterSpacing: '0.01em' }}>{s.name}</h3>
              <p style={{ fontFamily: '"La Villa", sans-serif', fontSize: 15, lineHeight: 1.55, color: 'var(--fg-2)', margin: '10px 0 0', maxWidth: 360 }}>{s.desc}</p>
              <span className="ps-studio-open" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 16, fontFamily: '"La Villa", sans-serif', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--cocoa)', transition: 'gap 240ms cubic-bezier(.22,.61,.36,1)' }}>
                Open <span aria-hidden="true">→</span>
              </span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { PSStudios });