/*
  Showcase — REAL generated output, not mockups. Screenshots are captured from
  live previews (:18804/preview/…) and served from /screenshots/generated/.

    studio   → a gallery of real apps across DIFFERENT domains (proves
               "any domain, no templates") — each opens its live preview.
    business → real multi-app BUSINESSES (one prompt → many apps + roles),
               proving "we ship a company, not an app".
*/

// Real apps (public surfaces) — diverse domains. img = /screenshots/generated/<slug>.png
const STUDIO_APPS = [
  { img: 'forkly-dispatch',               name: 'Forkly Dispatch',    domain: 'Food delivery · ops',     note: 'Live order pipeline, dispatch map and driver status.' },
  { img: 'agency-command',                name: 'Pipeline Labs',      domain: 'Marketing · agency',      note: 'Client pipeline, content calendar and ad campaigns.' },
  { img: 'harborview-backoffice',         name: 'Harborview',         domain: 'Real estate · agent CRM', note: 'Lead pipeline, showings, offers and a marketing hub.' },
  { img: 'zaiglam-storefront',            name: 'Zaiglam',            domain: 'Commerce · storefront',   note: '“Timeless elegance, woven for every season.”' },
  { img: 'tutoring-portal',               name: 'Lantern',            domain: 'Education · center portal', note: 'Scheduling, student progress and billing in one place.' },
  { img: 'apex-auto',                     name: 'Apex',               domain: 'Automotive · showroom',   note: '“Machines that redefine the road.” A configurable catalog.' },
  { img: 'kitchen-dashboard',             name: 'Forno',              domain: 'Food · kitchen display',  note: 'A live kitchen order board for the line.' },
  { img: 'harborview-listings',           name: 'Public Listings',    domain: 'Real estate · listings',  note: 'A public MLS-style listings site.' },
];

// Real businesses = SETS of apps generated from one prompt. `apps` are the ones
// with a real captured preview; `also` names the siblings whose surfaces are
// role-gated (they render a sign-in card, which proves nothing in a showcase),
// so the count stays honest without shipping screenshots of login screens.
const BUSINESSES = [
  {
    hero: 'forkly-marketing', name: 'Forkly', tag: 'Food delivery', count: 5,
    blurb: 'One prompt → a whole delivery company: a customer app, a driver app, a restaurant portal, a dispatch console and the marketing site — plus the AI team that runs them.',
    apps: [
      { img: 'forkly-marketing', name: 'Marketing site', role: 'Public', big: true },
      { img: 'forkly-customer',  name: 'Customer app',   role: 'Ordering' },
      { img: 'forkly-dispatch',  name: 'Dispatch console', role: 'Operations' },
    ],
    also: ['Driver app', 'Restaurant portal'],
  },
  {
    hero: 'harborview-realty', name: 'Harborview Realty', tag: 'Real estate', count: 3,
    blurb: 'A brokerage as software: a public listings site, an agent back-office, speed-to-lead + escrow workflows, and an AI team that follows up 24/7.',
    apps: [
      { img: 'harborview-realty',     name: 'Agent site',       role: 'Public', big: true },
      { img: 'harborview-listings',   name: 'Listings',         role: 'Public' },
      { img: 'harborview-backoffice', name: 'Agent back-office', role: 'Internal' },
    ],
  },
  {
    hero: 'zaiglam-storefront', name: 'Zaiglam', tag: 'Commerce', count: 2,
    blurb: 'A DTC brand end-to-end: a storefront and an operations back-office — with agents handling reorders and support behind guardrails.',
    apps: [
      { img: 'zaiglam-storefront', name: 'Storefront', role: 'Public', big: true },
    ],
    also: ['Back office'],
  },
];

/* One app inside a company bento — a real screenshot, its name and who it is
   for. This is the proof that a BUSINESS is many apps, so it has to be a
   picture, not a pill. */
const AppShot = ({ a, biz, solo }) => {
  const [h, setH] = React.useState(false);
  return (
    <button type="button" title={`${biz} — ${a.name} · click to enlarge`}
      onClick={() => window.openLightbox(`/screenshots/generated/${a.img}.png`, `${biz} — ${a.name}`)}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        gridColumn: solo ? 'span 3' : a.big ? 'span 2' : 'span 1',
        gridRow: a.big && !solo ? 'span 2' : 'span 1',
        padding: 0, font: 'inherit', color: 'inherit', width: '100%',
        // only the anchor carries an aspect; the stacked siblings take half of
        // its height from the grid, so the block always squares off
        aspectRatio: solo ? '16 / 7' : a.big ? '16 / 9' : undefined,
        position: 'relative', display: 'block', cursor: 'zoom-in', overflow: 'hidden',
        borderRadius: 12, background: 'var(--bg-2)',
        border: `1px solid ${h ? 'var(--accent)' : 'var(--line-2)'}`,
        boxShadow: h ? '0 18px 40px -22px rgba(0,0,0,0.8)' : 'none',
        transform: h ? 'translateY(-2px)' : 'none',
        transition: 'border-color 160ms, transform 160ms, box-shadow 160ms',
      }}>
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
        <img src={`/screenshots/generated/${a.img}.png`} alt={`${biz} — ${a.name}`} loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }} />
      </div>
      {/* the label rides on the shot so the tile stays all-image */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, textAlign: 'left',
        padding: '22px 12px 10px', lineHeight: 1.35,
        background: 'linear-gradient(to top, rgba(6,8,12,0.94) 34%, rgba(6,8,12,0))',
      }}>
        <div style={{ fontSize: 12.5, fontWeight: 650, color: 'var(--fg-1)' }}>{a.name}</div>
        <div className="mono-label" style={{ fontSize: 9.5, color: 'var(--accent-2)', marginTop: 2 }}>{a.role}</div>
      </div>
    </button>
  );
};

const AppTile = ({ a, big }) => {
  const [h, setH] = React.useState(false);
  return (
    <a href={'#'} title={`${a.name} — click to enlarge`}
      onClick={(e) => { e.preventDefault(); window.openLightbox(`/screenshots/generated/${a.img}.png`, `${a.name} — ${a.domain}`); }}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        display: 'block', gridColumn: big ? 'span 2' : 'span 1',
        background: 'var(--bg-1)', border: `1px solid ${h ? 'var(--line-3)' : 'var(--line-2)'}`,
        borderRadius: 14, overflow: 'hidden', transition: 'border-color 160ms, transform 160ms',
        transform: h ? 'translateY(-3px)' : 'none', textDecoration: 'none', cursor: 'pointer',
      }}>
      <div style={{ position: 'relative', aspectRatio: big ? '16 / 8' : '16 / 10', overflow: 'hidden', background: 'var(--bg-2)', borderBottom: '1px solid var(--line-1)' }}>
        <img src={`/screenshots/generated/${a.img}.png`} alt={a.name} loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block', filter: h ? 'none' : 'saturate(1.02)' }} />
        <span className="mono-label" style={{ position: 'absolute', top: 10, left: 10, background: 'rgba(6,8,12,0.72)', backdropFilter: 'blur(4px)', color: 'var(--fg-1)', fontSize: 10, padding: '4px 9px', borderRadius: 999, border: '1px solid var(--line-2)' }}>REAL · GENERATED</span>
      </div>
      <div style={{ padding: '14px 16px' }}>
        <div className="flex items-center gap-2" style={{ justifyContent: 'space-between' }}>
          <b style={{ fontSize: 15, color: 'var(--fg-1)' }}>{a.name}</b>
          <span className="mono-label" style={{ fontSize: 10, color: 'var(--accent-2)' }}>{a.domain}</span>
        </div>
        <p style={{ margin: '6px 0 0', fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.5 }}>{a.note}</p>
      </div>
    </a>
  );
};

const Showcase = ({ mode }) => {
  if (mode === 'business') {
    return (
      <Section>
        <Container wide>
          <div style={{ maxWidth: 720, marginBottom: 34 }}>
            <SectionLabel index={2} label="PROOF · ONE PROMPT, A WHOLE COMPANY" />
            <DisplayTitle size={52}>Not an app. <Italic>A whole company</Italic>.</DisplayTitle>
            <p style={{ marginTop: 18, fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.55, maxWidth: 640 }}>
              Each of these was generated from a single prompt — multiple real apps, an AI team, workflows and roles, composed as one graph. Every screenshot is a live preview.
            </p>
          </div>
          <div style={{ display: 'grid', gap: 22 }}>
            {BUSINESSES.map((b) => (
              <div key={b.name} style={{
                background: 'var(--bg-1)', border: '1px solid var(--line-2)',
                borderRadius: 18, padding: '22px 22px 20px',
              }}>
                {/* who the company is */}
                <div className="biz-head" style={{ display: 'flex', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap', marginBottom: 18 }}>
                  <div style={{ minWidth: 260, flex: '1 1 320px' }}>
                    <span className="mono-label" style={{ fontSize: 10.5, color: 'var(--accent-2)' }}>{b.tag}</span>
                    <div className="font-display" style={{ fontSize: 26, fontWeight: 700, marginTop: 5 }}>{b.name}</div>
                  </div>
                  <p style={{ margin: 0, flex: '2 1 420px', fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6 }}>{b.blurb}</p>
                  <div className="mono-label" style={{
                    fontSize: 10.5, color: 'var(--fg-1)', whiteSpace: 'nowrap',
                    border: '1px solid var(--line-3)', borderRadius: 999, padding: '6px 12px',
                  }}>{b.count} apps · 1 AI team</div>
                </div>

                {/* the company as a bento of its real apps — each one a live
                    preview, because "a whole company" has to be SHOWN */}
                <div className="biz-bento" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoRows: '1fr', gap: 12 }}>
                  {b.apps.map((a) => <AppShot key={a.img} a={a} biz={b.name} solo={b.apps.length === 1} />)}
                </div>

                {b.also && b.also.length ? (
                  <div className="mono-label" style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 12 }}>
                    also shipped · {b.also.join(' · ')} — role-gated, sign-in required
                  </div>
                ) : null}
              </div>
            ))}
          </div>
        </Container>
      </Section>
    );
  }
  return (
    <Section>
      <Container wide>
        <div style={{ maxWidth: 720, marginBottom: 34 }}>
          <SectionLabel index={2} label="PROOF · REAL OUTPUT, ANY DOMAIN" />
          <DisplayTitle size={52}>No templates. <Italic>Every domain</Italic>.</DisplayTitle>
          <p style={{ marginTop: 18, fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.55, maxWidth: 640 }}>
            Each of these came from a single prompt — different industry, zero presets. These are live previews, not mockups.
          </p>
        </div>
        <div className="gallery-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {STUDIO_APPS.map((a) => <AppTile key={a.img} a={a} />)}
        </div>
      </Container>
    </Section>
  );
};