// Landing (SD-0001 §5.1) — a Visitor learns what ecomm is and picks a door. Honest voice,
// no trial/pricing/fee (corpus 14.01.0011). Both doors open the same sign-in flow (§5.2);
// they differ only in framing. Visuals per the ui/designs export (hf-landing, Direction A).
import { Eyebrow, Footer, PrimaryButton, Screen, TopBar, Wordmark } from "../ui/kit";

interface Props {
  onGetStarted: () => void;
  onLogIn: () => void;
}

const PROMISES: Array<[string, string]> = [
  ["No trial clock", "Your storefront never expires or locks."],
  ["No plan wall", "We take only what it takes to run."],
  ["Your data, yours", "Nothing collected you didn't agree to give."],
];

export default function Landing({ onGetStarted, onLogIn }: Props) {
  return (
    <Screen horizon>
      <TopBar
        left={<Wordmark />}
        right={
          <button type="button" className="lk lk--nav" onClick={onLogIn}>
            Log in
          </button>
        }
      />
      <main className="screen__main">
        <div className="hero">
          <Eyebrow>One storefront, fully yours</Eyebrow>
          <h1>
            Sell online,
            <br />
            <em>honestly.</em>
          </h1>
          <p className="hero__lead">
            Claim the one storefront that's yours on a platform that takes only what it takes
            to run — no trial countdown, no plan wall, no data you didn't agree to give.
          </p>
          <div className="hero__actions">
            <PrimaryButton type="button" onClick={onGetStarted}>
              Create your storefront →
            </PrimaryButton>
            <button type="button" className="lk lk--mute" onClick={onLogIn}>
              Already selling with us? <span style={{ color: "var(--wv-lilac)" }}>Log in</span>
            </button>
          </div>
          <div className="promises">
            {PROMISES.map(([title, copy]) => (
              <div key={title}>
                <div className="promises__title">{title}</div>
                <p>{copy}</p>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </Screen>
  );
}