// Plan page — mood picker, sample itinerary, toolkit, types, reading/FAQ, CTA (ES)
const { useState: usePMState } = React;

const PlanMood = () => {
  const [active, setActive] = usePMState(0);
  const m = PLAN_MOODS[active];
  return (
    <section className="plan-mood" id="mood">
      <div className="container">
        <div className="plan-section-head">
          <div className="num">III</div>
          <div className="titles">
            <h2>Del <em>ánimo</em> al mapa.</h2>
            <p>Elige la sensación. Te devolvemos el lugar. Un punto de partida para quien está cansado de mirar el mapamundi.</p>
          </div>
          <div className="right">Abrir la herramienta completa <Icon name="arrow" size={12} /></div>
        </div>
        <div className="mood-stage">
          <div className="mood-left">
            <div className="label"><span style={{width:6,height:6,borderRadius:'50%',background:'var(--tan)',display:'inline-block'}}></span>PASO 01 · ELIGE UN ÁNIMO</div>
            <h2 className="serif">¿Qué necesita <em>sentir el viaje?</em></h2>
            <p>Olvida el adónde por un segundo. Elige un ánimo y te mostramos seis destinos que viven ahí — con duraciones, presupuestos y ritmo de muestra.</p>
            <div className="mood-pills">
              {PLAN_MOODS.map((mood, i) => (
                <button key={mood.id} className={`mood-pill ${active === i ? 'active' : ''}`} onClick={() => setActive(i)}>{mood.label}</button>
              ))}
            </div>
            <button className="mood-cta">Ver todas las coincidencias →</button>
          </div>
          <div className="mood-right">
            {PLAN_MOODS.map((mood, i) => (
              <div key={mood.id} className={`mood-img ${active === i ? 'active' : ''}`} style={{ backgroundImage: `url(${mood.img})` }}></div>
            ))}
            <div className="mood-coord">{m.coord}</div>
            <div className="mood-card">
              <div className="lbl"><span style={{width:6,height:6,borderRadius:'50%',background:'var(--tan)',display:'inline-block'}}></span>COINCIDENCIA · {m.label.toUpperCase()}</div>
              <h4>{m.title} <em>{m.em}</em></h4>
              <div className="blurb">{m.blurb}</div>
              <div className="specs">
                {m.specs.map(([l, v], i) => <div key={i}>{l} <span className="v">{v}</span></div>)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const PlanItinerary = () => (
  <section className="plan-itin" id="itin">
    <div className="container">
      <div className="plan-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>Cómo es un <em>buen itinerario</em>.</h2>
          <p>No es una lista de deseos, no es un Google Doc con doce pestañas. Un plan de dos páginas con estructura, holgura y una buena idea por día.</p>
        </div>
        <div className="right">Ver 248 itinerarios <Icon name="arrow" size={12} /></div>
      </div>
      <div className="itin-shell">
        <div className="visual" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=1600&q=80)` }}>
          <div className="mark">
            <span className="l">PLAN MODELO · 06 DÍAS</span>
            <span className="t">Portugal lento, de punta a punta</span>
          </div>
          <div className="stat-overlay">
            <div className="item"><div className="v">6</div><div className="l">Días</div></div>
            <div className="item"><div className="v">3</div><div className="l">Ciudades</div></div>
            <div className="item"><div className="v">$$</div><div className="l">Presupuesto</div></div>
            <div className="item"><div className="v">Mayo</div><div className="l">Mejor mes</div></div>
          </div>
        </div>
        <div className="planner">
          <div className="top">
            <span className="label">PLAN Nº 074 · PORTUGAL</span>
            <span className="ref">REF / PT-074-VOL3</span>
          </div>
          <h3>De Oporto a Lisboa, <em>al ritmo lento.</em></h3>
          <div className="author-row">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&q=80)` }}></div>
            <span>CONSTRUIDO POR MARCUS · 12 MIN DE LECTURA</span>
          </div>
          <div className="itin-days">
            {PLAN_DAYS.map(d => (
              <div key={d.n} className="itin-day">
                <div className="day-num">{d.label}<span className="n">{d.n}</span></div>
                <div className="day-body">
                  <div className="place">{d.place}</div>
                  <div className="desc">{d.desc}</div>
                  <div className="pills">{d.pills.map(p => <span key={p} className="pill">{p}</span>)}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="footer">
            <button className="save">Guardar este itinerario</button>
            <span className="meta-link">VER LOS 248 →</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const PlanToolkit = () => (
  <section className="plan-toolkit" id="toolkit">
    <div className="container">
      <div className="plan-section-head">
        <div className="num">V</div>
        <div className="titles">
          <h2>La <em>caja de herramientas.</em></h2>
          <p>Ocho herramientas que construimos para que dejes de abrir dieciséis pestañas. Calculadoras, planificadores y un Mood-to-Map que de verdad funciona.</p>
        </div>
        <div className="right">Todas las herramientas <Icon name="arrow" size={12} /></div>
      </div>
      <div className="toolkit-grid">
        {PLAN_TOOLS.map((t, i) => (
          <a key={t.title} href="#" className="tool-card">
            <div className="glyph">{t.glyph}</div>
            <h4>{t.title}</h4>
            <p>{t.desc}</p>
            <div className="open">
              <span>{t.action}</span>
              <span className="arrow"><Icon name="arrow" size={12} /></span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const PlanTypes = () => (
  <section className="plan-types" id="types">
    <div className="container">
      <div className="types-head">
        <h2 className="serif">Tipos de viaje,<em>nueve.</em></h2>
        <p>La forma de con quién viajas — solo, en pareja, cuatro amigos — cambia <em>todo lo demás.</em> Empieza aquí, después vuelve a los carriles.</p>
        <a href="#" className="types-all">Los nueve, en detalle →</a>
      </div>
      <div className="types-grid">
        {[0,1,2].map(rowIdx => (
          <div key={rowIdx} className="type-row">
            {PLAN_TYPES.slice(rowIdx*3, rowIdx*3+3).map(t => (
              <a key={t.title} href="#" className="type-cell">
                <div className="head">
                  <span className="num">Nº {t.num}</span>
                  <span className="count">{t.count}</span>
                </div>
                <h3>{t.title}{t.em && <em> {t.em}</em>}</h3>
                <p>{t.desc}</p>
                <div className="tags">{t.tags.map(tag => <span key={tag}>{tag}</span>)}</div>
              </a>
            ))}
          </div>
        ))}
      </div>
    </div>
  </section>
);

const PlanReading = () => {
  const [open, setOpen] = usePMState(0);
  return (
    <section className="plan-reading" id="reading">
      <div className="container">
        <div className="reading-grid">
          <div className="read-list">
            <div className="head">
              <div className="lbl"><span style={{width:6,height:6,borderRadius:'50%',background:'var(--tan)',display:'inline-block'}}></span>VI · LA LISTA DE LECTURAS</div>
              <h3 className="serif">Si solo lees <em>seis cosas.</em></h3>
            </div>
            <div>
              {PLAN_READING.map((r, i) => (
                <a key={r.title} href="#" className="reading-row">
                  <div className="num">{String(i+1).padStart(2,'0')}</div>
                  <div>
                    <div className="title">{r.title}{r.em && <em> {r.em}</em>}</div>
                    <div className="meta">{r.tag}</div>
                  </div>
                  <div className="duration">{r.duration}</div>
                </a>
              ))}
            </div>
          </div>
          <div className="read-list">
            <div className="head">
              <div className="lbl"><span style={{width:6,height:6,borderRadius:'50%',background:'var(--tan)',display:'inline-block'}}></span>VII · PREGUNTAS QUE NOS HACEN MUCHO</div>
              <h3 className="serif">Las preguntas, <em>respondidas.</em></h3>
            </div>
            <div className="faq-list">
              {PLAN_FAQS.map((f, i) => (
                <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
                  <div className="q">
                    <span>{f.q}</span>
                    <span className="toggle">+</span>
                  </div>
                  <div className="a">{f.a}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const PlanCTA = () => (
  <section className="plan-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="lhs">
        <div className="kicker">PLANEA LO QUE SEA, EMPIEZA DONDE SEA</div>
        <h2 className="serif">Planea un viaje<em>sin perder el hilo.</em></h2>
        <p>Empieza por los carriles, termina con un itinerario guardado y no vuelvas a abrir once pestañas de blogs de viaje.</p>
        <div className="cta-actions">
          <button className="btn-primary">Empieza por los carriles →</button>
          <a href="#" className="btn-ghost">Ver 248 itinerarios</a>
        </div>
      </div>
    </div>
    <div className="coord">PLAN — PUBLICADO 24.04.2026</div>
    <div className="coord right">MESA DE CAMPO Nº 074</div>
  </section>
);

Object.assign(window, { PlanMood, PlanItinerary, PlanToolkit, PlanTypes, PlanReading, PlanCTA });