/* global React, Footer */

const TRUST_PAGES = {
  about: {
    type: "about-network",
  },
  contact: {
    eyebrow: "Contact",
    title: <>Contact The <br /><span>HowTo</span> Network</>,
    deck: "For corrections, partnerships, accessibility notes, or editorial requests, send the page URL and the detail that needs attention.",
    sections: [
      ["Editorial corrections", "Send the URL, the sentence in question, and any source or context we should review."],
      ["Partnerships", "We consider partnerships only when they preserve the independence of the guide and make sense for the reader."],
      ["Accessibility", "If something is hard to read, navigate, or use, tell us the device, browser, and page URL."],
      ["Email", "hello@thehowtonetwork.com"],
    ],
  },
  disclaimer: {
    eyebrow: "Disclaimer",
    title: <>Use Judgment. <br /><span>Always.</span></>,
    deck: "Our guides are general information. They are not professional, medical, legal, financial, or safety advice.",
    sections: [
      ["General guidance", "Fit, tailoring, care, sizing, color, and fabric behavior vary by person, garment, climate, maker, and use case."],
      ["AI-assisted content", "Some content is generated or assisted by Iris. We work to keep it accurate and useful, but it may be incomplete, outdated, or imperfect."],
      ["Professional help", "For expensive alterations, specialist garments, skin-sensitive products, or safety issues, consult a qualified professional."],
      ["No guarantees", "We do not guarantee outcomes, availability, pricing, sizing, or suitability for a particular reader."],
    ],
  },
  privacy: {
    eyebrow: "Privacy",
    title: <>Privacy, <br /><span>Plainly.</span></>,
    deck: "We aim to collect as little as needed to operate the site, improve the experience, and understand what readers use.",
    sections: [
      ["What may be collected", "Basic analytics, device information, pages visited, referral sources, and information you voluntarily submit may be processed."],
      ["How it is used", "We use this information to operate the site, improve pages, prevent abuse, and understand reader demand."],
      ["Third parties", "Hosting, analytics, search, AI, and infrastructure providers may process limited data as part of delivering the service."],
      ["Contact", "For privacy questions, contact hello@thehowtonetwork.com."],
    ],
  },
  terms: {
    eyebrow: "Terms",
    title: <>Terms Of Use, <br /><span>Without Theater.</span></>,
    deck: "By using HowTo: Fashion Edition, you agree to use the site responsibly and understand that content is provided for general informational purposes.",
    sections: [
      ["Use of content", "You may read and share links to our pages. Do not scrape, resell, or republish substantial portions without permission."],
      ["No professional relationship", "Using this site does not create a stylist-client, professional, medical, legal, or financial relationship."],
      ["Availability", "The site may change, move, go offline, or update without notice."],
      ["Liability", "Use the information at your own discretion. We are not liable for decisions made based on site content."],
    ],
  },
};

function NetworkAbout() {
  return (
    <main className="beauty-about">
      <div className="beauty-about-inner">
        <section className="ba-hero">
          <p>About Us</p>
          <h1>About The <br /><span>HowTo</span> Network</h1>
          <div>We started with a simple idea: everyone knows how to do something. And almost nobody has written it down.</div>
        </section>

        <section className="ba-story ba-left">
          <blockquote>Somewhere right now, a grandmother in <span>Oaxaca</span> is making mole the way her mother made it.</blockquote>
          <div className="ba-split">
            <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 className="ba-image">
              <img src="https://images.unsplash.com/photo-1566121933407-3c7ccdd26763?auto=format&fit=crop&q=80&w=1000" alt="Craftsmanship" referrerPolicy="no-referrer" />
              <div><span>▶</span></div>
            </div>
          </div>
        </section>

        <section className="ba-story ba-right">
          <blockquote>A dad in <span>Ohio</span> just fixed his leaky faucet for the first time and he's unreasonably proud of it. <strong>He should be.</strong></blockquote>
          <div>
            <p>None of that knowledge is on the internet. Not really. Not in a way that feels like them.</p>
            <em>That's what we're building.</em>
          </div>
        </section>

        <section className="ba-card">
          <h2>The HowTo Network is <br /><span>three platforms</span> and <br /><em>one mission.</em></h2>
          <div className="ba-platforms">
            <article>
              <h3>Home Edition</h3>
              <p>For the fixers and builders — the people who'd rather figure it out than call someone.</p>
            </article>
            <article>
              <h3>Food Edition</h3>
              <p>For the cooks — the ones following Gusto's instructions and the ones ignoring them entirely.</p>
            </article>
            <article>
              <h3>Beauty Edition</h3>
              <p>For everyone who just wants an honest answer from someone who actually knows.</p>
            </article>
          </div>
          <footer>Same bones. Different worlds. One network.</footer>
        </section>

        <section className="ba-two">
          <div>
            <h2>We're not a media company that hired writers to cover topics.</h2>
            <span></span>
          </div>
          <div>
            <p>We're not an algorithm that scraped the internet and called it knowledge. We're a platform that believes the best how-to for making tamales was written by someone who makes tamales.</p>
            <p>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>
            <em>We just built the place for all of it to live.</em>
          </div>
        </section>

        <section className="ba-big">
          <h2>Eight languages. <br />Every country. <br /><span>Every kitchen,</span> <br />every bathroom, <br />every salon chair.</h2>
          <p>The goal is simple and slightly ridiculous: the biggest how-to resource in the world, built by the world, for the world.</p>
          <div>We'll get there one Saturday at a time.</div>
        </section>

        <footer className="ba-network">
          <div>
            <p>The HowTo Network</p>
            <nav>
              <a href="https://howtohomeedition.com">howtohomeedition.com</a><span>·</span>
              <a href="https://howtofoodedition.com">howtofoodedition.com</a><span>·</span>
              <a href="https://howtobeautyedition.com">howtobeautyedition.com</a><span>·</span>
              <a href="https://howtotraveledition.com">howtotraveledition.com</a><span>·</span>
              <a href="https://howtotechedition.com">howtotechedition.com</a><span>·</span>
              <a href="https://howtofamilyedition.com">howtofamilyedition.com</a><span>·</span>
              <a href="https://howtofinanceedition.com">howtofinanceedition.com</a>
            </nav>
          </div>
          <p>Part of The Legacy Bridge family.</p>
        </footer>
      </div>
    </main>
  );
}

function SimpleTrustPage({ page }) {
  return (
    <main className="beauty-about trust-simple">
      <div className="beauty-about-inner">
        <section className="ba-hero">
          <p>{page.eyebrow}</p>
          <h1>{page.title}</h1>
          <div>{page.deck}</div>
        </section>
        <section className="trust-simple-grid">
          {page.sections.map(([title, copy], index) => (
            <article key={title}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <h2>{title}</h2>
              <p>{copy}</p>
            </article>
          ))}
        </section>
      </div>
    </main>
  );
}

function TrustPage() {
  const key = window.TRUST_PAGE_KEY || "about";
  const page = TRUST_PAGES[key] || TRUST_PAGES.about;
  return (
    <React.Fragment>
      {page.type === "about-network" ? <NetworkAbout /> : <SimpleTrustPage page={page} />}
      <Footer />
    </React.Fragment>
  );
}

window.TrustPage = TrustPage;