import type { LoaderFunctionArgs, MetaFunction } from "react-router";
import { redirect } from "react-router";
import styles from "./styles.module.css";

export const meta: MetaFunction = () => [
  { title: "Datewise: Delivery & Pickup scheduling for Shopify" },
  { name: "description", content: "Let customers choose store pickup, local delivery or shipping, then a date and time, right in the Shopify cart." },
];

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  if (url.searchParams.get("shop")) throw redirect(`/app?${url.searchParams.toString()}`);
  // App Store requirement 2.3.1: never ask merchants to type their shop domain.
  // Installs start from the Shopify App Store; this is a public landing page only.
  return null;
};

const CONTACT = "info@metatroncubesolutions.com";

export default function Landing() {
  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <img src="/datewise-logo.png" alt="Datewise" className={styles.logo} width={180} height={39} />
      </header>
      <main className={styles.main}>
        <section className={styles.copy}>
          <h1 className={styles.h1}>Let customers choose when their order arrives.</h1>
          <p className={styles.lead}>
            Datewise adds a delivery and pickup scheduler to your Shopify cart. Customers pick store pickup, local delivery or
            shipping, then a date and time. You set the hours, cutoffs, capacity and fees.
          </p>
          <ul className={styles.points}>
            <li>
              <strong>Every slot has a limit.</strong> A chosen time is held while the customer checks out, so two customers
              can't take the last place.
            </li>
            <li>
              <strong>Ready for rush days.</strong> Festivals and holidays get their own limits, earlier cutoffs and a waitlist.
            </li>
            <li>
              <strong>Checked at checkout, on every plan.</strong> Orders need a valid time, including Buy it now and express
              checkouts.
            </li>
            <li>
              <strong>Fewer “can I change my time?” emails.</strong> Customers reschedule from their order page, and get
              reminders by email, SMS or WhatsApp.
            </li>
          </ul>
          <p className={styles.install}>Install Datewise from the Shopify App Store.</p>
        </section>
        <figure className={styles.preview}>
          <img src="/datewise-widget.png" alt="The Datewise scheduler in a Shopify cart: delivery method, calendar, time slots and the held booking" width={488} height={884} />
        </figure>
      </main>
      <footer className={styles.footer}>
        <a href="/privacy">Privacy policy</a>
        <a href="/terms">Terms of service</a>
        <a href={`mailto:${CONTACT}`}>{CONTACT}</a>
        <span>© Metatroncube Software Solutions</span>
      </footer>
    </div>
  );
}