// stories-templates.jsx — 13 Instagram story templates for Duo
// All stories: 720 × 1280 base size. Uses the same palette tokens as the landing.

/* eslint-disable react/no-unknown-property */

// ─────────────────────────────────────────────────────────────
// SHARED PARTS
// ─────────────────────────────────────────────────────────────
const SwipeUp = () =>
<span className="story-swipe">
    deslizar para descargar
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 19V5M5 12l7-7 7 7" />
    </svg>
  </span>;


const AppleIcon = () =>
<svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
  </svg>;


const StoryHeader = ({ meta }) =>
<div className="story-head">
    <div className="story-brand">
      <span className="story-mark" aria-hidden="true"></span>
      <span>duo</span>
    </div>
    {meta && <div className="story-meta">{meta}</div>}
  </div>;


const StoryFooter = ({ children = <span className="url">duoapp.online</span> }) =>
<div className="story-foot">
    {children}
  </div>;


// Wraps a story with grain + optional bg class
function Story({ bg, children }) {
  const cls = `story${bg ? ' bg-' + bg : ''}`;
  return (
    <div className={cls}>
      <div className="story-grain"></div>
      {children}
    </div>);

}

// Decorative circles
function CirclesTL({ size = 520, top = -200, left = -180 }) {
  return (
    <div className="story-circles" aria-hidden="true">
      <span className="c c-rose" style={{ width: size, height: size, top, left }}></span>
      <span className="c c-peach" style={{ width: size, height: size, top, left: left + size * 0.42 }}></span>
    </div>);

}
function CirclesBR({ size = 600, bottom = -260, right = -200 }) {
  return (
    <div className="story-circles" aria-hidden="true">
      <span className="c c-rose" style={{ width: size, height: size, bottom, right: right + size * 0.42 }}></span>
      <span className="c c-peach" style={{ width: size, height: size, bottom, right }}></span>
    </div>);

}
function CirclesCenter({ size = 560, opacity = 0.85 }) {
  return (
    <div className="story-circles" aria-hidden="true">
      <span className="c c-rose" style={{ width: size, height: size, top: '50%', left: '50%', transform: `translate(calc(-50% - ${size * 0.18}px), -50%)`, opacity }}></span>
      <span className="c c-peach" style={{ width: size, height: size, top: '50%', left: '50%', transform: `translate(calc(-50% + ${size * 0.18}px), -50%)`, opacity }}></span>
    </div>);

}

// ─────────────────────────────────────────────────────────────
// 01 — LAUNCH · "Ya estamos acá"
// ─────────────────────────────────────────────────────────────
function S01_LaunchHero() {
  return (
    <Story>
      <CirclesCenter size={580} />
      <div className="story-pad">
        <StoryHeader meta="lanzamiento" />
        <div className="story-poster" style={{ alignItems: 'center', textAlign: 'center' }}>
          <span className="story-tag" style={{ alignSelf: 'center' }}><span className="dot"></span> ya disponible</span>
          <h1 style={{ marginTop: 40 }}>ya<br />estamos<br /><em className="it" style={{ color: "rgb(255, 255, 255)" }}>acá</em>.</h1>
          <p className="lede" style={{ marginTop: 40, maxWidth: '22ch', color: "rgb(0, 0, 0)" }}>
            Duo está en el App Store. Un espacio para que tu pareja y vos vuelvan a escucharse.
          </p>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><SwipeUp /></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 02 — LAUNCH · "Para los dos. Cada día."
// ─────────────────────────────────────────────────────────────
function S02_LaunchPoster() {
  return (
    <Story bg="cream">
      <div className="story-pad">
        <StoryHeader meta="01" />
        <div className="story-poster">
          <span className="eyebrow">una app de pareja</span>
          <h1 style={{ marginTop: 32 }}>para los<br />dos.<br /><em className="it">cada día.</em></h1>
          <p className="lede" style={{ marginTop: 44, maxWidth: '22ch' }}>
            Check-ins, mensajes con sentido y una IA cálida que escucha. Sin ruido, sin métricas.
          </p>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>ios · gratis</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 03 — LAUNCH · "Disponible en el App Store"
// ─────────────────────────────────────────────────────────────
function S03_AppStore() {
  return (
    <Story bg="ink">
      <CirclesBR size={760} bottom={-340} right={-260} />
      <div className="story-pad">
        <StoryHeader meta="lanzamiento" />
        <div className="story-poster">
          <div className="s-bigmark">
            <span className="c1"></span>
            <span className="c2"></span>
          </div>
          <h2>duo, <em className="it">para</em><br />parejas reales.</h2>
          <p className="lede" style={{ marginTop: 40, maxWidth: '24ch' }}>
            Descargá gratis y empezá hoy. Sin anuncios, sin trucos.
          </p>
          <div style={{ marginTop: 60 }}>
            <a className="story-btn">
              <AppleIcon /> descargar para iphone
            </a>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>ios 18+</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 04 — FEATURE · Check-ins
// ─────────────────────────────────────────────────────────────
function S04_CheckIns() {
  return (
    <Story>
      <CirclesBR size={620} bottom={-300} right={-260} />
      <div className="story-pad">
        <StoryHeader meta="01 · check-ins" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 2 }}>
          <div style={{ alignSelf: 'flex-start', marginTop: 30 }}>
            <span className="eyebrow">funciones</span>
            <h2 style={{ marginTop: 24 }}>tres<br />minutos.<br /><em className="it">cada día.</em></h2>
            <p className="lede" style={{ marginTop: 32, maxWidth: '22ch' }}>
              Cómo estás. Cómo estamos. Un ritual que se vuelve costumbre.
            </p>
          </div>
          <div style={{ alignSelf: 'center' }}>
            <div className="s-phone">
              <div className="s-phone-screen">
                <div className="s-app-row">
                  <div>
                    <div className="who">buenos días</div>
                    <div className="names">Ana &amp; Carlos</div>
                  </div>
                  <span className="s-app-avatar"></span>
                </div>
                <div className="s-app-card">
                  <div className="ttl">check-in de hoy</div>
                  <div className="s-app-checkins">
                    <div className="s-app-checkin"><div className="emoji">😊</div><div className="lab">ánimo</div><div className="val">85%</div></div>
                    <div className="s-app-checkin alt"><div className="emoji">💕</div><div className="lab">cercanía</div><div className="val">92%</div></div>
                  </div>
                </div>
                <div className="s-app-mimu">
                  <div className="head">
                    <span className="dot">M</span>
                    <span className="name">Mimu</span>
                  </div>
                  <p>Hoy es un buen día para recordarle a Carlos lo que más valorás de él.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>01 / 06</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 05 — FEATURE · Mimu IA
// ─────────────────────────────────────────────────────────────
function S05_Mimu() {
  return (
    <Story bg="ink">
      <CirclesTL size={520} top={-220} left={-160} />
      <div className="story-pad">
        <StoryHeader meta="02 · mimu ia" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', zIndex: 2 }}>
          <div style={{ marginTop: 30 }}>
            <span className="eyebrow" style={{ color: 'rgba(251,246,238,0.55)' }}>funciones</span>
            <h2 style={{ marginTop: 24 }}>una ia<br />que escucha<br /><em className="it">despacio.</em></h2>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div className="s-chat">
              <div className="s-chat-head">
                <span className="s-chat-avatar"></span>
                <div>
                  <div className="name">Mimu</div>
                  <div className="role">acompañante emocional</div>
                </div>
                <div className="s-chat-status"><span className="pulse"></span> activa</div>
              </div>
              <div className="s-chat-body">
                <div className="s-bubble me">no sé cómo decirle lo que siento.</div>
                <div className="s-bubble them">empezá por lo más simple: "necesito que me escuches un momento". 💕</div>
              </div>
            </div>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>02 / 06</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 06 — FEATURE · Notas (sticky widgets)
// ─────────────────────────────────────────────────────────────
function S06_Notes() {
  return (
    <Story bg="rose-soft">
      <div className="story-pad">
        <StoryHeader meta="03 · notas" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', zIndex: 2 }}>
          <div style={{ marginTop: 30 }}>
            <span className="eyebrow">funciones</span>
            <h2 style={{ marginTop: 24 }}>una nota.<br />el día,<br /><em className="it">distinto.</em></h2>
            <p className="lede" style={{ marginTop: 32, maxWidth: '22ch' }}>
              Notas que aparecen como widget en su pantalla. Sin abrir la app.
            </p>
          </div>
          <div style={{ position: 'relative', height: 380, marginBottom: 30 }}>
            <div className="s-note" style={{ position: 'absolute', top: 0, left: 20, width: 360, transform: 'rotate(-3deg)' }}>
              te amo, gracias por estar siempre.
              <div className="from">— Carlos</div>
            </div>
            <div className="s-note pink" style={{ position: 'absolute', top: 90, right: 20, width: 320, transform: 'rotate(4deg)' }}>
              cenamos juntos esta noche?
            </div>
            <div className="s-note sage" style={{ position: 'absolute', bottom: 0, left: 80, width: 340, transform: 'rotate(-2deg)' }}>
              hoy pensé en vos. todo el día.
              <div className="from">— Ana</div>
            </div>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>03 / 06</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 07 — FEATURE · Momentos (polaroid image-slots)
// ─────────────────────────────────────────────────────────────
function S07_Moments() {
  return (
    <Story bg="cream">
      <div className="story-pad">
        <StoryHeader meta="04 · momentos" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', zIndex: 2 }}>
          <div style={{ marginTop: 30 }}>
            <span className="eyebrow">funciones</span>
            <h2 style={{ marginTop: 24 }}>una caja<br />para guardar<br /><em className="it">lo lindo.</em></h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28, marginBottom: 30 }}>
            <div className="s-polaroid" style={{ transform: 'rotate(-3deg)', height: 360 }}>
              <image-slot id="story-07-photo-1" placeholder="foto de pareja" shape="rounded" radius="2" style={{ height: 270 }}></image-slot>
              <div className="cap">primer viaje, '23</div>
            </div>
            <div className="s-polaroid" style={{ transform: 'rotate(2deg)', height: 360, marginTop: 30 }}>
              <image-slot id="story-07-photo-2" placeholder="foto / recuerdo" shape="rounded" radius="2" style={{ height: 270 }}></image-slot>
              <div className="cap">cocinando, sábado</div>
            </div>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>04 / 06</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 08 — QUOTE · Manifiesto
// ─────────────────────────────────────────────────────────────
function S08_QuoteManifesto() {
  return (
    <Story>
      <span className="s-quote-mark-deco" aria-hidden="true">"</span>
      <div className="story-pad">
        <StoryHeader meta="manifiesto · 01" />
        <div className="s-quote">
          <span className="mark">"</span>
          <blockquote>
            las relaciones<br />no se arreglan<br />con notificaciones.<br /><em>se cuidan con presencia.</em>
          </blockquote>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>— duo</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 09 — QUOTE · "Volver a hablarnos"
// ─────────────────────────────────────────────────────────────
function S09_QuoteOld() {
  return (
    <Story bg="shell">
      <CirclesBR size={520} bottom={-220} right={-180} />
      <div className="story-pad">
        <StoryHeader meta="manifiesto · 02" />
        <div className="s-quote">
          <span className="mark">"</span>
          <blockquote>
            volver a<br />hablarnos<br /><em>como cuando<br />todo era nuevo.</em>
          </blockquote>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>— duo</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 10 — QUOTE · "No reemplaza. Ablanda."
// ─────────────────────────────────────────────────────────────
function S10_QuoteMimu() {
  return (
    <Story bg="ink">
      <CirclesTL size={460} top={-180} left={-160} />
      <div className="story-pad">
        <StoryHeader meta="manifiesto · 03" />
        <div className="s-quote">
          <span className="mark">"</span>
          <blockquote>
            no reemplaza<br />la conversación.<br /><em>la ablanda.</em>
          </blockquote>
          <p style={{ marginTop: 40, fontSize: 22, opacity: 0.6, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 500 }}>
            — sobre Mimu
          </p>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>— duo</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 11 — TIP · "Empezá por lo lindo"
// ─────────────────────────────────────────────────────────────
function S11_TipKind() {
  return (
    <Story>
      <CirclesBR size={520} bottom={-220} right={-200} />
      <div className="story-pad">
        <StoryHeader meta="tip · 01" />
        <div className="s-tip">
          <span className="step-num">tip de pareja</span>
          <h2>empezá por <em className="it">lo lindo</em>.</h2>
          <p className="lede" style={{ maxWidth: '22ch' }}>
            Antes de plantear algo difícil, decile algo que hoy agradeciste. La conversación cambia.
          </p>
          <div className="ex">
            <div className="role">para probar esta noche</div>
            <em>"hoy te observé y pensé que sos buena gente."</em>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>guardalo ↓</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 12 — TIP · "Repetí lo que escuchaste"
// ─────────────────────────────────────────────────────────────
function S12_TipListen() {
  return (
    <Story bg="cream">
      <div className="story-pad">
        <StoryHeader meta="tip · 02" />
        <div className="s-tip">
          <span className="step-num">escucha activa</span>
          <h2>repetí lo que<br /><em className="it">escuchaste</em>.</h2>
          <p className="lede" style={{ maxWidth: '22ch' }}>
            Antes de responder, devolvele lo que entendiste. Sabe que la oíste — y a vos te ordena la cabeza.
          </p>
          <div className="ex">
            <div className="role">así suena</div>
            <em>"entonces te sentiste sola cuando llegué tarde."</em>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>guardalo ↓</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 13 — TIP · "Una pregunta nueva cada noche"
// ─────────────────────────────────────────────────────────────
function S13_TipQuestion() {
  return (
    <Story bg="rose-soft">
      <div className="story-pad">
        <StoryHeader meta="tip · 03" />
        <div className="s-tip">
          <span className="step-num">ritual chico</span>
          <h2>una pregunta nueva<br /><em className="it">cada noche</em>.</h2>
          <p className="lede" style={{ maxWidth: '22ch' }}>
            Antes de dormir, una pregunta que nunca le hiciste. Conocerse no se termina nunca.
          </p>
          <div className="ex" style={{ background: 'var(--paper)' }}>
            <div className="role">probá esta</div>
            <em>"¿qué te diste cuenta de vos este mes?"</em>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>guardalo ↓</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 14 — AD · "¿Cuándo fue la última vez?" (pain-point hook)
// ─────────────────────────────────────────────────────────────
function S14_AdQuestion() {
  return (
    <Story>
      <CirclesBR size={580} bottom={-260} right={-220} />
      <div className="story-pad">
        <StoryHeader meta="publicidad · 01" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', zIndex: 2 }}>
          <div style={{ marginTop: 30 }}>
            <span className="story-tag"><span className="dot"></span> nueva app</span>
            <h2 style={{ marginTop: 36 }}>
              ¿cuándo fue<br />la última vez<br />que se<br /><em className="it">preguntaron</em><br />cómo están?
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 24, marginBottom: 12 }}>
            <p className="lede" style={{ maxWidth: '24ch' }}>
              Duo es una app para parejas que quieren volver a escucharse — de verdad.
            </p>
            <a className="story-btn"><AppleIcon /> descargar gratis</a>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><SwipeUp /></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 15 — AD · "3 minutos al día" (benefit-led, phone preview)
// ─────────────────────────────────────────────────────────────
function S15_AdMinutes() {
  return (
    <Story bg="cream">
      <div className="story-pad">
        <StoryHeader meta="publicidad · 02" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', zIndex: 2 }}>
          <div style={{ marginTop: 20 }}>
            <span className="eyebrow">duo · check-ins</span>
            <div className="s-stat" style={{ marginTop: 24, flex: 'none' }}>
              <div className="big">3<em className="it">min</em></div>
              <h3 style={{ marginTop: 24, maxWidth: '14ch' }}>
                al día.<br /><em className="it">eso es todo lo que pide.</em>
              </h3>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 12 }}>
            <div style={{ flex: 1 }}>
              <p className="lede" style={{ maxWidth: '18ch' }}>
                Check-ins cortos, una IA que escucha, notitas para el día.
              </p>
              <a className="story-btn" style={{ marginTop: 28 }}><AppleIcon /> descargar</a>
            </div>
            <div style={{ flexShrink: 0, transform: 'translateY(20px) rotate(4deg)', marginRight: -40 }}>
              <div className="s-phone" style={{ width: 240, height: 490, borderRadius: 38, padding: 8 }}>
                <div className="s-phone-screen" style={{ borderRadius: 32, padding: '52px 14px 14px' }}>
                  <div className="s-app-row">
                    <div>
                      <div className="who" style={{ fontSize: 9 }}>buenos días</div>
                      <div className="names" style={{ fontSize: 12 }}>Ana &amp; C.</div>
                    </div>
                    <span className="s-app-avatar" style={{ width: 24, height: 24 }}></span>
                  </div>
                  <div className="s-app-card" style={{ padding: 10 }}>
                    <div className="ttl" style={{ fontSize: 9 }}>check-in</div>
                    <div className="s-app-checkins" style={{ gap: 6 }}>
                      <div className="s-app-checkin" style={{ padding: 6 }}>
                        <div className="emoji" style={{ fontSize: 14 }}>😊</div>
                        <div className="val" style={{ fontSize: 10 }}>85%</div>
                      </div>
                      <div className="s-app-checkin alt" style={{ padding: 6 }}>
                        <div className="emoji" style={{ fontSize: 14 }}>💕</div>
                        <div className="val" style={{ fontSize: 10 }}>92%</div>
                      </div>
                    </div>
                  </div>
                  <div className="s-app-mimu" style={{ padding: '8px 10px' }}>
                    <div className="head" style={{ marginBottom: 3 }}>
                      <span className="dot" style={{ width: 12, height: 12, fontSize: 7 }}>M</span>
                      <span className="name" style={{ fontSize: 8 }}>Mimu</span>
                    </div>
                    <p style={{ fontSize: 9, lineHeight: 1.35 }}>Hoy es un buen día para recordarle lo que más valorás.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>ios · gratis</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 16 — AD · "Para parejas que..." (manifesto-style sell)
// ─────────────────────────────────────────────────────────────
function S16_AdForCouples() {
  return (
    <Story bg="shell">
      <CirclesTL size={420} top={-180} left={-160} />
      <div className="story-pad">
        <StoryHeader meta="publicidad · 03" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 28, position: 'relative', zIndex: 2 }}>
          <span className="eyebrow">duo es para</span>
          <h3 style={{ fontSize: 48, lineHeight: 1.1, letterSpacing: '-0.02em', maxWidth: '20ch' }}>
            parejas que <em className="it">se distraen</em><br />
            mirando el teléfono.
          </h3>
          <h3 style={{ fontSize: 48, lineHeight: 1.1, letterSpacing: '-0.02em', maxWidth: '20ch' }}>
            parejas que ya no <em className="it">se preguntan</em><br />
            cómo están.
          </h3>
          <h3 style={{ fontSize: 48, lineHeight: 1.1, letterSpacing: '-0.02em', maxWidth: '20ch' }}>
            parejas que <em className="it">quieren volver</em><br />
            a hablarse.
          </h3>
          <div style={{ marginTop: 16, paddingTop: 28, borderTop: '1px solid var(--hairline-strong)' }}>
            <p className="lede" style={{ fontSize: 26, color: 'var(--ink)', fontWeight: 500, maxWidth: '24ch' }}>
              Duo es para <em className="it">ustedes</em>.
            </p>
            <a className="story-btn" style={{ marginTop: 28 }}><AppleIcon /> descargar gratis</a>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>ios</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 17 — AD · "Así se ve cuidarse" (product hero, phone foreground)
// ─────────────────────────────────────────────────────────────
function S17_AdProductHero() {
  return (
    <Story bg="ink">
      <CirclesBR size={680} bottom={-300} right={-260} />
      <div className="story-pad">
        <StoryHeader meta="publicidad · 04" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', zIndex: 2 }}>
          <div style={{ marginTop: 20 }}>
            <span className="story-tag"><span className="dot"></span> ya disponible</span>
            <h2 style={{ marginTop: 32, fontSize: 76 }}>así se ve<br /><em className="it">cuidarse</em>.</h2>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end', position: 'relative' }}>
            <div className="s-phone" style={{ transform: 'rotate(-4deg)' }}>
              <div className="s-phone-screen">
                <div className="s-app-row">
                  <div>
                    <div className="who">buenos días</div>
                    <div className="names">Ana &amp; Carlos</div>
                  </div>
                  <span className="s-app-avatar"></span>
                </div>
                <div className="s-app-card">
                  <div className="ttl">check-in de hoy</div>
                  <div className="s-app-checkins">
                    <div className="s-app-checkin"><div className="emoji">😊</div><div className="lab">ánimo</div><div className="val">85%</div></div>
                    <div className="s-app-checkin alt"><div className="emoji">💕</div><div className="lab">cercanía</div><div className="val">92%</div></div>
                  </div>
                </div>
                <div className="s-app-mimu">
                  <div className="head">
                    <span className="dot">M</span>
                    <span className="name">Mimu</span>
                  </div>
                  <p>Decile algo que hoy agradeciste. Empezar por lo lindo cambia el día.</p>
                </div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 24 }}>
            <p className="lede" style={{ maxWidth: '18ch', margin: 0 }}>
              Tres minutos al día. <em className="it">Una relación que se nota.</em>
            </p>
            <a className="story-btn"><AppleIcon /> descargar</a>
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><SwipeUp /></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 18 — AD · "Gratis. Sin trucos." (urgency / value prop)
// ─────────────────────────────────────────────────────────────
function S18_AdFree() {
  return (
    <Story bg="rose-soft">
      <div className="story-pad">
        <StoryHeader meta="publicidad · 05" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start', gap: 40, position: 'relative', zIndex: 2 }}>
          <span className="story-tag"><span className="dot"></span> ya disponible</span>
          <h1 style={{ fontSize: 156, lineHeight: 0.9 }}>
            gratis.<br />
            <em className="it">para los dos.</em>
          </h1>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, paddingTop: 24, borderTop: '1px solid var(--hairline-strong)', alignSelf: 'stretch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 22, color: 'var(--ink)', fontWeight: 500 }}>
              <span style={{ color: 'var(--terracotta)', fontSize: 26 }}>·</span> sin anuncios.
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 22, color: 'var(--ink)', fontWeight: 500 }}>
              <span style={{ color: 'var(--terracotta)', fontSize: 26 }}>·</span> sin trucos.
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 22, color: 'var(--ink)', fontWeight: 500 }}>
              <span style={{ color: 'var(--terracotta)', fontSize: 26 }}>·</span> tus palabras son tuyas.
            </div>
          </div>
          <a className="story-btn"><AppleIcon /> descargar para iphone</a>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>ios 18+</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// FEED POSTS (1:1) — Emotional launch
// ─────────────────────────────────────────────────────────────

// Helper for square posts
function Feed({ bg, children }) {
  const cls = `feed${bg ? ' bg-' + bg : ''}`;
  return (
    <div className={cls}>
      <div className="story-grain"></div>
      {children}
    </div>);

}

const FeedMark = () =>
<div className="feed-watermark">
    <span className="story-mark" aria-hidden="true"></span>
    <span>duo</span>
  </div>;


// ─────────────────────────────────────────────────────────────
// 19 — FEED · "Para vos. Y para vos." (the duet)
// ─────────────────────────────────────────────────────────────
function F01_Duet() {
  return (
    <Feed bg="cream">
      <FeedMark />
      <div className="feed-duet">
        <div className="col">
          <span className="circle left"></span>
          <span className="label">para vos</span>
          <h3>la que se queda<br />despierta pensando<br />qué decirle <em className="it">mañana</em>.</h3>
        </div>
        <div className="col">
          <span className="circle right"></span>
          <span className="label">y para vos</span>
          <h3>el que no sabe<br />cómo empezar<br /><em className="it">la conversación</em>.</h3>
        </div>
      </div>
      <div className="feed-foot" style={{ position: 'absolute', bottom: 36, left: 56, right: 56 }}>
        <span className="url">duoapp.online</span>
        <span>ya disponible</span>
      </div>
    </Feed>);

}

// ─────────────────────────────────────────────────────────────
// 20 — FEED · Carta abierta
// ─────────────────────────────────────────────────────────────
function F02_Letter() {
  return (
    <Feed>
      <CirclesBR size={460} bottom={-200} right={-160} />
      <FeedMark />
      <div className="feed-pad" style={{ justifyContent: 'center', padding: '0 60px' }}>
        <div className="feed-letter">
          <div className="salutation">— una carta para los dos.</div>
          <p style={{ fontSize: 26, lineHeight: 1.5, color: 'var(--ink)', fontWeight: 400, textWrap: 'pretty' }}>
            Después de meses haciendo Duo con mucho cariño, hoy <em className="it">abrimos las puertas</em>.
          </p>
          <p style={{ fontSize: 22, lineHeight: 1.55, color: 'var(--ink-soft)', marginTop: 22, fontWeight: 400 }}>
            No es una app para arreglar nada. Es un espacio para los que <em className="it">se eligen cada día</em> — y a veces se les olvida cómo decirlo.
          </p>
          <p style={{ fontSize: 22, lineHeight: 1.55, color: 'var(--ink-soft)', marginTop: 18, fontWeight: 400 }}>
            Gracias por dejarnos ser parte.
          </p>
          <div className="sign">con calma · equipo duo</div>
        </div>
      </div>
      <div className="feed-foot" style={{ position: 'absolute', bottom: 36, left: 56, right: 56 }}>
        <span className="url">duoapp.online</span>
        <span>ios · gratis</span>
      </div>
    </Feed>);

}

// ─────────────────────────────────────────────────────────────
// 21 — FEED · "Lo que se cuida, crece" (photo + overlay)
// ─────────────────────────────────────────────────────────────
function F03_PhotoOverlay() {
  return (
    <Feed bg="ink">
      <div className="feed-photo-slot">
        <image-slot id="feed-21-photo" placeholder="foto íntima de pareja (manos, mirada, abrazo)" shape="rect"></image-slot>
      </div>
      <div className="feed-photo-overlay"></div>
      <FeedMark />
      <div className="feed-photo-text">
        <span className="eyebrow">duo · ya disponible</span>
        <h2 style={{ fontSize: 72, lineHeight: 0.96, marginTop: 24, fontWeight: 500, letterSpacing: '-0.03em', textWrap: 'balance' }}>
          lo que<br />se cuida,<br /><em className="it">crece</em>.
        </h2>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 40, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500 }}>
          <span className="url">duoapp.online</span>
          <span style={{ opacity: 0.6 }}>descargá hoy</span>
        </div>
      </div>
    </Feed>);

}

// ─────────────────────────────────────────────────────────────
// 22 — FEED · "Su próximo te escucho" (intimate quote)
// ─────────────────────────────────────────────────────────────
function F04_Promise() {
  return (
    <Feed bg="rose-soft">
      <CirclesTL size={420} top={-180} left={-160} />
      <FeedMark />
      <div className="feed-pad" style={{ justifyContent: 'center' }}>
        <span className="eyebrow">duo · llega hoy</span>
        <h1 style={{ marginTop: 32, textWrap: 'balance' }}>
          su próximo<br /><em className="it">"te escucho"</em><br />empieza acá.
        </h1>
        <p className="lede" style={{ marginTop: 28, maxWidth: '24ch' }}>
          Duo es la app que les devuelve el espacio para volver a hablarse de verdad.
        </p>
        <div className="feed-foot" style={{ marginTop: 'auto' }}>
          <span className="url">duoapp.online</span>
          <span>ya disponible</span>
        </div>
      </div>
    </Feed>);

}

// ─────────────────────────────────────────────────────────────
// 23 — FEED · "Llegó Duo" (quiet joy, two-circles meeting)
// ─────────────────────────────────────────────────────────────
function F05_QuietJoy() {
  return (
    <Feed>
      <FeedMark />
      <div className="feed-pad" style={{ alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 56 }}>
        <span className="eyebrow" style={{ marginBottom: 36 }}>una app de pareja</span>

        {/* Two-circles motif — large, centered, the heart of the design */}
        <div style={{ position: 'relative', width: 360, height: 220, marginBottom: 48 }}>
          <span style={{
            position: 'absolute', top: 0, left: 30, width: 220, height: 220,
            borderRadius: '50%',
            background: 'radial-gradient(circle at 35% 35%, var(--rose), var(--rose-deep) 90%)',
            mixBlendMode: 'multiply'
          }}></span>
          <span style={{
            position: 'absolute', top: 0, left: 110, width: 220, height: 220,
            borderRadius: '50%',
            background: 'radial-gradient(circle at 35% 35%, var(--peach), var(--clay) 90%)',
            mixBlendMode: 'multiply'
          }}></span>
        </div>

        <h1 style={{ fontSize: 140, lineHeight: 0.92, letterSpacing: '-0.04em', fontWeight: 500 }}>
          llegó<br /><em className="it">duo</em>.
        </h1>
        <p className="lede" style={{ marginTop: 32, maxWidth: '24ch', textWrap: 'balance' }}>
          un lugar donde lo importante vuelve a tener tiempo.
        </p>

        <div className="feed-foot" style={{ marginTop: 'auto', width: '100%', paddingTop: 32 }}>
          <span className="url">duoapp.online</span>
          <span>ios · gratis</span>
        </div>
      </div>
    </Feed>);

}

// ─────────────────────────────────────────────────────────────
// LETTER STORIES (9:16) — emotional open letters with App Store badge
// ─────────────────────────────────────────────────────────────

const AppStoreBadge = ({ label = "disponible en", store = "App Store" }) =>
<a className="appstore-badge">
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
    </svg>
    <span className="stack">
      <span className="top">{label}</span>
      <span className="bot">{store}</span>
    </span>
  </a>;


// ─────────────────────────────────────────────────────────────
// 24 — LETTER STORY · "A las dos personas que se eligen"
// ─────────────────────────────────────────────────────────────
function L01_LetterToYou() {
  return (
    <Story bg="cream">
      <CirclesBR size={520} bottom={-240} right={-200} />
      <div className="story-pad">
        <StoryHeader meta="carta abierta · 01" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 36, position: 'relative', zIndex: 2 }}>
          <div className="story-letter">
            <div className="salutation">— a las dos personas que se eligen.</div>
            <h3>hoy abrimos<br /><em className="it">las puertas</em>.</h3>
            <p className="body-ink">
              Hicimos Duo pensando en las noches en que uno se queda mirando el techo. En esas conversaciones que nunca terminan de empezar.
            </p>
            <p>
              Es para los días buenos. Y para los otros — los que pesan más, los que se sienten lejos. <em className="it">No para resolverlos. Para acompañarlos.</em>
            </p>
            <div className="sign">EQUIPO DUO</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <AppStoreBadge label="ya disponible en" store="App Store" />
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>gratis</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 25 — LETTER STORY · "Para quien siente que se están perdiendo"
// ─────────────────────────────────────────────────────────────
function L02_LetterLost() {
  return (
    <Story>
      <CirclesTL size={460} top={-200} left={-160} />
      <div className="story-pad">
        <StoryHeader meta="carta abierta · 02" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 36, position: 'relative', zIndex: 2 }}>
          <div className="story-letter">
            <div className="salutation">— para quien siente que se están perdiendo.</div>
            <h3>no se están<br /><em className="it">perdiendo</em>.<br />se están cansando.</h3>
            <p className="body-ink">
              Hay una diferencia. Y casi siempre se puede arreglar con un poco de tiempo bien usado.
            </p>
            <p>
              Duo es eso: <em className="it">tres minutos por día</em> para volver a mirarse. Una IA que ayuda a poner palabras. Y notitas que aparecen cuando hacen falta.
            </p>
            <p className="body-ink" style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>
              No hace falta esperar a estar bien para empezar.
            </p>
            <div className="sign">con cariño · equipo duo</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <AppStoreBadge label="descargá ya en" store="App Store" />
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>ios · gratis</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 26 — LETTER STORY · "Gracias por dejarnos ser parte"
// ─────────────────────────────────────────────────────────────
function L03_LetterThanks() {
  return (
    <Story bg="rose-soft">
      <div className="story-pad">
        <StoryHeader meta="carta abierta · 03" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 36, position: 'relative', zIndex: 2 }}>
          <div className="story-letter">
            <div className="salutation">— a las parejas que llegan hoy.</div>
            <h3>gracias por<br />dejarnos ser <em className="it">parte</em>.</h3>
            <p className="body-ink">
              No hacemos otra red social. No queremos su atención <em className="it">todo el rato</em>. Solo unos minutos al día, los que importan.
            </p>
            <p>
              Lo que se hablen en Duo es de ustedes. Nada se entrena, nada se vende. <em className="it">Sus palabras son suyas.</em>
            </p>
            <p className="body-ink">
              Sean bienvenidas. Sean bienvenidos.
            </p>
            <div className="sign">con cuidado · equipo duo</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <AppStoreBadge label="ya disponible en" store="App Store" />
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>ios 18+</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// 27 — LETTER STORY · From Leonardo P (founder letter)
// ─────────────────────────────────────────────────────────────
function L04_LetterFounder() {
  return (
    <Story>
      <CirclesBR size={460} bottom={-200} right={-180} />
      <div className="story-pad">
        <StoryHeader meta="del director · 04" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 32, position: 'relative', zIndex: 2 }}>
          <div className="story-letter">
            <div className="salutation">— una carta personal.</div>
            <h3>hola.<br />soy <em className="it">leonardo</em>.</h3>
            <p className="body-ink">
              Antes de ser director de Duo, soy parte de una pareja. Y como muchos, hubo momentos en los que <em className="it">no supe qué decir</em>.
            </p>
            <p>
              Hice Duo para eso. Para los días en que las palabras no salen, para los rituales chicos que sostienen lo grande, para volver a mirarnos cuando todo nos distrae.
            </p>
            <p className="body-ink">
              Si están abriendo esta app hoy, gracias. <em className="it">Está hecha con mucho cuidado para ustedes</em>.
            </p>
            <div className="founder-sign">
              <span className="founder-avatar">L</span>
              <div className="founder-info">
                <span className="name">Leonardo P.</span>
                <span className="role">director · duo</span>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <AppStoreBadge label="ya disponible en" store="App Store" />
          </div>
        </div>
        <StoryFooter><span className="url">duoapp.online</span><span>gratis · ios</span></StoryFooter>
      </div>
    </Story>);

}

// ─────────────────────────────────────────────────────────────
// Export to window so the app can pick them up
// ─────────────────────────────────────────────────────────────
Object.assign(window, {
  S01_LaunchHero, S02_LaunchPoster, S03_AppStore,
  S04_CheckIns, S05_Mimu, S06_Notes, S07_Moments,
  S08_QuoteManifesto, S09_QuoteOld, S10_QuoteMimu,
  S11_TipKind, S12_TipListen, S13_TipQuestion,
  S14_AdQuestion, S15_AdMinutes, S16_AdForCouples, S17_AdProductHero, S18_AdFree,
  F01_Duet, F02_Letter, F03_PhotoOverlay, F04_Promise, F05_QuietJoy,
  L01_LetterToYou, L02_LetterLost, L03_LetterThanks, L04_LetterFounder
});