/* field UI kit, content sections: How it works · Programs · Manifesto · Closing */

function HowItWorks() {
  const steps = [
    { no: "01", icon: Icons.clipboard, t: "Intake", b: "A few quiet questions about your goals, history, and how you want to feel. Ten minutes, fully private." },
    { no: "02", icon: Icons.stethoscope, t: "Provider review", b: "A licensed physician in our network reviews your intake and designs a protocol, or tells you it isn't right for you." },
    { no: "03", icon: Icons.package, t: "Pharmacy fulfillment", b: "If prescribed, a certified compounding pharmacy prepares and ships your protocol to your door." },
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">How it works</span>
          <h2 className="section__title">Three steps, no clinic.</h2>
          <hr className="gold-rule" />
        </div>
        <div className="steps">
          {steps.map((s) => (
            <div className="step" key={s.no}>
              <div className="step__no">{s.no}</div>
              <div className="step__icon"><Icon d={s.icon} size={34} sw={1.4} /></div>
              <h3 className="step__title">{s.t}</h3>
              <p className="step__body">{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Programs({ onConsult }) {
  const items = [
    { tag: "Repair and renewal", icon: Icons.leaf, name: "Regenerative", desc: "Peptide protocols that support the body's repair and renewal, so you recover faster and feel restored." },
    { tag: "Lean mass and capacity", icon: Icons.dumbbell, name: "Strength", desc: "For lean muscle, training capacity, and the strength to move through life fully." },
    { tag: "Resilience", icon: Icons.shield, name: "Immune", desc: "Foundational support for resilience, so you bounce back and stay well." },
    { tag: "Glow and radiance", icon: Icons.sparkle, name: "Beauty", desc: "Skin, hair, and the radiance that comes from feeling good in your body." },
    { tag: "Metabolic reset", icon: Icons.flame, name: "Reset", desc: "A physician-guided metabolic reset to feel lighter, more energetic, more yourself." },
  ];
  return (
    <section className="section" id="programs" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">Programs</span>
          <h2 className="section__title">Protocols for how you actually live.</h2>
          <p className="section__lead">Five directions, each physician-designed. Begin with a consult, your provider recommends the right one for you.</p>
        </div>
        <div className="programs">
          {items.map((p) => (
            <article className="program" key={p.name} onClick={onConsult}>
              <span className="program__eyebrow">{p.tag}</span>
              <h3 className="program__name">{p.name}</h3>
              <p className="program__desc">{p.desc}</p>
              <div className="program__foot">start consult <Icon d={Icons.arrowRight} size={15} sw={1.6} /></div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <section className="section manifesto" id="about">
      <div className="wrap">
        <span className="eyebrow" style={{ display: "block", marginBottom: 28 }}>Why we are field</span>
        <p className="manifesto__quote">
          Your health was never one thing. What you eat, how you sleep, how you move, the water you drink, the people around you,
          your mind, your sense of purpose: all of it sits in one <em>field</em> of awareness. Tend the whole field, and you live with vitality.
        </p>
        <div className="three">
          <div className="three__col">
            <span className="three__k">What you take in</span>
            <p className="three__v">Food, sleep, movement, the water you drink. The daily inputs your body is built from, chosen with intention.</p>
          </div>
          <div className="three__col">
            <span className="three__k">Beyond the physical</span>
            <p className="three__v">Your community, your mental health, your sense of purpose. Whole health was never only about the body.</p>
          </div>
          <div className="three__col">
            <span className="three__k">Live with vitality</span>
            <p className="three__v">Everything you do is your field of awareness for health. Tend all of it, and vitality follows. That is why we are field.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Closing({ onConsult }) {
  return (
    <section className="closing">
      <div className="wrap">
        <img className="closing__mark" src="/assets/field-wordmark-cream.svg" alt="field" />
        <p className="closing__line">feel the difference.</p>
        <button className="btn btn--on-dark" onClick={onConsult}>start consult</button>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, Programs, Manifesto, Closing });