// L5 How-to leaf — "Moisturising oily skin without the mid-day slick"

const HT = {
  kicker: "How To · Skin · Moisturising · Oily Skin",
  h1: "Moisturising oily skin without the <em>mid-day slick.</em>",
  deck: "A four-step routine that hydrates without the 3pm shine. Around 90 seconds, twice a day. The most-asked question we get on oily skin, finally answered properly.",
  date: "Updated Friday, 24 April 2026",
  read: "4 min read",
  authors: "Edited by Nelly · Words by Iris",
  hero: "https://images.unsplash.com/photo-1556228852-80b6e5eeff06?w=1400&q=80&auto=format&fit=crop",
  heroTag: "Fig. 01 · The desk, late evening",

  difficulty: "Beginner",
  time: "90 sec",
  twice: "Twice a day",
  cost: "~£0",
};

const HT_TOC = [
  { n: "I",   t: "Why oily skin still needs moisture" },
  { n: "II",  t: "The four steps" },
  { n: "III", t: "How to know it's working" },
  { n: "IV",  t: "Troubleshooting" },
];

const HT_TOOLS = [
  { n: "01", t: "A low-pH gel cleanser" },
  { n: "02", t: "A hydrating toner or essence (optional)" },
  { n: "03", t: "A gel-cream moisturiser" },
  { n: "04", t: "A lightweight, non-comedogenic SPF" },
  { n: "05", t: "A clean cotton flannel" },
];

const HT_INGREDIENTS = [
  { name: "Niacinamide 5%", note: "The single most useful active for oily skin. Calms shine within four weeks." },
  { name: "Hyaluronic acid", note: "Hydrates without occluding. Apply to damp skin only." },
  { name: "Salicylic acid 2%", note: "Two evenings a week, max. Skip if your skin is reactive." },
  { name: "Glycerin", note: "The unsung hero. Hydrates, attracts water, doesn't sit." },
];

const HT_STEPS = [
  {
    n: "01",
    eb: "Step one · 30 seconds",
    h: "Cleanse on <em>damp</em> skin.",
    body: "Splash your face with cool water — not warm. Press a coin of low-pH gel cleanser into wet palms, then onto wet skin. Forty seconds of small circles, no scrubbing. Rinse with the same cool water. The temperature is doing real work here: warm water strips, cool water doesn't.",
    tip: "If your skin feels squeaky-clean after rinsing, the cleanser is wrong. It should feel like nothing.",
    img: "https://images.unsplash.com/photo-1607006344380-b6775a0824a4?w=1200&q=80&auto=format&fit=crop",
    fig: "Fig. 02 · Step one",
    time: "0:00 → 0:30",
    tools: "Gel cleanser",
  },
  {
    n: "02",
    eb: "Step two · 15 seconds",
    h: "Pat — don't rub — until <em>just damp.</em>",
    body: "Use a clean cotton flannel. Press it against your face once. Lift. Press again. Don't drag. You're aiming for damp, not dry — the next step works exclusively on damp skin. If your skin goes fully dry between cleansing and moisturising, the moisturiser sits on top instead of soaking in.",
    tip: "Damp skin absorbs roughly four times more hydration than dry skin. The whole routine hinges on this 15 seconds.",
    img: "https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=1200&q=80&auto=format&fit=crop",
    fig: "Fig. 03 · Step two",
    time: "0:30 → 0:45",
    tools: "Cotton flannel",
  },
  {
    n: "03",
    eb: "Step three · 30 seconds",
    h: "A pea of <em>gel-cream,</em> pressed in.",
    body: "Warm a pea-sized amount between your fingertips. Press — don't rub — across the cheekbones, forehead, jaw, and only then the t-zone. The order matters: oily skin needs the least product where it produces the most oil. Rubbing creates heat, which liquefies the moisturiser and helps it slide into your t-zone, which is exactly what you don't want.",
    tip: "If you can see the moisturiser on your skin after 30 seconds, you used too much. Half the amount, next time.",
    img: "https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?w=1200&q=80&auto=format&fit=crop",
    fig: "Fig. 04 · Step three",
    time: "0:45 → 1:15",
    tools: "Gel-cream",
  },
  {
    n: "04",
    eb: "Step four · 15 seconds",
    h: "A lightweight SPF, in <em>two passes.</em>",
    body: "Daytime only. A scant half-teaspoon, applied in two thin layers — not one thick one. Wait sixty seconds between layers. The two-pass technique gives you full UV protection without the white cast or the slip that makes makeup pill. Reapply at noon if you're in daylight.",
    tip: "Mineral SPFs feel heaviest on oily skin. A modern hybrid (organic + mineral) is almost always the right answer here.",
    img: "https://images.unsplash.com/photo-1556228578-8c89e6adf883?w=1200&q=80&auto=format&fit=crop",
    fig: "Fig. 05 · Step four",
    time: "1:15 → 1:30",
    tools: "Lightweight SPF",
  },
];

const HT_VERDICT = {
  h: "How to know it's working.",
  body: "Three checks, run on day fourteen — never sooner. Skin takes a fortnight to respond to any change in routine, and judging it earlier than that is the single most common reason people give up on a routine that was about to start working.",
  list: [
    { ok: true,  t: "At 3pm, your t-zone is matte or only faintly shiny — not slick." },
    { ok: true,  t: "Foundation or SPF stays put through one work meeting without pilling." },
    { ok: true,  t: "Your skin doesn't tighten or feel \"stripped\" thirty seconds after cleansing." },
    { ok: false, t: "If you're still slick by lunch, halve the moisturiser before changing it." },
    { ok: false, t: "If your skin tightens after cleansing, the cleanser is too strong — replace before anything else." },
  ],
};

const HT_TROUBLE = [
  { q: "I followed all four steps and I'm still shiny by lunch.", a: "Halve the moisturiser before you change brands. Most oily skin uses about twice as much as it needs. If you're already using a pea, switch to a lighter format — gel instead of gel-cream — for two weeks before assuming the routine is wrong." },
  { q: "Should I skip moisturiser if my skin is very oily?", a: "No. Skipping it is the most common mistake we see. Skin that doesn't get moisturised produces more oil to compensate, which is why the slickest faces are often the ones using the least product. Use a lighter format, not no format." },
  { q: "What about a niacinamide serum — where does it fit?", a: "Between step two and step three, on damp skin. Two drops, pressed in, left for thirty seconds. Add it once you've done the four-step routine for two weeks without it; it's the next move, not the first one." },
  { q: "Can I use a foaming cleanser instead?", a: "Occasionally — say, after a sweaty workout. As a daily cleanser, foaming formulas tend to over-strip oily skin and trigger the rebound shine the routine is designed to prevent. Default to a low-pH gel; reach for foam by exception." },
  { q: "How often should I exfoliate?", a: "Twice a week, in the evening, with a leave-on BHA — never on the same night as a retinoid. Physical scrubs are not appropriate for oily skin: the friction triggers more oil, not less." },
];

const HT_SIMILAR = [
  { kick: "Ingredients", t: "Niacinamide for oily skin — what 30 days actually does", time: "6 min", date: "Apr 18", img: "https://images.unsplash.com/photo-1571875257727-256c39da42af?w=1200&q=80&auto=format&fit=crop" },
  { kick: "SPF",         t: "SPF for oily skin — four formats that actually work",     time: "5 min", date: "Apr 09", img: "https://images.unsplash.com/photo-1556228578-8c89e6adf883?w=1200&q=80&auto=format&fit=crop" },
  { kick: "Diagnostic",  t: "The 3pm shine test — and what it tells you",              time: "3 min", date: "Apr 02", img: "https://images.unsplash.com/photo-1601049541289-9b1b7bbbfe19?w=1200&q=80&auto=format&fit=crop" },
];

/* =========================================================
   Components
   ========================================================= */

function HtMast() {
  return (
    <div className="ht-mast">
      <div className="ht-mast-l">How To: Beauty Edition</div>
      <div className="ht-mast-c">A Skin How-To · Vol. IV</div>
      <div className="ht-mast-r">No. 247 in the oily skin library</div>
    </div>
  );
}

function HtHero() {
  return (
    <header className="ht-hero" data-screen-label="How-To Hero">
      <div>
        <div className="ht-kicker">
          <span className="bar" />
          <span>{HT.kicker}</span>
        </div>
        <h1 className="ht-h1" dangerouslySetInnerHTML={{ __html: HT.h1 }} />
        <p className="ht-deck">{HT.deck}</p>
        <div className="ht-byline">
          <span className="by">
            <span className="by-avatar"><img src="assets/nelly.png" alt="" /></span>
            <span>Edited by <span className="by-name">Nelly</span></span>
          </span>
          <span className="dot" />
          <span>Words by Iris</span>
          <span className="dot" />
          <span>{HT.date}</span>
          <span className="dot" />
          <span>{HT.read}</span>
        </div>
      </div>
      <div className="ht-hero-media">
        <img src={HT.hero} alt="" />
        <span className="ht-hero-tag">{HT.heroTag}</span>
      </div>
    </header>
  );
}

function HtStrip() {
  return (
    <div className="ht-strip">
      <div className="ht-strip-cell">
        <div className="ht-strip-eb">Difficulty</div>
        <div className="ht-strip-v"><b>{HT.difficulty}</b></div>
      </div>
      <div className="ht-strip-cell">
        <div className="ht-strip-eb">Total time</div>
        <div className="ht-strip-v"><b>{HT.time}</b></div>
      </div>
      <div className="ht-strip-cell">
        <div className="ht-strip-eb">Cadence</div>
        <div className="ht-strip-v">{HT.twice}</div>
      </div>
      <div className="ht-strip-cell">
        <div className="ht-strip-eb">Cost to add</div>
        <div className="ht-strip-v">{HT.cost}</div>
      </div>
    </div>
  );
}

function HtBody() {
  return (
    <div className="ht-body">
      <article>
        {/* Lede */}
        <p className="ht-lede has-drop">
          <span className="ht-drop">O</span>
          ily skin gets bad advice on a loop: skip the moisturiser, use a stronger cleanser, blot more often. All three make it worse. The truth is quieter — oily skin needs <em>less</em> of more careful work, applied to <em>damp</em> skin, in a specific order, with restraint. Do that, and the 3pm slick stops being something you manage.
        </p>
        <p className="ht-lede">
          Below is the routine we recommend to anyone whose skin produces more oil than the rest of their face deserves. It takes ninety seconds. We'd prefer you took two minutes, but ninety is enough.
        </p>

        {/* Section II — the four steps */}
        <div className="ht-sh">
          <span className="ht-sh-num">II.</span>
          <div>
            <div className="ht-sh-eb">The Routine · Four steps</div>
            <h2>Ninety seconds, <em>twice a day.</em></h2>
          </div>
        </div>

        <div className="ht-steps">
          {HT_STEPS.map((s, i) => (
            <article key={i} className={`ht-step ${i % 2 === 1 ? "flip" : ""}`}>
              <div className="ht-step-media">
                <img src={s.img} alt="" />
                <span className="ht-step-fig">{s.fig}</span>
              </div>
              <div>
                <div className="ht-step-num">{s.n}</div>
                <div className="ht-step-eb">{s.eb}</div>
                <h3 dangerouslySetInnerHTML={{ __html: s.h }} />
                <p className="ht-step-body">{s.body}</p>
                <div className="ht-step-tip">
                  <span className="lbl">Tip</span>
                  <span>{s.tip}</span>
                </div>
                <div className="ht-step-foot">
                  <span>{s.time}</span>
                  <span>· {s.tools}</span>
                </div>
              </div>
            </article>
          ))}
        </div>

        {/* Pull */}
        <div className="ht-pull">
          Oily skin needs the least product where it produces the most oil.
        </div>

        {/* Section III — verdict */}
        <div className="ht-sh">
          <span className="ht-sh-num">III.</span>
          <div>
            <div className="ht-sh-eb">The 3pm test · Day fourteen</div>
            <h2>How to know it's <em>working.</em></h2>
          </div>
        </div>
        <div className="ht-verdict">
          <div>
            <div className="ht-verdict-eb">Verdict checklist</div>
            <h3>{HT_VERDICT.h}</h3>
            <p className="ht-verdict-body">{HT_VERDICT.body}</p>
          </div>
          <ul className="ht-verdict-list">
            {HT_VERDICT.list.map((v, i) => (
              <li key={i}>
                <span className={`check ${v.ok ? "" : "x"}`}>{v.ok ? "✓" : "—"}</span>
                <span>{v.t}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Section IV — troubleshooting */}
        <div className="ht-sh">
          <span className="ht-sh-num">IV.</span>
          <div>
            <div className="ht-sh-eb">Troubleshooting · Five common questions</div>
            <h2>If something <em>isn't</em> working.</h2>
          </div>
        </div>
        <div className="ht-trouble">
          {HT_TROUBLE.map((t, i) => (
            <details key={i} open={i === 0}>
              <summary>
                <span className="q-n">Q.{String(i + 1).padStart(2, "0")}</span>
                <span className="q-t">{t.q}</span>
                <span className="q-mark" aria-hidden>+</span>
              </summary>
              <p className="q-a">{t.a}</p>
            </details>
          ))}
        </div>

        {/* End */}
        <div className="ht-end">
          <span className="ht-end-mark">¶</span>
          <span className="ht-end-name">Filed by Iris · Edited by Nelly · 24 April</span>
          <span className="ht-end-meta">No. 247 · Oily / Moisturising</span>
        </div>
      </article>

      {/* Sidebar */}
      <aside className="ht-side">
        <div className="ht-card thin">
          <div className="ht-card-eb">In this how-to</div>
          <div className="ht-toc">
            {HT_TOC.map((t, i) => (
              <a key={i} href="#" className="ht-toc-item">
                <span>{t.t}</span>
                <span className="num">{t.n}</span>
              </a>
            ))}
          </div>
        </div>

        <div className="ht-card">
          <div className="ht-card-eb">What you'll need</div>
          <h4 className="ht-card-h">Five things, most of which you already own.</h4>
          <ul className="ht-list">
            {HT_TOOLS.map((t, i) => (
              <li key={i}>
                <span className="num">{t.n}</span>
                <span>{t.t}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="ht-card">
          <div className="ht-card-eb">Ingredient glossary</div>
          <h4 className="ht-card-h">Four names worth knowing.</h4>
          <ul className="ht-list">
            {HT_INGREDIENTS.map((g, i) => (
              <li key={i}>
                <span className="num">·</span>
                <span className="ht-ingredient"><b>{g.name}.</b> {g.note}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="ht-card thin">
          <div className="ht-card-eb">From the editor</div>
          <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 14.5, lineHeight: 1.45, color: "var(--ink-2)", margin: 0 }}>
            "If you can only do one thing from this list, do step two. The damp-skin minute is where everything else earns its keep."
            <br /><br />
            — Nelly
          </p>
        </div>
      </aside>
    </div>
  );
}

function HtSimilar() {
  return (
    <section className="ht-similar">
      <div className="ht-similar-head">
        <div>
          <div className="ht-similar-eb">Similar how-to's · From this library</div>
          <h2 className="ht-similar-h">Three you might <em>read next.</em></h2>
        </div>
        <a className="ht-similar-back" href="/en/skin/skin-type/oily/">
          Back to oily skin index <span aria-hidden>→</span>
        </a>
      </div>
      <div className="ht-similar-grid">
        {HT_SIMILAR.map((p, i) => (
          <a key={i} className="ht-similar-card" href="#">
            <div className="ht-similar-img">
              <img src={p.img} alt="" />
              <span className="ht-similar-kick">{p.kick}</span>
            </div>
            <h4>{p.t}</h4>
            <div className="ht-similar-meta">{p.date} · {p.time} read</div>
          </a>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { HtMast, HtHero, HtStrip, HtBody, HtSimilar });