// Editorial About page — ported from howtohomeedition.com/about, repaletted for Finance.
// Keeps Finance chrome (Ticker + Nav + NetworkBand + Footer). Body copy is verbatim.

function AboutHero() {
  return (
    <section className="abt-hero">
      <div className="abt-kicker">ABOUT US</div>
      <h1 className="abt-hero__h1">
        About The<br />
        <em>HowTo</em> Network
      </h1>
      <p className="abt-hero__sub">
        We started with a simple idea: everyone knows how to do something. And almost nobody has written it down.
      </p>
    </section>
  );
}

function AboutGrandmother() {
  return (
    <section className="abt-row abt-row--left">
      <div className="abt-row__text">
        <p className="abt-row__h">
          Somewhere right now, a grandmother in <em>Oaxaca</em> is making mole the way her mother made it.
        </p>
        <p className="abt-row__p">
          A plumber in Johannesburg knows exactly which pipe fitting nobody else thinks to use. A teenager in Seoul has figured out the perfect skincare routine for her skin type and her climate and her budget.
        </p>
      </div>
      <div className="abt-row__img">
        <img
          src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&auto=format&fit=crop&q=80"
          alt="Craftsmanship"
          loading="lazy"
        />
      </div>
    </section>
  );
}

function AboutOhio() {
  return (
    <section className="abt-row abt-row--right">
      <p className="abt-row__h">
        A dad in <em>Ohio</em> just fixed his leaky faucet for the first time and he&rsquo;s unreasonably proud of it.{" "}
        <span className="abt-em">He should be.</span>
      </p>
      <p className="abt-row__p">
        None of that knowledge is on the internet. Not really. Not in a way that feels like them.
      </p>
      <p className="abt-row__quote">&ldquo;That&rsquo;s what we&rsquo;re building.&rdquo;</p>
    </section>
  );
}

function AboutCard() {
  return (
    <section className="abt-card">
      <div className="abt-card__glow" />
      <h2 className="abt-card__h">
        The HowTo Network is<br />
        <em>three platforms</em> and<br />
        <em>one mission.</em>
      </h2>
      <div className="abt-card__grid">
        <div>
          <div className="abt-card__label">HOME EDITION</div>
          <p>For the fixers and builders &mdash; the people who&rsquo;d rather figure it out than call someone.</p>
        </div>
        <div>
          <div className="abt-card__label">FOOD EDITION</div>
          <p>For the cooks &mdash; the ones following Gusto&rsquo;s instructions and the ones ignoring them entirely.</p>
        </div>
        <div>
          <div className="abt-card__label">BEAUTY EDITION</div>
          <p>For everyone who just wants an honest answer from someone who actually knows.</p>
        </div>
      </div>
      <hr className="abt-card__rule" />
      <p className="abt-card__close"><em>Same bones. Different worlds. One network.</em></p>
    </section>
  );
}

function AboutSticky() {
  return (
    <section className="abt-sticky">
      <div className="abt-sticky__left">
        <h2 className="abt-sticky__h">
          We&rsquo;re not a media company that hired writers to cover topics.
        </h2>
        <span className="abt-sticky__bar" />
      </div>
      <div className="abt-sticky__right">
        <p>
          We&rsquo;re not an algorithm that scraped the internet and called it knowledge. We&rsquo;re a platform that believes the best how-to for making tamales was written by someone who makes tamales.
        </p>
        <p className="abt-sticky__big">
          The best tutorial for a blowout was filmed in an actual salon.
        </p>
        <p>
          The best guide to fixing a garbage disposal was written by someone whose garbage disposal was actually broken.
        </p>
        <p className="abt-sticky__quote">
          We just built the place for all of it to live.
        </p>
      </div>
    </section>
  );
}

function AboutLangs() {
  return (
    <section className="abt-langs">
      <h2 className="abt-langs__h">
        Eight languages.<br />
        Every country.<br />
        <em>Every kitchen,</em><br />
        every bathroom,<br />
        every salon chair.
      </h2>
      <p className="abt-langs__sub">
        The goal is simple and slightly ridiculous: the biggest how-to resource in the world, built by the world, for the world.
      </p>
      <div className="abt-langs__pill">WE&rsquo;LL GET THERE ONE SATURDAY AT A TIME.</div>
    </section>
  );
}

function AboutPage() {
  const [lane, setLane] = React.useState("personal");
  return (
    <div className="abt site" data-lane={lane}>
      <Ticker />
      <Nav lane={lane} setLane={setLane} />
      <main className="abt__main">
        <AboutHero />
        <AboutGrandmother />
        <AboutOhio />
        <AboutCard />
        <AboutSticky />
        <AboutLangs />
      </main>
      <NetworkBand />
      <Footer />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<AboutPage />);