// Bricklet — Showcase, Features, Testimonial, Pricing, FAQ, CTA, Footer
function Showcase() {
  const tiles = [
    { id: 't-1', who: 'Marina y Leo',    what: 'Boda · 60×60 cm',               price: '129 €', tone: 'warm',   seed: 'marina' },
    { id: 't-2', who: 'Toby',            what: 'Retrato de mascota · 30×30 cm',  price: '69 €',  tone: 'studio', seed: 'toby' },
    { id: 't-3', who: 'Casa Riera',      what: 'Skyline · 40×40 cm',            price: '89 €',  tone: 'cool',   seed: 'casariera' },
    { id: 't-4', who: 'Padre e hijo',    what: 'Aniversario · 40×40 cm',        price: '89 €',  tone: 'plum',   seed: 'pfson' },
    { id: 't-5', who: 'Olivia, 6 años',  what: 'De dibujo a mosaico',           price: '69 €',  tone: 'warm',   seed: 'olivia' },
    { id: 't-6', who: 'Studio Manso',    what: 'Logo · 40×40 cm',               price: '89 €',  tone: 'studio', seed: 'manso' },
  ];
  return (
    <section className="section" id="showcase" style={{paddingTop: 32}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Mosaicos reales en hogares reales</span>
          <h2>Esta gente los hizo. <em>Tú también puedes.</em></h2>
          <p className="lede">
            Algunos favoritos del estudio. Cada uno se construye a mano a partir de la vista previa
            que verías en la app. Toca cualquiera para ver su historia.
          </p>
        </div>
        <div className="showcase">
          {tiles.map(t => (
            <a href="#" key={t.id} className={"tile " + t.id}>
              <PortraitMosaic cols={t.id === 't-1' ? 22 : 16} seed={t.seed} tone={t.tone} animate={false}/>
              <div className="tile-meta">
                <div>
                  <div className="who">{t.who}</div>
                  <div className="what">{t.what}</div>
                </div>
                <div className="price">{t.price}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  const items = [
    { icon: <IconPalette/>, t: '18 colores de pieza', d: 'Una paleta cuidada, pensada para piel, cielo y luz suave.' },
    { icon: <IconFrame/>,   t: 'Tres tamaños',        d: '30, 40 o 60 cm cuadrado. Enmarcado en roble macizo o nogal.' },
    { icon: <IconHeart/>,   t: 'Hecho a mano',        d: 'Cada premium se monta pieza a pieza en nuestro estudio de Madrid.' },
    { icon: <IconShield/>,  t: 'Garantía de por vida',d: '¿Una pieza suelta? Te enviamos el repuesto gratis, sin preguntas.' },
  ];
  return (
    <section className="section section-tight" style={{background: 'var(--cream-100)', borderTop:'1px solid var(--color-border)', borderBottom:'1px solid var(--color-border)'}}>
      <div className="container">
        <div className="features">
          {items.map((it, i) => (
            <div key={i} className="feature reveal">
              <span className="feature-icon">{it.icon}</span>
              <h5>{it.t}</h5>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonial() {
  return (
    <section className="section">
      <div className="container">
        <div className="t-band reveal">
          <div>
            <span className="eyebrow no-rule" style={{color:'var(--ochre-200)'}}>Testimonio</span>
            <blockquote>
              «Se lo regalé a mi madre por su 70 cumpleaños — una foto del día de su boda, 4.200 piezas
              de ella. Lloró. Después me preguntó si podíamos hacer uno de <em>la mía</em>.»
            </blockquote>
            <cite>
              Marta R., Madrid
              <small>Premium · 40×40 cm · Construido en marzo de 2026</small>
            </cite>
          </div>
          <div className="placeholder-mosaic">
            <PortraitMosaic cols={20} seed="testimonial" tone="plum" animate={false}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function IconCheck() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0, marginTop:2}}>
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  );
}

function Pricing() {
  const sizes = [
    {
      label: '30 cm', price: '69 €', pieces: '2.500', colors: 18,
      perks: ['Mosaico enmarcado de 30×30 cm', 'Hecho a mano · 2.500 piezas · 18 colores', 'Marco de roble macizo · cristal de museo', 'Envío gratis en 5 días laborables'],
      badge: null, highlight: false,
    },
    {
      label: '40 cm', price: '89 €', pieces: '4.200', colors: 18,
      perks: ['Mosaico enmarcado de 40×40 cm', 'Hecho a mano · 4.200 piezas · 18 colores', 'Marco de roble macizo · cristal de museo', 'Envío gratis en 5 días laborables'],
      badge: 'El más querido', highlight: true,
    },
    {
      label: '60 cm', price: '129 €', pieces: '9.400', colors: 18,
      perks: ['Mosaico enmarcado de 60×60 cm', 'Hecho a mano · 9.400 piezas · 18 colores', 'Marco de roble macizo · cristal de museo', 'Envío gratis en 5 días laborables'],
      badge: null, highlight: false,
    },
  ];

  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Precios</span>
          <h2>Gratis para <em>probarlo.</em> Hecho para <em>quedártelo.</em></h2>
          <p className="lede">
            Empieza con el mosaico digital — gratis, para siempre. Da el salto solo cuando lo quieras en tu pared.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:24, alignItems:'stretch'}}>

          {/* Plan gratuito */}
          <div className="card reveal" style={{padding:36, background:'var(--color-surface)', border:'1px solid var(--color-border)', borderRadius:'var(--radius-lg)'}}>
            <span className="eyebrow no-rule">Gratis</span>
            <div style={{fontFamily:'Fraunces, serif', fontWeight:700, fontSize:56, letterSpacing:'-.025em', marginTop:8, lineHeight:1}}>0 €</div>
            <div style={{font:'var(--text-body-sm)', color:'var(--color-fg-muted)', marginTop:6}}>El mosaico digital, al instante.</div>
            <hr style={{border:'none', borderTop:'1px solid var(--color-border)', margin:'28px 0'}}/>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:14, font:'var(--text-body)'}}>
              <li style={{display:'flex',gap:10,alignItems:'flex-start'}}><IconCheck/> Mosaicos ilimitados</li>
              <li style={{display:'flex',gap:10,alignItems:'flex-start'}}><IconCheck/> Descarga en PNG alta resolución</li>
              <li style={{display:'flex',gap:10,alignItems:'flex-start'}}><IconCheck/> Recuento de piezas y lista de colores</li>
              <li style={{display:'flex',gap:10,alignItems:'flex-start'}}><IconCheck/> Prueba todos los tamaños y paletas</li>
            </ul>
            <button className="btn btn-secondary btn-lg btn-block" style={{marginTop:32}}>Crear un mosaico</button>
          </div>

          {/* Tamaños físicos */}
          {sizes.map((s) => (
            <div key={s.label} className="card reveal" style={{
              padding:36,
              background:'var(--color-surface)',
              border: s.highlight ? '1.5px solid var(--color-primary)' : '1px solid var(--color-border)',
              borderRadius:'var(--radius-lg)',
              position:'relative',
              boxShadow: s.highlight ? 'var(--elev-2)' : 'none',
            }}>
              {s.badge && (
                <div style={{position:'absolute', top:-13, right:24,
                  background:'var(--color-premium)', color:'#fff',
                  font:'var(--text-mono)', fontSize:11, letterSpacing:'.12em', textTransform:'uppercase',
                  padding:'7px 14px', borderRadius:999, boxShadow:'var(--elev-1)'}}>
                  {s.badge}
                </div>
              )}
              <span className="eyebrow no-rule" style={s.highlight ? {color:'var(--color-premium)'} : {}}>
                Premium · {s.label}
              </span>
              <div style={{fontFamily:'Fraunces, serif', fontWeight:700, fontSize:56, letterSpacing:'-.025em', marginTop:8, lineHeight:1}}>
                {s.price}<span style={{fontSize:18, color:'var(--color-fg-muted)', fontWeight:400}}> / mosaico</span>
              </div>
              <div style={{font:'var(--text-body-sm)', color:'var(--color-fg-muted)', marginTop:6}}>
                {s.pieces} piezas · construido y enviado.
              </div>
              <hr style={{border:'none', borderTop:'1px solid var(--color-border)', margin:'28px 0'}}/>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:14, font:'var(--text-body)'}}>
                {s.perks.map((p, i) => (
                  <li key={i} style={{display:'flex',gap:10,alignItems:'flex-start'}}><IconCheck/> {p}</li>
                ))}
              </ul>
              <button className={`btn btn-lg btn-block ${s.highlight ? 'btn-primary' : 'btn-secondary'}`} style={{marginTop:32}}>
                Construir el de verdad
              </button>
            </div>
          ))}
        </div>

        <p style={{font:'var(--text-caption)', color:'var(--color-fg-subtle)', textAlign:'center', marginTop:24}}>
          Tamaños personalizados bajo petición.
        </p>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: '¿Cuánto se tarda?',
      d: 'La vista previa digital es instantánea — menos de 10 segundos. Los mosaicos premium se construyen y envían en 5 días laborables, con foto de confirmación antes del envío.' },
    { q: '¿Qué fotos funcionan mejor?',
      d: 'Retratos con buen contraste y un sujeto claro. Caras, mascotas, objetos sobre fondos sencillos. La app te avisa si una foto es muy pequeña o muy cargada.' },
    { q: '¿Son piezas LEGO de verdad?',
      d: 'Son piezas premium de ABS compatibles con el sistema LEGO®. Somos un estudio independiente y no estamos afiliados con el Grupo LEGO.' },
    { q: '¿Puedo regalarlo?',
      d: 'Sí — añade una nota escrita a mano en el checkout y lo enviamos directamente. También tenemos tarjetas regalo digitales.' },
    { q: '¿Y si se suelta una pieza?',
      d: 'Mándanos una foto y te enviamos el repuesto gratis. El mosaico es tuyo de por vida.' },
    { q: '¿Enviáis fuera de España?',
      d: 'Sí — a toda la UE y Reino Unido con envío con seguimiento. EE.UU. y Canadá vía DHL Express, 7–9 días laborables.' },
  ];
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2>Dudas, <em>resueltas.</em></h2>
        </div>
        <div className="faq-grid" style={{maxWidth: 980, margin:'0 auto'}}>
          {items.map((it, i) => (
            <details className="faq" key={i} {...(i === 0 ? { open: true } : {})}>
              <summary>{it.q}</summary>
              <p>{it.d}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTABanner() {
  return (
    <section className="section">
      <div className="container">
        <div className="cta-banner reveal">
          <div>
            <span className="eyebrow">Cuando estés listo</span>
            <h2 style={{marginTop: 12}}>Sube una foto. <em>Quédate el momento.</em></h2>
            <p className="lede">Vista previa gratis en segundos. Sin tarjeta. Sin registro para probarlo.</p>
          </div>
          <div className="actions">
            <button className="btn btn-primary btn-lg">Crear un mosaico <IconArrow size={16}/></button>
            <button className="btn btn-secondary btn-lg">Habla con el estudio</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="top">
          <div>
            <img src="assets/bricklet-wordmark-cream.svg" height="28" alt="Brikéalo" />
            <p className="blurb">Un pequeño estudio que convierte fotos en mosaicos estilo LEGO. Hecho en Madrid, enviado a todo el mundo.</p>
            <div className="lang" role="group" aria-label="Idioma">
              <button className="active">ES</button>
              <span style={{opacity:.3}}>·</span>
              <button>EN</button>
            </div>
          </div>
          <div>
            <div className="col-eyebrow">Producto</div>
            <div className="links">
              <a href="#how">Cómo funciona</a>
              <a href="#showcase">Ejemplos</a>
              <a href="#pricing">Precios</a>
              <a href="#">Tamaños y marcos</a>
              <a href="#">Tarjetas regalo</a>
            </div>
          </div>
          <div>
            <div className="col-eyebrow">Estudio</div>
            <div className="links">
              <a href="#">Sobre nosotros</a>
              <a href="#">El proceso</a>
              <a href="#">Entrega local</a>
              <a href="#">Press kit</a>
              <a href="#">Contacto</a>
            </div>
          </div>
          <div>
            <div className="col-eyebrow">Legal</div>
            <div className="links">
              <a href="#">Privacidad</a>
              <a href="#">Términos</a>
              <a href="#">Cookies</a>
              <a href="#">Envíos y devoluciones</a>
              <a href="#">Aviso LEGO®</a>
            </div>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 Brikéalo · Estudio independiente · No afiliado con el Grupo LEGO</span>
          <span>Hecho con cariño en Madrid · Calle de Velázquez, 28</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Showcase, Features, Testimonial, Pricing, FAQ, CTABanner, Footer });