/* ===== Sign in ===== */
const SignIn = ({ onContinue }) => {
  return (
    <div className="signin">
      <div className="signin__left">
        <div className="signin__brand">
          <BlossomMark size={36} color="#3D4421" accent="#D97757" />
          <span>Novale</span>
        </div>
        <div className="signin__hero">
          <div className="eyebrow"><span className="eyebrow__dot" />Landscape design, homeowner-priced</div>
          <h1 className="serif" style={{ fontSize: 72, lineHeight: 1.02, letterSpacing: '-0.028em', marginTop: 16 }}>
            Your yard,<br/>thoughtfully planned.
          </h1>
          <p style={{ fontSize: 18, color: 'var(--fg-secondary)', marginTop: 20, maxWidth: 480, lineHeight: 1.55 }}>
            A professional-grade landscape plan designed around your lot, climate, and taste — then a shopping list that arrives at your door.
          </p>
          <div className="signin__meta">
            <div className="signin__meta-item"><Icon name="sprout" size={16} /><span>Tailored to your USDA zone</span></div>
            <div className="signin__meta-item"><Icon name="ruler" size={16} /><span>Scaled plans & material lists</span></div>
            <div className="signin__meta-item"><Icon name="truck" size={16} /><span>Plants delivered when you're ready</span></div>
          </div>
        </div>
        <div className="signin__footer muted">© Novale 2026 · Snoqualmie, WA</div>
      </div>

      <div className="signin__right">
        <div className="signin__card">
          <h3 style={{ fontSize: 22, fontWeight: 500 }}>Welcome back</h3>
          <p className="muted" style={{ fontSize: 14, marginTop: 6 }}>Sign in to pick up your backyard design.</p>

          <div className="stack-3" style={{ marginTop: 28 }}>
            <label className="signin__field">
              <span>Email</span>
              <input className="input" defaultValue="emily@example.com" />
            </label>
            <label className="signin__field">
              <span>Password</span>
              <input className="input" type="password" defaultValue="••••••••••" />
            </label>
          </div>

          <button className="btn btn--primary btn--lg" style={{ width: '100%', marginTop: 20 }} onClick={onContinue}>
            Sign in
            <Icon name="arrow-right" size={16} />
          </button>

          <div className="signin__divider"><span>or</span></div>

          <div className="stack-2">
            <button className="btn btn--ghost" style={{ width: '100%' }}>
              <Icon name="globe" size={16} /> Continue with Google
            </button>
            <button className="btn btn--ghost" style={{ width: '100%' }}>
              <Icon name="apple" size={16} /> Continue with Apple
            </button>
          </div>

          <p className="muted" style={{ fontSize: 12, marginTop: 24, textAlign: 'center' }}>
            New to Novale? <a href="#" style={{ color: 'var(--foliage-700)', fontWeight: 500, borderBottom: '1px solid currentColor' }}>Create an account</a>
          </p>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SignIn });