/* Gallery: real apps built in the Studio, with real screenshots. */

const GALLERY = [
  { id: 'healthcare',  title: 'Healthcare Patient Portal', prompt: 'Build a healthcare patient portal dashboard', type: 'Portal',    color: '#5eead4', stack: ['React', 'Tailwind'],  image: '/screenshots/healthcare-portal.png', href: '/gallery.html#healthcare-patient-portal' },
  { id: 'onboarding',  title: 'Employee Onboarding',       prompt: 'Internal onboarding checklist & doc portal',   type: 'Portal',    color: '#60a5fa', stack: ['React', 'Tailwind'],  image: '/screenshots/employee-onboarding.png', href: '/gallery.html#employee-onboarding' },
  { id: 'ml',          title: 'ML Model Monitoring',       prompt: 'Dashboard for live ML model drift & metrics',  type: 'Dashboard', color: '#c084fc', stack: ['React', 'Recharts'],  image: '/screenshots/ml-monitoring.png', href: '/gallery.html#ml-model-monitoring' },
  { id: 'shopify',     title: 'Shopify ⇄ QuickBooks Sync', prompt: 'Sync Shopify orders into QuickBooks nightly',  type: 'Commerce',  color: '#fb923c', stack: ['Node', 'Stripe API'], image: '/screenshots/shopify-sync.png', href: '/gallery.html#shopify-quickbooks-sync' },
  { id: 'pipeline',    title: 'Data Pipeline Monitor',     prompt: 'Track ETL job health across sources',          type: 'Dashboard', color: '#f472b6', stack: ['React', 'D3'],        image: '/screenshots/data-pipeline.png', href: '/gallery.html#data-pipeline-monitor' },
  { id: 'competitive', title: 'Competitive Intelligence',  prompt: 'Scrape competitor pricing + generate brief',   type: 'Report',    color: '#34d399', stack: ['Node', 'Playwright'], image: '/screenshots/competitive-intel.png', href: '/gallery.html#competitive-intelligence' },
];

const GallerySection = () => {
  const items = GALLERY;

  return (
    <section style={{ paddingTop: 120, paddingBottom: 60, position: 'relative' }}>
      <Container wide>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 40, gap: 40, flexWrap: 'wrap',
        }}>
          <div style={{ maxWidth: 720 }}>
            <SectionLabel index={3} label="BUILT IN THE STUDIO" />
            <DisplayTitle size={54}>
              Real apps, <Italic style={{ color: 'var(--accent-2)' }}>one prompt each.</Italic><br/>
              Full source, no templates.
            </DisplayTitle>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 18,
        }} className="gallery-grid">
          {items.map((g) => <GalleryCard key={g.id} {...g} />)}
        </div>

        <div style={{
          marginTop: 36,
          display: 'flex', alignItems: 'center', gap: 14, justifyContent: 'center',
        }}>
          <a href="/gallery.html" style={{ textDecoration: 'none' }}>
            <GhostBtn trailing={<I.arrow size={14} />}>Browse the full gallery</GhostBtn>
          </a>
        </div>
      </Container>
    </section>
  );
};

const GalleryCard = ({ id, title, prompt, type, color, stack, image, href }) => {
  const [h, setH] = React.useState(false);
  return (
    <a
      href={href || '/gallery.html'}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        display: 'block',
        background: 'var(--bg-1)',
        border: `1px solid ${h ? 'var(--line-3)' : 'var(--line-2)'}`,
        borderRadius: 14,
        overflow: 'hidden',
        cursor: 'pointer',
        transition: 'transform 200ms, border-color 200ms, box-shadow 200ms',
        transform: h ? 'translateY(-2px)' : 'none',
      }}>
      {/* Preview */}
      <div style={{
        position: 'relative',
        height: 210,
        background: `linear-gradient(135deg, ${color}18, var(--bg-0))`,
        borderBottom: '1px solid var(--line-2)',
        overflow: 'hidden',
      }}>
        {image ? (
          <img src={image} alt={title} loading="lazy" style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'top',
          }} />
        ) : (
          <AppPreview kind={id} color={color} />
        )}
        <div style={{
          position: 'absolute', top: 10, left: 10,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '3px 8px',
          background: 'rgba(7,7,10,0.7)',
          backdropFilter: 'blur(10px)',
          border: '1px solid var(--line-2)',
          borderRadius: 999,
          fontSize: 10.5, fontFamily: 'var(--font-mono)',
          color: 'var(--fg-2)',
          letterSpacing: '0.1em',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: color }} />
          {type.toUpperCase()}
        </div>
      </div>

      <div style={{ padding: 16 }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 10,
        }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: '-0.01em' }}>{title}</div>
            {prompt && (
              <div style={{
                fontSize: 11.5, color: 'var(--fg-3)',
                fontFamily: 'var(--font-mono)', marginTop: 4,
                fontStyle: 'italic',
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }}>"{prompt}"</div>
            )}
          </div>
          <I.arrowUpRight size={16} style={{ color: h ? 'var(--accent-2)' : 'var(--fg-3)', transition: 'color 200ms', flexShrink: 0 }} />
        </div>

        <div style={{
          marginTop: 14, paddingTop: 12,
          borderTop: '1px dashed var(--line-2)',
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 10.5, fontFamily: 'var(--font-mono)',
          color: 'var(--fg-4)', letterSpacing: '0.08em',
          textTransform: 'uppercase',
        }}>
          {stack.map((s, i) => (
            <React.Fragment key={s}>
              {i > 0 && <span style={{ opacity: 0.5 }}>·</span>}
              <span>{s}</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </a>
  );
};

/* Fake app previews — small SVG/CSS compositions */
const AppPreview = ({ kind, color }) => {
  if (kind === 'revenue') return <RevenuePreview color={color} />;
  if (kind === 'docs')    return <DocsPreview color={color} />;
  if (kind === 'admin')   return <AdminPreview color={color} />;
  if (kind === 'store')   return <StorePreview color={color} />;
  if (kind === 'saas')    return <SaasPreview color={color} />;
  if (kind === 'chat')    return <ChatPreview color={color} />;
  return null;
};

const previewStyle = {
  position: 'absolute', inset: 14,
  background: 'var(--bg-0)',
  border: '1px solid var(--line-2)',
  borderRadius: 6,
  padding: 10,
  overflow: 'hidden',
  fontSize: 6,
  boxShadow: '0 10px 30px -10px rgba(0,0,0,0.5)',
};

const RevenuePreview = ({ color }) => (
  <div style={previewStyle}>
    <div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
      <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#ef4444' }} />
      <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#f5b849' }} />
      <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#34d399' }} />
    </div>
    <div style={{ fontSize: 9, color: 'var(--fg-1)', fontWeight: 600 }}>Revenue</div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 4, marginTop: 6 }}>
      {[0,1,2].map((i) => (
        <div key={i} style={{ background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 3, padding: 5 }}>
          <div style={{ height: 2, width: 12, background: 'var(--fg-4)', borderRadius: 1 }} />
          <div style={{ height: 4, width: 22, background: color, borderRadius: 1, marginTop: 3 }} />
        </div>
      ))}
    </div>
    <svg width="100%" height="50" viewBox="0 0 200 50" preserveAspectRatio="none" style={{ marginTop: 6 }}>
      <defs>
        <linearGradient id={`g-${color}-r`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={color} stopOpacity="0.5" />
          <stop offset="1" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d="M0,40 C30,30 60,25 90,20 C120,15 150,25 180,12 L200,8 L200,50 L0,50 Z" fill={`url(#g-${color}-r)`} />
      <path d="M0,40 C30,30 60,25 90,20 C120,15 150,25 180,12 L200,8" stroke={color} strokeWidth="1" fill="none" />
    </svg>
  </div>
);

const DocsPreview = ({ color }) => (
  <div style={previewStyle}>
    <div style={{ display: 'flex', gap: 6, height: '100%' }}>
      <div style={{ width: 48, flexShrink: 0, borderRight: '1px solid var(--line-1)', paddingRight: 6, display: 'flex', flexDirection: 'column', gap: 3 }}>
        {[1,1,1,0.6,1,1,0.6,0.4].map((w, i) => (
          <div key={i} style={{ height: 3, width: `${w * 100}%`, background: i === 2 ? color : 'var(--fg-4)', borderRadius: 1 }} />
        ))}
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ height: 5, width: '60%', background: 'var(--fg-1)', borderRadius: 1, marginBottom: 6 }} />
        <div style={{ height: 2, width: '90%', background: 'var(--fg-3)', borderRadius: 1, marginBottom: 3 }} />
        <div style={{ height: 2, width: '85%', background: 'var(--fg-3)', borderRadius: 1, marginBottom: 3 }} />
        <div style={{ height: 2, width: '70%', background: 'var(--fg-3)', borderRadius: 1, marginBottom: 8 }} />
        <div style={{ background: 'var(--bg-2)', border: `1px solid ${color}`, borderRadius: 3, padding: 5, fontFamily: 'var(--font-mono)', fontSize: 5, color: color, lineHeight: 1.6 }}>
          $ npm install<br/>$ npm run dev<br/>→ ready at :3000
        </div>
      </div>
    </div>
  </div>
);

const AdminPreview = ({ color }) => (
  <div style={previewStyle}>
    <div style={{ fontSize: 9, color: 'var(--fg-1)', fontWeight: 600 }}>Admin</div>
    <div style={{ marginTop: 6, display: 'flex', flexDirection: 'column', gap: 3 }}>
      {[1,2,3,4,5].map((i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: 3, background: 'var(--bg-2)', borderRadius: 2 }}>
          <div style={{ width: 8, height: 8, borderRadius: 2, background: color, opacity: 0.7 }} />
          <div style={{ height: 2, width: 30, background: 'var(--fg-1)', borderRadius: 1 }} />
          <div style={{ height: 2, width: 20, background: 'var(--fg-3)', borderRadius: 1 }} />
          <div style={{ marginLeft: 'auto', padding: '0 3px', background: 'var(--bg-3)', borderRadius: 2, fontSize: 4, color: color }}>ADMIN</div>
        </div>
      ))}
    </div>
  </div>
);

const StorePreview = ({ color }) => (
  <div style={previewStyle}>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, height: '100%' }}>
      {[0,1,2,3,4,5].map((i) => (
        <div key={i} style={{ background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 3, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{
            flex: 1,
            background: `linear-gradient(135deg, ${color}${i % 2 === 0 ? '30' : '20'}, var(--bg-3))`,
          }} />
          <div style={{ padding: 3 }}>
            <div style={{ height: 2, width: '60%', background: 'var(--fg-1)', borderRadius: 1 }} />
            <div style={{ height: 2, width: '30%', background: color, borderRadius: 1, marginTop: 2 }} />
          </div>
        </div>
      ))}
    </div>
  </div>
);

const SaasPreview = ({ color }) => (
  <div style={previewStyle}>
    <div style={{ display: 'flex', gap: 6, height: '100%' }}>
      <div style={{ width: 34, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 3, borderRight: '1px solid var(--line-1)', paddingRight: 4 }}>
        {[0,1,2,3].map((i) => (
          <div key={i} style={{ height: 6, background: i === 0 ? color : 'var(--bg-2)', borderRadius: 1 }} />
        ))}
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ height: 5, width: '50%', background: 'var(--fg-1)', borderRadius: 1 }} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 3 }}>
          <div style={{ height: 28, background: 'var(--bg-2)', border: `1px solid ${color}`, borderRadius: 2, padding: 3 }}>
            <div style={{ height: 2, width: 12, background: 'var(--fg-3)', borderRadius: 1 }} />
            <div style={{ height: 5, width: 20, background: color, borderRadius: 1, marginTop: 3 }} />
          </div>
          <div style={{ height: 28, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 2, padding: 3 }}>
            <div style={{ height: 2, width: 12, background: 'var(--fg-3)', borderRadius: 1 }} />
            <div style={{ height: 5, width: 18, background: 'var(--fg-1)', borderRadius: 1, marginTop: 3 }} />
          </div>
        </div>
        <div style={{ flex: 1, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 2, position: 'relative', overflow: 'hidden' }}>
          <svg width="100%" height="100%" viewBox="0 0 100 40" preserveAspectRatio="none">
            <polyline points="0,30 20,22 40,25 60,15 80,18 100,10" stroke={color} strokeWidth="1" fill="none" />
          </svg>
        </div>
      </div>
    </div>
  </div>
);

const ChatPreview = ({ color }) => (
  <div style={previewStyle}>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      {[{w: 40, me: false},{w: 28, me: true},{w: 48, me: false},{w: 34, me: true},{w: 42, me: false}].map((m, i) => (
        <div key={i} style={{
          alignSelf: m.me ? 'flex-end' : 'flex-start',
          padding: '3px 5px',
          fontSize: 5,
          background: m.me ? color : 'var(--bg-2)',
          color: m.me ? '#0a0b0d' : 'var(--fg-1)',
          borderRadius: 3,
          width: m.w,
          height: 6,
        }} />
      ))}
    </div>
    <div style={{
      position: 'absolute', left: 10, right: 10, bottom: 10,
      background: 'var(--bg-2)', border: '1px solid var(--line-1)',
      borderRadius: 3, padding: 3, display: 'flex', alignItems: 'center', gap: 3,
    }}>
      <div style={{ height: 3, flex: 1, background: 'var(--fg-4)', borderRadius: 1 }} />
      <div style={{ width: 8, height: 5, background: color, borderRadius: 1 }} />
    </div>
  </div>
);

window.GallerySection = GallerySection;