/* global React */
const { useState, useEffect } = React;

// ─── Brand mark + nav ───────────────────────────────────

function Brand({ onClick }) {
  return (
    <a className="brand" onClick={onClick} style={{ cursor: "pointer" }}>
      <span className="brand-mark" aria-hidden="true"></span>
      <span>Idiot Proof Diet Online</span>
    </a>
  );
}

const NAV_ITEMS = [
  { id: "home", label: "Home" },
  { id: "handbook", label: "The Handbook" },
  { id: "method", label: "How it works" },
  { id: "faq", label: "FAQ" },
];

function Nav({ page, setPage, buyText = "Buy the ebook" }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <Brand onClick={() => setPage("home")} />
        <div className="nav-links" role="navigation">
          {NAV_ITEMS.map((n) => (
            <a
              key={n.id}
              className={"nav-link" + (page === n.id ? " active" : "")}
              onClick={() => setPage(n.id)}
            >
              {n.label}
            </a>
          ))}
        </div>
        <a className="btn btn-primary" onClick={() => setPage("handbook")}>
          {buyText}
        </a>
      </div>
    </nav>
  );
}

// ─── Footer ─────────────────────────────────────────────

function Footer({ setPage }) {
  const link = (id, label) => (
    <a onClick={() => setPage(id)}>{label}</a>
  );
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div style={{ maxWidth: 320 }}>
            <Brand onClick={() => setPage("home")} />
            <p style={{ marginTop: 16, color: "var(--ink-muted)", fontSize: 14, lineHeight: 1.6 }}>
              A stress-free, bite-sized blueprint for weight loss that
              actually sticks — small habits instead of willpower.
            </p>
          </div>
          <div className="footer-cols">
            <div>
              <h4>The book</h4>
              <ul>
                <li>{link("handbook", "The Handbook")}</li>
                <li>{link("method", "How it works")}</li>
                <li>{link("faq", "FAQ")}</li>
              </ul>
            </div>
            <div>
              <h4>Fine print</h4>
              <ul>
                <li><a onClick={() => setPage("refund")}>Refund policy</a></li>
                <li><a onClick={() => setPage("privacy")}>Privacy</a></li>
                <li><a onClick={() => setPage("terms")}>Terms</a></li>
              </ul>
            </div>
          </div>
        </div>
        <p className="disclaimer">
          The information in this ebook is for educational purposes only and is
          not medical advice. Individual results vary. Consult a doctor before
          starting any new diet, especially if you have underlying health
          conditions, are pregnant, or are taking medication.
          IdiotProofDietOnline.com © {new Date().getFullYear()}.
        </p>
      </div>
    </footer>
  );
}

// ─── Reusable bits ──────────────────────────────────────

function Eyebrow({ children }) {
  return <span className="h-eyebrow">{children}</span>;
}

function SectionHead({ eyebrow, title, lede, align = "row" }) {
  return (
    <div className="section-head" style={align === "stack" ? { flexDirection: "column", alignItems: "start" } : undefined}>
      <div>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2>{title}</h2>
      </div>
      {lede && <p className="lede">{lede}</p>}
    </div>
  );
}

function BookHero({ rotate = -3, src = "assets/new-book-cover.webp", alt = "Idiot-Proof Habits for Weight Loss" }) {
  return (
    <div className="book-wrap">
      <div className="book-bg" aria-hidden="true"></div>
      <img className="book" src={src} alt={alt} style={{ width: "min(380px, 80%)", aspectRatio: "3/4", objectFit: "cover", transform: `rotate(${rotate}deg)`, boxShadow: "var(--shadow-book)", borderRadius: "4px", position: "relative", zIndex: 1 }} />
    </div>
  );
}

function Steps({ items }) {
  return (
    <div className="steps">
      {items.map((s, i) => (
        <div className="step" key={i}>
          <div className="step-num">{String(i + 1).padStart(2, "0")}</div>
          <h3>{s.title}</h3>
          <p>{s.body}</p>
        </div>
      ))}
    </div>
  );
}

function Checklist({ items }) {
  return (
    <ul className="checklist">
      {items.map((it, i) => (
        <li key={i}>
          <span className="check">✓</span>
          <div>
            <strong>{it.title}</strong>
            <span>{it.body}</span>
          </div>
        </li>
      ))}
    </ul>
  );
}

function Testimonial({ stars = 5, quote, name, meta, initial }) {
  return (
    <article className="testimonial">
      <div className="stars" aria-label={`${stars} out of 5 stars`}>
        {"★".repeat(stars)}
        {"☆".repeat(5 - stars)}
      </div>
      <blockquote>"{quote}"</blockquote>
      <div className="author">
        <span className="avatar">{initial}</span>
        <div>
          <div className="name">{name}</div>
          <div className="meta">{meta}</div>
        </div>
      </div>
    </article>
  );
}

function FAQItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={"faq-item" + (open ? " open" : "")} onClick={() => setOpen(!open)}>
      <div>
        <h3 className="faq-q">{q}</h3>
        <p className="faq-a">{a}</p>
      </div>
      <span className="faq-toggle" aria-hidden="true">+</span>
    </div>
  );
}

function PricingCard({ buyText, onBuy }) {
  return (
    <div className="price-card">
      <div className="price-row">
        <span className="price-now">$17</span>
        <span className="price-was">$29</span>
      </div>
      <div className="price-meta">One-time payment · Instant download (PDF + EPUB)</div>
      <ul className="price-included" style={{ listStyle: "none", padding: 0 }}>
        <li>✓ The complete 180-page handbook</li>
        <li>✓ 11-day calorie-shifting menu generator</li>
        <li>✓ Printable grocery lists &amp; meal cards</li>
        <li>✓ Lifetime updates</li>
      </ul>
      <a className="btn btn-accent btn-lg" style={{ width: "100%" }} onClick={onBuy}>
        {buyText} →
      </a>
    </div>
  );
}

// expose to other scripts
Object.assign(window, {
  Brand, Nav, Footer, Eyebrow, SectionHead, BookHero,
  Steps, Checklist, Testimonial, FAQItem, PricingCard,
  NAV_ITEMS,
});