/* eslint-disable */
/* Skincoach marketing landing — sections built on design tokens,
   phone mockups reused from appstore-phone.jsx. */

const { Phone, PHONE_W, PHONE_H, ScreenHero, ScreenScan, ScreenRoutine, ScreenChat, ScreenProgress } = window;

const PORTRAIT = "assets/portrait.png";
const APP_STORE_URL = "#"; /* App Store link pending — app not yet published */
const SUPPORT_EMAIL = "support@skincoach.ink";

/* ---------------------------------- Lucide-style icons ---------------------------------- */
const I = {
  scanFace: <><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></>,
  clipboard: <><rect width="8" height="4" x="8" y="2" rx="1"/><path d="M12 11h4M12 16h4M8 11h.01M8 16h.01"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></>,
  chat: <><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></>,
  history: <><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></>,
  scanLine: <><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" y1="12" x2="17" y2="12"/></>,
  sparkles: <><path d="M9.94 14.34A2 2 0 0 0 8.66 13L3 11.5l5.66-1.5a2 2 0 0 0 1.28-1.34L12 3l1.06 5.66A2 2 0 0 0 14.34 10L20 11.5l-5.66 1.5a2 2 0 0 0-1.28 1.34L12 20z"/><path d="M19 3v4M21 5h-4"/></>,
  calendarCheck: <><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/><path d="m9 16 2 2 4-4"/></>,
  chart: <><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m7 14 3-3 3 3 4-5"/></>,
  shield: <><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></>,
  chevron: <><path d="m6 9 6 6 6-6"/></>,
  arrowLeft: <><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></>,
  mail: <><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></>,
  book: <><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></>,
  trash: <><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></>,
};

function Icon({ name, size = 22, stroke = 2 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
      {I[name]}
    </svg>
  );
}

function AppleLogo({ size = 22, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
      <path d="M17.6 12.2c0-2.5 2.1-3.7 2.2-3.8a4.8 4.8 0 0 0-3.7-2c-1.6-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9a5 5 0 0 0-4.2 2.6c-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 2 2.6 3.4 2.6 1.3 0 1.8-.9 3.5-.9 1.6 0 2.1.9 3.5.8 1.4 0 2.4-1.2 3.3-2.5a11 11 0 0 0 1.5-3c-3.6-1.4-2.7-5.9-1.7-4Zm-2.6-7c.7-.9 1.2-2 1-3.2-1 0-2.3.7-3 1.5-.6.7-1.2 1.9-1 3 1.2.1 2.3-.6 3-1.3Z"/>
    </svg>
  );
}

/* ---------------------------------- App Store badge ---------------------------------- */
function AppStoreBadge({ light = false }) {
  return (
    <a className="appstore-badge" href={APP_STORE_URL} aria-label="Download on the App Store">
      <AppleLogo size={26} color={light ? "var(--sc-primary-text)" : "#fff"} />
      <span className="as-label">
        <span className="as-small">Download on the</span><br/>
        <span className="as-big">App Store</span>
      </span>
    </a>
  );
}

/* ---------------------------------- Scaled phone ---------------------------------- */
function ScaledPhone({ scale, dark = false, children }) {
  return (
    <div className="phone-scale" style={{ width: PHONE_W * scale, height: PHONE_H * scale }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: "top left" }}>
        <Phone dark={dark}>{children}</Phone>
      </div>
    </div>
  );
}

/* ---------------------------------- Header ---------------------------------- */
function Header() {
  return (
    <header className="site-header">
      <div className="wrap">
        <a className="brand" href="index.html">
          <span className="mark"><img src="assets/skincoach-app-icon.svg" alt="Skincoach"/></span>
          Skincoach
        </a>
        <nav className="nav-links">
          <a href="#how">How it works</a>
          <a href="#features">Features</a>
          <a href="#screens">Screens</a>
          <a href="Support.html">Support</a>
        </nav>
        <div className="header-cta"><AppStoreBadge/></div>
      </div>
    </header>
  );
}

/* ---------------------------------- Hero ---------------------------------- */
function Hero() {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-copy">
          <div className="eyebrow">Your personal skin coach</div>
          <h1>Understand your skin. <span className="accent">Build a routine that works.</span></h1>
          <p className="hero-sub">
            Skincoach is your smart, always-there skincare coach. A quick face scan, a personalized
            plan, and answers whenever you need them — calm, clear, and built around you.
          </p>
          <div className="hero-actions">
            <AppStoreBadge/>
            <a className="btn btn-secondary" href="#how">See how it works</a>
          </div>
          <div className="hero-trust">
            <span className="dot"></span>
            Private by design — your scan photos stay yours.
          </div>
        </div>
        <div className="hero-phone">
          <ScaledPhone scale={0.44}><ScreenHero portraitUrl={PORTRAIT}/></ScaledPhone>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------- How it works ---------------------------------- */
const STEPS = [
  { n: 1, icon: "scanLine", t: "Take a face scan", d: "A 30-second selfie lets Skincoach read your skin in real time — hydration, texture, redness and more." },
  { n: 2, icon: "sparkles", t: "Get your skin profile", d: "See your skin score and focus areas, distilled into a profile you can actually understand." },
  { n: 3, icon: "calendarCheck", t: "Follow your plan", d: "A personalized morning, evening and weekly routine — one clear step at a time." },
  { n: 4, icon: "chart", t: "Track your progress", d: "Re-scan as you go and watch hydration, redness and texture improve week over week." },
];

function HowItWorks() {
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="section-head">
          <div className="section-kicker">How it works</div>
          <h2>From scan to routine in minutes</h2>
          <p>No guesswork, no endless product reviews. Four simple steps to a routine that fits your skin.</p>
        </div>
        <div className="steps">
          {STEPS.map((s) => (
            <div className="step" key={s.n}>
              <span className="ico"><Icon name={s.icon} size={24}/></span>
              <span className="step-num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------- Features ---------------------------------- */
const FEATURES = [
  { icon: "scanFace", t: "Skin scan", d: "Analyze your skin from a quick selfie and turn it into a clear skin score with focus areas." },
  { icon: "clipboard", t: "Daily routine", d: "Morning, evening and weekly steps tailored to your scan — with gentle reminders to keep you on track." },
  { icon: "chat", t: "Coach chat", d: "Ask anything about products, ingredients or habits and get answers grounded in your own routine and results." },
  { icon: "history", t: "Progress history", d: "Compare scans over time and see how your skin responds, week after week." },
];

function Features() {
  return (
    <section className="section section-alt" id="features">
      <div className="wrap">
        <div className="section-head">
          <div className="section-kicker">Features</div>
          <h2>Everything your skin needs, in one place</h2>
          <p>A calm, focused app that does the thinking, so you can just follow the plan.</p>
        </div>
        <div className="features">
          {FEATURES.map((f) => (
            <div className="feature" key={f.t}>
              <div className="ficon"><Icon name={f.icon} size={26}/></div>
              <div>
                <h3>{f.t}</h3>
                <p>{f.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------- Screens gallery ---------------------------------- */
const SHOTS = [
  { cap: "Scan", el: <ScreenScan portraitUrl={PORTRAIT}/> },
  { cap: "Routine", el: <ScreenRoutine/> },
  { cap: "Coach chat", el: <ScreenChat/> },
  { cap: "Progress", el: <ScreenProgress portraitUrl={PORTRAIT}/> },
];

function Screens() {
  return (
    <section className="section" id="screens">
      <div className="wrap">
        <div className="section-head">
          <div className="section-kicker">A look inside</div>
          <h2>Designed to feel calm, not clinical</h2>
          <p>Every screen is built to be clear at a glance — so your routine never feels like a chore.</p>
        </div>
      </div>
      <div className="wrap">
        <div className="shots-scroll">
          {SHOTS.map((s) => (
            <div className="shot" key={s.cap}>
              <ScaledPhone scale={0.34}>{s.el}</ScaledPhone>
              <div className="shot-cap">{s.cap}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------- CTA band ---------------------------------- */
function CtaBand() {
  return (
    <section className="section section-alt">
      <div className="wrap">
        <div className="cta-band">
          <h2>Your skin, finally understood.</h2>
          <p>Download Skincoach and start your personalized routine today.</p>
          <div className="badge-row"><AppStoreBadge light/></div>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------- Safety strip ---------------------------------- */
function Safety() {
  return (
    <section className="safety">
      <div className="wrap">
        <span className="s-ico"><Icon name="shield" size={22}/></span>
        <p>
          Skincoach supports your everyday skincare habits. It does not diagnose, treat or prevent any
          medical condition. For persistent skin concerns, please consult a qualified dermatologist.
        </p>
      </div>
    </section>
  );
}

/* ---------------------------------- Footer ---------------------------------- */
function Footer() {
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <a className="brand" href="index.html">
              <span className="mark"><img src="assets/skincoach-app-icon.svg" alt="Skincoach"/></span>
              Skincoach
            </a>
            <p>Your smart, always-there skincare coach. Built around your scan.</p>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <h4>Product</h4>
              <a href="#how">How it works</a>
              <a href="#features">Features</a>
              <a href="#screens">Screens</a>
            </div>
            <div className="footer-col">
              <h4>Legal</h4>
              <a href="privacy.html">Privacy Policy</a>
              <a href="terms.html">Terms of Use</a>
            </div>
            <div className="footer-col">
              <h4>Support</h4>
              <a href="Support.html">Help &amp; contact</a>
              <a href={"mailto:" + SUPPORT_EMAIL}>{SUPPORT_EMAIL}</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Skincoach. All rights reserved.</span>
          <span>Made for healthy skin habits.</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------------------------- App ---------------------------------- */
function App() {
  return (
    <>
      <Header/>
      <main>
        <Hero/>
        <HowItWorks/>
        <Features/>
        <Screens/>
        <CtaBand/>
      </main>
      <Safety/>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);