// components.jsx — вёрстка лендинга по финальному макету "Изломов - финал.dc.html"

function Tabs({ worlds, active, onSelect }) {
  return (
    <div className="tabs-wrap">
      <div className="tabs">
        {worlds.map((w, i) => (
          <button
            key={w.label}
            className={"tab" + (i === active ? " active" : "")}
            onClick={() => onSelect(i)}
          >
            {w.label}
          </button>
        ))}
      </div>
    </div>
  );
}

function Featured({ book }) {
  return (
    <div className="featured">
      <img src={book.cover} alt={book.title} />
      <div className="featured-info">
        <div className="featured-title">{book.title}</div>
        <div className="featured-pitch">{book.pitch}</div>
        <div className="featured-meta">{book.meta}</div>
        <a className="btn-read" href={book.link} target="_blank" rel="noopener">
          Читать бесплатно
        </a>
      </div>
    </div>
  );
}

function RestItem({ book }) {
  return (
    <div className="rest-item">
      <img src={book.cover} alt={book.title} />
      <div className="rest-info">
        <div className="rest-title-row">
          <div className="rest-title">{book.title}</div>
          {book.isNew && <span className="badge-new">новинка</span>}
        </div>
        <div className="rest-pitch">{book.pitch}</div>
        <a className="rest-link" href={book.link} target="_blank" rel="noopener">
          читать →
        </a>
      </div>
    </div>
  );
}

function WorldPanel({ world }) {
  const [featured, ...rest] = world.books;
  return (
    <div className="world">
      <div className="world-tag">{world.tag}</div>
      <Featured book={featured} />
      {rest.map((b) => (
        <RestItem key={b.title} book={b} />
      ))}
      <div className="quote-block">
        <div className="quote-text">{world.quote}</div>
        <div className="quote-src">{world.qsrc}</div>
      </div>
    </div>
  );
}

function App() {
  const author = window.AUTHOR;
  const worlds = window.WORLDS;
  const [active, setActive] = React.useState(0);
  const world = worlds[active];

  return (
    <div className="page">
      <div className="hero">
        <div className="eyebrow">{author.name}</div>
        <div className="badge">{author.badge}</div>
        <h1>{author.title}</h1>
        <p className="lead">{author.lead}</p>
      </div>

      <Tabs worlds={worlds} active={active} onSelect={setActive} />
      <WorldPanel world={world} />

      <div className="footer-ctas">
        <a className="btn-primary" href={author.worksUrl} target="_blank" rel="noopener">
          Все книги автора
        </a>
        <a className="btn-outline" href={author.profileUrl} target="_blank" rel="noopener">
          Подписаться на новинки
        </a>
      </div>
    </div>
  );
}