// Page components — Home, PoemView, Songs, Book, About, Contact

function Home({ poems, onOpenPoem, onNavigate }) {
  // Featured = first poem
  const featured = poems[0];
  const rest = poems.slice(1);

  return (
    <main className="page">
      <div className="featured-wrap">
        <div className="featured-img">
          {featured.image && featured.image !== "placeholder"
            ? <img src={featured.image} alt={featured.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            : <Placeholder label="Заглавно изображение" />}
        </div>
        <div className="featured-text">
          <div className="featured-tag">Стихотворение на седмицата</div>
          <h2>{featured.title}</h2>
          <div className="poem-preview">{featured.body.split("\n").slice(0, 6).join("\n")}…</div>
          <button className="read-more" onClick={() => onOpenPoem(featured.id)}>
            Прочети цялото →
          </button>
        </div>
      </div>

      <div style={{ marginTop: 140, display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid var(--rule)", paddingBottom: 24 }}>
        <h2 className="section">Всички творби</h2>
        <span style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
          {poems.length} стихотворения
        </span>
      </div>

      <div className="poem-index">
        {rest.map((p, i) =>
          <div key={p.id} className="poem-row" onClick={() => onOpenPoem(p.id)}>
            <span className="num">{String(i + 2).padStart(2, "0")}</span>
            <div>
              <div className="title">{p.title}</div>
              <div className="excerpt">{p.excerpt}</div>
            </div>
            <span className="has-img">{p.image ? "с изображение" : ""}</span>
            <span className="arrow">→</span>
          </div>
        )}
      </div>
    </main>
  );
}

function PoemView({ poem, poems, onOpenPoem, onBack }) {
  const idx = poems.findIndex((p) => p.id === poem.id);
  const prev = idx > 0 ? poems[idx - 1] : null;
  const next = idx < poems.length - 1 ? poems[idx + 1] : null;

  return (
    <div className="poem-view">
      <button className="back" onClick={onBack}>
        <ArrowLeft /> Обратно към творбите
      </button>

      <header className="poem-header">
        <div className="eyebrow">Поезия</div>
        <h1>{poem.title}</h1>
        {poem.subtitle && <div className="subtitle">{poem.subtitle}</div>}
      </header>

      {poem.image &&
        <div className="poem-art">
          {poem.image === "placeholder"
            ? <Placeholder label="Снимка / скулптура" />
            : <img src={poem.image} alt={poem.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
        </div>
      }

      <div className="poem-body">{poem.body}</div>

      <div className="poem-signature">
        П. Анастасов
        {poem.year && <span className="date">{poem.year}</span>}
      </div>

      <div className="poem-nav">
        <button onClick={prev ? () => onOpenPoem(prev.id) : undefined} disabled={!prev} style={{ opacity: prev ? 1 : 0.3, textAlign: "left" }}>
          ← Предишно
          {prev && <span className="nav-title">{prev.title}</span>}
        </button>
        <button onClick={next ? () => onOpenPoem(next.id) : undefined} disabled={!next} style={{ opacity: next ? 1 : 0.3, textAlign: "right" }}>
          Следващо →
          {next && <span className="nav-title">{next.title}</span>}
        </button>
      </div>
    </div>
  );
}

function Songs({ songs }) {
  return (
    <main className="page">
      <div className="eyebrow">Музика</div>
      <h1 className="display">Песни</h1>
      <p className="lede">Стихове, превърнати в мелодия. Послушай и се потопи в света на думите.</p>

      <div className="song-list">
        {songs.map((song) =>
          <div className="song-card" key={song.id}>
            <div className="song-cover">
              <Placeholder label="обложка" />
            </div>
            <div className="song-meta">
              <div className="tag">Песен · {song.year}</div>
              <h3>{song.title}</h3>
              <div className="sub">{song.subtitle}</div>
              <SunoPlayer song={song} />
              <p style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-mute)", marginTop: 18 }}>
                Натисни ↗ Suno за пълно слушане
              </p>
            </div>
          </div>
        )}

        <div style={{ marginTop: 48, padding: 48, border: "1px dashed var(--rule)", textAlign: "center", color: "var(--ink-mute)", fontStyle: "italic", fontSize: 18 }}>
          Още песни идват скоро…
        </div>
      </div>
    </main>
  );
}

function Book() {
  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email) setSubmitted(true);
  };

  return (
    <main className="page">
      <div className="book-hero">
        <div className="book-mockup">
          <div className="book-mockup-content">
            <div className="top">Поезия · Скулптура</div>
            <div className="mid">
              <h3>Тогава ли<br />си цял?</h3>
              <p>избрани стихотворения и образи</p>
            </div>
            <div className="bottom">Петър Анастасов</div>
          </div>
        </div>
        <div className="book-text">
          <div className="eyebrow">Очаквайте</div>
          <h2>Книгата</h2>
          <p>Сборник от стихотворения, придружени от снимки на скулптури — две форми на едно и също търсене.</p>
          <p>Подготовката тече. Ако искате да научите първи кога излиза — оставете имейла си.</p>

          {!submitted ?
            <form className="notify-form" onSubmit={submit}>
              <input
                type="email"
                placeholder="имейл адрес"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required />
              <button type="submit">Уведоми ме →</button>
            </form> :
            <div className="notify-thanks">Благодаря — ще ви уведомим.</div>
          }
        </div>
      </div>
    </main>
  );
}

function About() {
  return (
    <main className="page">
      <div className="eyebrow">За автора</div>
      <h1 className="display">Петър Анастасов</h1>

      <div className="about-grid">
        <div className="portrait">
          <Placeholder label="Портрет" />
        </div>
        <div className="about-text">
          <p>Петър Анастасов пише стихотворения от години — за любов, памет, душа и преоткриване. Думите му търсят онова, което не може да се купи и трудно се изговаря.</p>

          <div className="pull">„…колко грях е нужен да си стих!"</div>

          <p>Освен поезия създава и песни, превръщайки стиховете си в мелодия. Работи и със скулптура — образи, които дишат заедно с думите.</p>
          <p style={{ fontStyle: "italic", color: "var(--ink-mute)" }}></p>
        </div>
      </div>
    </main>
  );
}

function Contact() {
  const [form, setForm] = React.useState({ name: "", email: "", message: "" });
  const [sent, setSent] = React.useState(false);
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <main className="page">
      <div className="eyebrow">Контакт</div>
      <h1 className="display">Пишете ни</h1>
      <p className="lede">За въпроси, отзиви или ако искате да публикувате нещо — оставете съобщение.</p>

      <div className="contact-grid">
        <div className="contact-info">
          <span className="label">Имейл</span>
          <span className="value">pepi_an@abv.bg</span>
          <span className="label">Социални</span>
          <span className="value">Facebook · Instagram</span>
          <p>Отговарям обикновено в рамките на няколко дни. Благодаря за интереса към творчеството.</p>
        </div>
        {!sent ?
          <form className="contact-form" onSubmit={submit}>
            <div className="field">
              <label>Име</label>
              <input value={form.name} onChange={update("name")} required />
            </div>
            <div className="field">
              <label>Имейл</label>
              <input type="email" value={form.email} onChange={update("email")} required />
            </div>
            <div className="field">
              <label>Съобщение</label>
              <textarea rows={5} value={form.message} onChange={update("message")} required />
            </div>
            <button className="submit" type="submit">Изпрати →</button>
          </form> :
          <div style={{ fontFamily: "var(--hand)", fontSize: 36, color: "var(--accent)", lineHeight: 1.2 }}>
            Благодаря,<br />получих съобщението ти.
          </div>
        }
      </div>
    </main>
  );
}

Object.assign(window, { Home, PoemView, Songs, Book, About, Contact });