/* global React */

function Contributor({ data }) {
  return (
    <article className={`contrib ${data.flip ? "flip" : ""}`}>
      <div className="c-portrait">
        <span className="frame-tag">Contributor · No. {data.no}</span>
        {data.portrait
          ? <img src={data.portrait} alt={data.name} style={{width:"100%",height:"100%",objectFit:"cover",objectPosition:"center top"}}/>
          : <div className="placeholder">Portrait<br/>{data.first} · {data.city}</div>}
        <span className="signature">{data.sig}</span>
      </div>
      <div className="c-body">
        <div className="c-eyebrow"><span>Lane Editor — {data.lane} · {data.city}</span></div>
        <h3 className="c-name">{data.first} <span className="it">{data.last}</span></h3>
        <p className="c-role">{data.role}</p>
        <p className="c-bio">{data.bio}</p>
        <div className="c-tags">
          {data.tags.map((t, i) => <span key={i} className="c-tag">{t}</span>)}
        </div>
        <div className="c-stats">
          <div className="c-stat">
            <div className="n">{data.stats[0].n}<span className="it">.</span></div>
            <div className="l">{data.stats[0].l}</div>
          </div>
          <div className="c-stat">
            <div className="n">{data.stats[1].n}</div>
            <div className="l">{data.stats[1].l}</div>
          </div>
          <div className="c-stat">
            <div className="n"><span className="it">{data.stats[2].n}</span></div>
            <div className="l">{data.stats[2].l}</div>
          </div>
        </div>
        <a className="c-cta">Read {data.first}’s guides <span className="arr">→</span></a>
      </div>
    </article>
  );
}

function Contributors() {
  const assetBase = window.HOWTO_ASSET_BASE || "";
  const jenna = {
    no: "01", first: "Jenna", last: "", sig: "— J.",
    portrait: `${assetBase}assets/jenna.png`, city: "Atlanta",
    lane: "Fitness",
    role: "Strength, programming, and the case for boring consistency.",
    bio: "Jenna leads the Fitness lane from Atlanta. Former collegiate athlete, current evangelist for showing up three days a week and not making it a personality. She believes in the basics, done well, for years — not weeks.",
    tags: ["Strength", "Programming", "Mobility", "Beginner-friendly", "Atlanta"],
    stats: [
      { n: "9yr", l: "Coaching" },
      { n: "184", l: "Guides published" },
      { n: "Atlanta", l: "Home base" },
    ],
    flip: false,
  };
  const torrie = {
    no: "02", first: "Torrie", last: "", sig: "— T.",
    portrait: `${assetBase}assets/torrie.png`, city: "Washington DC",
    lane: "Health",
    role: "Sleep, breath, and the long view on a healthy life.",
    bio: "Torrie runs the Health lane from DC. Background in behavioral science, allergic to hacks. He’ll talk you out of three new supplements before he talks you into one habit — which is exactly why we hired him.",
    tags: ["Sleep", "Breathwork", "Habits", "Quiet authority", "Washington DC"],
    stats: [
      { n: "11yr", l: "On the field" },
      { n: "212", l: "Guides published" },
      { n: "DC", l: "Home base" },
    ],
    flip: true,
  };

  return (
    <section id="contributors" className="section section-rule" data-screen-label="06 Contributors">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 04</div>
          <h2 className="title">The <span className="display italic" style={{color:"var(--accent)"}}>two voices</span> behind the lanes.</h2>
          <div className="meta">Atlanta + DC<br/>—one shared standard</div>
        </div>
        <Contributor data={jenna} />
        <Contributor data={torrie} />
      </div>
    </section>
  );
}
window.Contributors = Contributors;

/* ============================================================
   FOOTER — taxonomy lives here, light treatment
   ============================================================ */
function Footer() {
  const HEALTH = ["Body","Mind","Soul","Prevention","Care","Recovery"];
  const FITNESS = ["Train","Move","Fuel","Diet","Build","Recover"];
  return (
    <footer className="footer" data-screen-label="07 Footer">
      <div className="footer-inner">
        <div className="footer-mast">
          How to<span className="gold">.</span> <span style={{ fontStyle: "italic" }}>Health</span> <span className="amp">&amp;</span> <span style={{ fontStyle: "italic" }}>Fitness.</span>
        </div>
        <div className="footer-tax">
          <div className="footer-tax-col">
            <h5>Health · Lane 01</h5>
            <ol>
              {HEALTH.map((c, i) => (
                <li key={c}><span className="n">0{i+1}</span>{c}</li>
              ))}
            </ol>
          </div>
          <div className="footer-tax-col">
            <h5>Fitness · Lane 02</h5>
            <ol>
              {FITNESS.map((c, i) => (
                <li key={c}><span className="n">0{i+1}</span>{c}</li>
              ))}
            </ol>
          </div>
        </div>
        <div className="footer-grid">
          <div className="footer-col footer-sub">
            <h4>The Subscriber</h4>
            <p>One letter, every Tuesday. Five new guides, no filler. Unsubscribe whenever — we won’t take it personally.</p>
            <div className="footer-sub-input">
              <input placeholder="you@somewhere.com" />
              <button>Sign up</button>
            </div>
          </div>
          <div className="footer-col">
            <h4>Lanes</h4>
            <ul>
              <li>Health</li>
              <li>Fitness</li>
              <li>Weekly programming</li>
              <li>Editor’s picks</li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>The Co.</h4>
            <ul>
              <li>About</li>
              <li>Editions — Fashion, Health</li>
              <li>Contributors</li>
              <li>Press</li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Elsewhere</h4>
            <ul>
              <li>Instagram</li>
              <li>Newsletter</li>
              <li>Podcast — coming soon</li>
              <li>Contact</li>
            </ul>
          </div>
        </div>
        <div className="footer-disclaimer">
          <strong>NOT MEDICAL ADVICE.</strong> &nbsp;HowTo: Health &amp; Fitness publishes general-interest writing about wellness and movement. Nothing on this site is a substitute for advice from your doctor, nutritionist, or therapist. If you have a question about your body, ask a professional first.
        </div>
        <div className="footer-bottom">
          <span>© 2026 The How To Co. · All rights reserved.</span>
          <span>Edition 08 — Health &amp; Fitness · Made in Atlanta + DC</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;