// Chapter V — AI recipes.
// Pure text-to-image scenes. NOT hybrid — these don't use a Vault Stock
// photograph as a backdrop. The user picks a creative-direction preset
// and Product Studio renders the whole scene from scratch around their
// product. Cream tone to visually separate from the cocoa hybrid chapters.

// The data list mirrors DISCOVER_PRESETS in components/product-studio/
// discoverPresets.ts. Keep them in sync when adding new tiles in the app.
const AI_RECIPES = {
  editorial: [
    { id: 'lit-match',           name: 'Lit match' },
    { id: 'still-pond',          name: 'Floating on a still pond' },
    { id: 'caustic-shadow',      name: 'Caustic light shadow' },
    { id: 'driftwood-perch',     name: 'Driftwood perch' },
    { id: 'plinth-fog-gallery',  name: 'Sculptural stone plinth' },
    { id: 'silk-drape',          name: 'Wrapped in silk drape' },
    { id: 'suspended-pearls',    name: 'Surrounded by suspended pearls' },
    { id: 'wabi-sabi-stoneware', name: 'Wabi-sabi stoneware' },
    { id: 'ikebana',             name: 'Ikebana sparse floral' },
    { id: 'botanical-bestiary',  name: 'Botanical bestiary' },
    { id: 'architectural-shadow',name: 'Architectural shadow' },
    { id: 'linen-morning',       name: 'Linen morning light' },
    { id: 'flame-halo',          name: 'Flames behind' },
    { id: 'onyx-backlit',        name: 'Onyx backlit slab' },
    { id: 'floating-bubbles',    name: 'Floating bubbles' },
    { id: 'pomegranate-halves',  name: 'Pomegranate halves' },
    { id: 'insect-companion',    name: 'Insect companion' },
    { id: 'painted-backdrop',    name: 'Painted gradient backdrop' },
    { id: 'product-stack',       name: 'Product stack' },
    { id: 'hand-holding',        name: 'Hand holding' },
  ],
  surreal: [
    { id: 'pattern-repeat',      name: 'Pattern repeat' },
    { id: 'mirror-fractal',      name: 'Mirror fractal' },
    { id: 'frozen-in-ice',       name: 'Frozen in ice' },
    { id: 'butterflies',         name: 'Stop-motion butterflies' },
    { id: 'negative-void',       name: 'Negative-space void' },
    { id: 'exploded-view',       name: 'Exploded view' },
    { id: 'shadow-on-plaster',   name: 'Cast shadow on plaster' },
    { id: 'petals-mid-fall',     name: 'Petals frozen mid-fall' },
  ],
  material: [
    { id: 'smoke-veil',          name: 'Veiled in smoke' },
    { id: 'honey-glaze',         name: 'Honey drizzle' },
    { id: 'long-exposure-ghost', name: 'Long exposure ghost' },
    { id: 'angel-dust',          name: 'Motion blur' },
    { id: 'crystal-specimen',    name: 'Crystal specimen' },
    { id: 'pressed-flower',      name: 'Pressed-flower botanical' },
    { id: 'silk-wrapped-relief', name: 'Silk-wrapped relief' },
    { id: 'clear-resin',         name: 'Suspended in clear resin' },
    { id: 'frost-crusted',       name: 'Crusted with frost' },
    { id: 'dipped-in-milk',      name: 'Dipped in milk' },
    { id: 'sand-buried',         name: 'Half-buried in sand' },
    { id: 'salt-carved',         name: 'Carved into salt' },
    { id: 'microherbs',          name: 'Microherbs' },
    { id: 'leaf-shadow-dapple',  name: 'Dappled leaf shadow' },
    { id: 'driftwood-altar',     name: 'Driftwood altar' },
    { id: 'stacked-stones',      name: 'Stacked stones cairn' },
    { id: 'found-object-plinth', name: 'Found-object plinth' },
    { id: 'cream-cascade',       name: 'Cream cascade' },
    { id: 'soft-focus-haze',     name: 'Soft focus haze' },
    { id: 'rain-on-stone',       name: 'Rain on stone' },
  ],
};

function AIRecipeTile({ id, name }) {
  return (
    <figure style={{ margin: 0 }}>
      <div style={{
        aspectRatio: '3 / 4',
        background: 'rgba(15,12,10,0.06)',
        overflow: 'hidden',
        position: 'relative',
      }}>
        <img
          src={`/discover-presets/${id}.jpg`}
          alt={name}
          loading="lazy"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', display: 'block',
          }}
        />
      </div>
      <figcaption style={{
        marginTop: 10,
        fontFamily: '"La Villa", sans-serif',
        fontSize: 11.5, letterSpacing: '0.04em',
        color: 'var(--cocoa)', fontWeight: 500,
        lineHeight: 1.35,
      }}>{name}</figcaption>
    </figure>
  );
}

function AIRecipeSection({ label, kicker, items }) {
  return (
    <div style={{ marginTop: 88 }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        gap: 24, marginBottom: 22,
        paddingBottom: 18,
        borderBottom: '1px solid rgba(15,12,10,0.14)',
      }}>
        <div style={{
          fontFamily: '"La Villa", sans-serif',
          fontSize: 10.5, letterSpacing: '0.3em', textTransform: 'uppercase',
          color: 'var(--cocoa)', fontWeight: 500,
        }}>{label}</div>
        <div style={{
          fontFamily: '"La Villa", sans-serif',
          fontSize: 12.5, lineHeight: 1.45,
          color: 'rgba(15,12,10,0.62)',
          maxWidth: 380, textAlign: 'right',
        }}>{kicker}</div>
      </div>
      <div className="ai-recipe-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 24,
      }}>
        {items.map(it => <AIRecipeTile key={it.id} {...it} />)}
      </div>
    </div>
  );
}

function ExAIRecipes() {
  return (
    <section
      id="ai-recipes"
      className="ps-section"
      data-mobile-pad="true"
      data-mobile-y="lg"
      style={{
        background: 'var(--cream)',
        color: 'var(--cocoa)',
        padding: '160px 48px',
      }}
    >
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        {/* Chapter head */}
        <div style={{ marginBottom: 56 }}>
          <div style={{
            fontFamily: '"La Villa", sans-serif',
            fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'rgba(15,12,10,0.58)', marginBottom: 28, fontWeight: 500,
          }}>
            Chapter V · Creative presets
          </div>
          <h2 className="celestial" style={{
            fontSize: 'clamp(52px,6.6vw,118px)',
            color: 'var(--cocoa)', margin: 0, lineHeight: 0.92,
            maxWidth: 920,
          }}>
            A preset for every look.
          </h2>

          <p style={{
            marginTop: 32, maxWidth: 620,
            fontFamily: '"La Villa", sans-serif',
            fontSize: 16, lineHeight: 1.65,
            color: 'rgba(15,12,10,0.74)',
          }}>
            Ready-made creative directions. Pick a look and Product Studio styles the whole
            scene around your product. Editorial, surreal, material, dozens of presets for
            when you want a specific mood fast, or a scene you won&rsquo;t find in the library.
          </p>
        </div>

        <AIRecipeSection
          label="Editorial scenes"
          kicker="Quiet, sculptural, fragrance-counter energy."
          items={AI_RECIPES.editorial}
        />
        <AIRecipeSection
          label="Tasteful surreal"
          kicker="Conceptual moves with the volume turned down."
          items={AI_RECIPES.surreal}
        />
        <AIRecipeSection
          label="Material treatments"
          kicker="Cover it, coat it, embed it, wrap it."
          items={AI_RECIPES.material}
        />
      </div>

      <style>{`
        @media (max-width: 1080px) {
          .ai-recipe-grid { grid-template-columns: repeat(3, 1fr) !important; }
        }
        @media (max-width: 780px) {
          section#ai-recipes { padding: 96px 24px !important; }
          .ai-recipe-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
          .ai-recipe-distinction { gap: 8px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ExAIRecipes });