// Root App — split into two audience tabs (For Pets / For Sitters)
const { motion: mA } = window;

const AudienceTabs = ({ value, onChange }) => {
  const tabs = [
    { id: "pets", label: "For Pets", sub: "Find a sitter or hotel" },
    { id: "sitters", label: "For Sitters", sub: "Run your business" },
  ];
  return (
    <div className="max-w-7xl mx-auto px-5 sm:px-8 lg:px-12 pt-6 flex justify-center sm:justify-start">
      <div role="tablist" className="inline-flex p-1 bg-white border border-line rounded-full shadow-soft">
        {tabs.map((t) => {
          const active = value === t.id;
          return (
            <button
              key={t.id}
              role="tab"
              aria-selected={active}
              onClick={() => onChange(t.id)}
              className={`relative px-5 sm:px-6 py-2.5 rounded-full text-[13.5px] font-medium transition-colors ${
                active ? "text-cream" : "text-ink/70 hover:text-forest"
              }`}
            >
              {active && (
                <mA.span
                  key="pill"
                  layoutId="audience-tab-pill"
                  className="absolute inset-0 bg-forest rounded-full"
                  transition={{ type: "spring", stiffness: 360, damping: 30 }}
                />
              )}
              <span key="label" className="relative flex flex-col items-start leading-tight whitespace-nowrap">
                <span>{t.label}</span>
                <span className={`text-[10.5px] font-normal whitespace-nowrap ${active ? "text-cream/70" : "text-inkSoft"}`}>
                  {t.sub}
                </span>
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
};

const App = () => {
  const [audience, setAudience] = React.useState("pets");
  return (
    <div className="min-h-screen relative">
      <Header audience={audience} />
      <AudienceTabs value={audience} onChange={setAudience} />
      <main>
        <Hero audience={audience} />

        {audience === "pets" ? (
          <>
            <HowItWorks />
            <DemoForPets />
            <ServiceTypes />
            <TrustAndSafety />
            <OwnerTestimonials />
          </>
        ) : (
          <>
            <FeatureGrid />
            <DemoForSitters />
            <OperationsControl />
          </>
        )}
        <ContactForm audience={audience} />
      </main>
      <Footer />
    </div>
  );
};

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