// Study Plus — apps hub page
// RTL · Retro-Metro design system

const { useState } = React;

const CONFIG = {
  layout: "grid",
  showComingSoon: true,
  heroAccent: "green",
};

const APPS = [
  {
    id: "tivuch-plus",
    name: "תיווך פלוס",
    tagline: "למתווכי נדל\"ן",
    desc: "מנהלים נכסים, לקוחות ועסקאות במקום אחד — בלי דף אקסל ובלי לזכור מי התקשר מתי.",
    domain: "nadlan.studyplus.co.il",
    href: "https://nadlan.studyplus.co.il",
    logo: "assets/logos/tivuch-plus.png",
    bgColor: "#386636",
    accentTile: "#E8F0D8",
    status: "live",
  },
  {
    id: "pension-plus",
    name: "ביטוח פנסיוני פלוס",
    tagline: "לסוכני ביטוח פנסיוני",
    desc: "לקוחות, פוליסות והשוואות — במקום אחד, עם ההיגיון שהלקוח מצפה לו.",
    domain: "pension.studyplus.co.il",
    href: "https://pension.studyplus.co.il",
    logo: "assets/logos/pension-plus.png",
    bgColor: "#0144F8",
    accentTile: "#D8E8E0",
    status: "live",
  },
];

const COMING = Array.from({ length: 12 }, (_, i) => ({ id: `soon-${i + 1}`, n: i + 1 }));

function Navbar() {
  return (
    <nav style={ssNav.bar}>
      <div className="ss-nav" style={ssNav.container}>
        <div style={ssNav.left}>
          <div className="ss-nav-logo" style={ssNav.logo}><img src="assets/logos/study-plus-brand.png" alt="למידה פלוס" style={ssNav.logoImg} /></div>
          <div style={ssNav.brandWrap}>
            <div className="ss-nav-brand" style={ssNav.brand}>למידה פלוס</div>
          </div>
        </div>
        <div style={ssNav.right}>
          <a href="#apps" className="ss-nav-link" style={ssNav.navLink}>האפליקציות</a>
          <a href="#about" className="ss-nav-link" style={ssNav.navLink}>אודות</a>
          <a href="#contact" className="ss-nav-link" style={ssNav.navLink}>צור קשר</a>
        </div>
      </div>
    </nav>
  );
}
const ssNav = {
  bar: { background: "#F5F0E8", borderBottom: "3px solid #2A2A2A", position: "sticky", top: 0, zIndex: 50 },
  container: { maxWidth: "72rem", margin: "0 auto", padding: "14px 24px", display: "flex", justifyContent: "space-between", alignItems: "center" },
  left: { display: "flex", alignItems: "center", gap: 12 },
  logo: { width: 44, height: 44, border: "3px solid #2A2A2A", borderRadius: 10, background: "#E5A06B", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", padding: 0 },
  logoImg: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
  brandWrap: { display: "flex", flexDirection: "column", lineHeight: 1.05 },
  brand: { fontWeight: 900, fontSize: 20, color: "#2A2A2A", letterSpacing: "-.01em" },
  right: { display: "flex", gap: 4, alignItems: "center" },
  navLink: { textDecoration: "none", color: "#2A2A2A", fontWeight: 700, fontSize: 14, padding: "8px 14px" },
};

function Hero({ accent }) {
  const accentMap = {
    green:  { bg: "#E8F0D8", glyph: "#3D6B35" },
    yellow: { bg: "#FFF3D0", glyph: "#2A2A2A" },
    peach:  { bg: "#F0E4D7", glyph: "#2A2A2A" },
    mint:   { bg: "#D8E8E0", glyph: "#3D6B35" },
  };
  return (
    <section style={ssHero.section}>
      <div style={ssHero.gridOverlay} aria-hidden="true" />
      <div style={ssHero.inner}>
        <div style={ssHero.appIconRow}>
          <div className="ss-hero-icon" style={{ ...ssHero.appIcon, background: "#E5A06B", padding: 0, overflow: "hidden" }}>
            <img src="assets/logos/study-plus-brand.png" alt="למידה פלוס" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
        </div>
        <span style={ssHero.pill}>שמחים שאתם פה</span>
        <h1 className="ss-hero-h1" style={ssHero.h1}>
          נעים להכיר — אנחנו למידה פלוס.<br />
          <span style={{ color: "#3D6B35" }}>חברת אפליקציות לימוד מישראל.</span>
        </h1>
        <p className="ss-hero-sub" style={ssHero.sub}>
          התחלנו בכלים מקצועיים — לתיווך ולביטוח. עכשיו בונים את הדור הבא של אפליקציות לימוד בעברית. בלי תרגומים מאנגלית, בלי בלבולים.
        </p>
      </div>
    </section>
  );
}
const ssHero = {
  section: { position: "relative", padding: "72px 24px 88px", background: "#F5F0E8", overflow: "hidden", borderBottom: "3px solid #2A2A2A" },
  gridOverlay: { position: "absolute", inset: 0, opacity: 0.07, backgroundImage: "linear-gradient(#2A2A2A 1px, transparent 1px), linear-gradient(90deg, #2A2A2A 1px, transparent 1px)", backgroundSize: "48px 48px", pointerEvents: "none" },
  inner: { position: "relative", maxWidth: "72rem", margin: "0 auto", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 18 },
  appIconRow: { display: "flex", gap: 12 },
  appIcon: { width: 110, height: 110, border: "3px solid #2A2A2A", borderRadius: 28, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900, fontSize: 56, letterSpacing: -3 },
  pill: { display: "inline-flex", background: "#FFF3D0", border: "2px solid #2A2A2A", borderRadius: 6, padding: "6px 16px", fontWeight: 700, fontSize: 13, color: "#2A2A2A", marginTop: 4 },
  h1: { fontWeight: 900, fontSize: 60, lineHeight: 1.05, letterSpacing: "-.02em", margin: 0, color: "#2A2A2A", maxWidth: 800 },
  sub: { fontWeight: 400, fontSize: 19, lineHeight: 1.55, color: "#5A5A5A", margin: 0, maxWidth: 540 },
};

function AppCard({ app, layout }) {
  const [hover, setHover] = useState(false);
  const isList = layout === "list";

  return (
    <a
      href={app.href}
      target="_blank"
      rel="noreferrer"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        ...ssCard.card,
        ...(isList ? ssCard.cardList : ssCard.cardGrid),
        transform: hover ? "translate(-3px, -3px)" : "translate(0,0)",
        boxShadow: hover ? "6px 6px 0 #2A2A2A" : "0 0 0 #2A2A2A",
      }}
    >
      <div style={{ ...ssCard.logoTile, background: app.bgColor, ...(isList ? ssCard.logoTileList : ssCard.logoTileGrid) }}>
        <img src={app.logo} alt={app.name} style={ssCard.logoImg} />
      </div>

      <div style={ssCard.body}>
        <div style={ssCard.titleRow}>
          <h3 className="ss-card-title" style={ssCard.title}>{app.name}</h3>
          <span style={ssCard.statusPill}>פעיל</span>
        </div>
        <div style={ssCard.tagline}>{app.tagline}</div>
        <p style={ssCard.desc}>{app.desc}</p>

        <div style={ssCard.divider} />

        <div style={ssCard.footer}>
          <div style={ssCard.domain}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3D6B35" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flex: "0 0 auto" }}>
              <circle cx="12" cy="12" r="9"/>
              <path d="M3 12h18"/>
              <path d="M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
            </svg>
            <span style={ssCard.domainText}>{app.domain}</span>
          </div>
          <div style={ssCard.cta}>
            לאתר
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
            </svg>
          </div>
        </div>
      </div>
    </a>
  );
}
const ssCard = {
  card: { display: "flex", textDecoration: "none", color: "#2A2A2A", background: "#fff", border: "3px solid #2A2A2A", transition: "transform .18s, box-shadow .18s", cursor: "pointer", overflow: "hidden" },
  cardGrid: { flexDirection: "column", minHeight: 460 },
  cardList: { flexDirection: "row", minHeight: 220 },
  logoTile: { borderBottom: "3px solid #2A2A2A", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
  logoTileGrid: { width: "100%", aspectRatio: "16 / 10", padding: 24 },
  logoTileList: { width: 220, borderBottom: "none", borderLeft: "3px solid #2A2A2A", padding: 24, alignSelf: "stretch" },
  logoImg: { width: "100%", height: "100%", maxWidth: 160, maxHeight: 160, objectFit: "contain", display: "block" },
  body: { padding: "24px 26px 22px", display: "flex", flexDirection: "column", gap: 6, flex: 1 },
  titleRow: { display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" },
  title: { fontWeight: 900, fontSize: 24, color: "#2A2A2A", letterSpacing: "-.01em", margin: 0, lineHeight: 1.15 },
  statusPill: { display: "inline-flex", alignItems: "center", background: "#E8F0D8", border: "2px solid #3D6B35", borderRadius: 6, padding: "2px 10px", fontWeight: 700, fontSize: 11, color: "#3D6B35", letterSpacing: ".02em" },
  tagline: { fontWeight: 700, fontSize: 14, color: "#3D6B35", marginTop: 2 },
  desc: { fontWeight: 400, fontSize: 15, lineHeight: 1.55, color: "#5A5A5A", margin: "8px 0 0" },
  divider: { height: 0, borderTop: "2px dashed #2A2A2A", opacity: .25, margin: "16px 0 0" },
  footer: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, marginTop: 14, flexWrap: "wrap" },
  domain: { display: "flex", alignItems: "center", gap: 6 },
  domainText: { fontWeight: 700, fontSize: 13, color: "#2A2A2A", direction: "ltr" },
  cta: { display: "inline-flex", alignItems: "center", gap: 6, background: "#3D6B35", color: "#fff", border: "3px solid #2A2A2A", padding: "8px 16px", fontWeight: 800, fontSize: 14 },
};

const SOON_PALETTE = ["#E8F0D8", "#FFF3D0", "#F0E4D7", "#D8E8E0"];

function ComingCard({ layout }) {
  const isList = layout === "list";
  return (
    <div style={{
      ...ssComingCard.card,
      ...(isList ? { flexDirection: "row", minHeight: 220 } : { flexDirection: "column", minHeight: 460 }),
    }}>
      <div style={{
        ...ssComingCard.logoTile,
        ...(isList
          ? { width: 220, borderBottom: "none", borderLeft: "3px solid #2A2A2A" }
          : { width: "100%", aspectRatio: "16 / 10", borderBottom: "3px solid #2A2A2A" }),
      }}>
        <div style={ssComingCard.placeholderIcon}>
          <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#2A2A2A" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 5v14"/><path d="M5 12h14"/>
          </svg>
        </div>
      </div>
      <div style={ssComingCard.body}>
        <span style={ssComingCard.pill}>בקרוב</span>
        <h3 style={ssComingCard.title}>אפליקציה חדשה בדרך</h3>
        <p style={ssComingCard.desc}>אנחנו עובדים על אפליקציית הלימוד הבאה. עדכונים יפורסמו כאן.</p>
        <div style={ssComingCard.divider} />
        <div style={ssComingCard.foot}>
          <span style={ssComingCard.footText}>הישארו מעודכנים</span>
          <span style={ssComingCard.dots}>· · ·</span>
        </div>
      </div>
    </div>
  );
}
const ssComingCard = {
  card: { display: "flex", background: "#EDE8DD", border: "3px dashed #2A2A2A", overflow: "hidden" },
  logoTile: { display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, padding: 24, background: "repeating-linear-gradient(45deg, #F5F0E8 0 12px, #EDE8DD 12px 24px)" },
  placeholderIcon: { width: 96, height: 96, border: "3px solid #2A2A2A", borderRadius: 24, background: "#FFF3D0", display: "flex", alignItems: "center", justifyContent: "center" },
  body: { padding: "24px 26px 22px", display: "flex", flexDirection: "column", gap: 6, flex: 1 },
  pill: { alignSelf: "flex-start", display: "inline-flex", background: "#FFF3D0", border: "2px solid #2A2A2A", borderRadius: 6, padding: "3px 12px", fontWeight: 800, fontSize: 11, color: "#2A2A2A", letterSpacing: ".06em" },
  title: { fontWeight: 900, fontSize: 22, color: "#2A2A2A", letterSpacing: "-.01em", margin: "8px 0 0", lineHeight: 1.15 },
  desc: { fontWeight: 400, fontSize: 14, lineHeight: 1.55, color: "#5A5A5A", margin: "6px 0 0", maxWidth: 360 },
  divider: { height: 0, borderTop: "2px dashed #2A2A2A", opacity: .25, margin: "16px 0 0" },
  foot: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14 },
  footText: { fontWeight: 700, fontSize: 13, color: "#5A5A5A" },
  dots: { fontWeight: 900, fontSize: 18, color: "#2A2A2A", letterSpacing: 4 },
};

function ComingTile({ n }) {
  const bg = SOON_PALETTE[(n - 1) % SOON_PALETTE.length];
  return (
    <div style={{ ...ssComing.tile, background: bg }}>
      <div style={ssComing.tileNum}>#{String(n).padStart(2, "0")}</div>
      <div style={ssComing.tileBadge}>בקרוב</div>
    </div>
  );
}
const ssComing = {
  tile: { aspectRatio: "1 / 1", border: "3px solid #2A2A2A", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "14px 14px 12px", position: "relative" },
  tileNum: { fontWeight: 900, fontSize: 22, color: "#2A2A2A", letterSpacing: "-.02em", lineHeight: 1, opacity: .55 },
  tileBadge: { alignSelf: "flex-start", background: "#2A2A2A", color: "#F5F0E8", borderRadius: 6, padding: "3px 10px", fontWeight: 800, fontSize: 11, letterSpacing: ".04em" },
};

function AppsSection({ layout, showComingSoon }) {
  const cols = layout === "grid" ? "repeat(2, 1fr)" : "1fr";
  const featured = COMING.slice(0, 2);
  const rest = COMING.slice(2);
  return (
    <section id="apps" style={ssApps.section}>
      <div style={ssApps.head}>
        <span style={ssApps.kicker}>המשפחה שלנו</span>
        <h2 className="ss-apps-h2" style={ssApps.h2}>הכלים שכבר עובדים — והאפליקציות שבדרך</h2>
        <p className="ss-apps-sub" style={ssApps.sub}>שני כלים פעילים בשטח, ועוד 12 אפליקציות לימוד בדרך — בעברית, פשוטות, מותאמות לישראלים.</p>
      </div>
      <div style={ssApps.container}>
        <div className="ss-grid-2" style={{ ...ssApps.grid, gridTemplateColumns: cols }}>
          {APPS.map((app) => <AppCard key={app.id} app={app} layout={layout} />)}
          {showComingSoon && featured.map((c) => <ComingCard key={c.id} layout={layout} />)}
        </div>

        {showComingSoon && rest.length > 0 && (
          <div className="ss-soon-block" style={ssApps.soonBlock}>
            <div style={ssApps.soonHead}>
              <h3 className="ss-soon-title" style={ssApps.soonTitle}>ועוד {rest.length} אפליקציות לימוד בדרך</h3>
              <p style={ssApps.soonSub}>כל נושא ראוי לאפליקציית לימוד שנבנתה בדיוק עבורו. נעדכן כאן כשייצאו.</p>
            </div>
            <div className="ss-soon-grid" style={ssApps.soonGrid}>
              {rest.map((c) => <ComingTile key={c.id} n={c.n} />)}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}
const ssApps = {
  section: { padding: "72px 0 88px", background: "#F5F0E8" },
  head: { maxWidth: "40rem", margin: "0 auto 48px", padding: "0 24px", textAlign: "center" },
  kicker: { display: "inline-block", background: "#E8F0D8", border: "2px solid #2A2A2A", borderRadius: 6, padding: "4px 14px", fontWeight: 800, fontSize: 12, color: "#2A2A2A", letterSpacing: ".04em", marginBottom: 14 },
  h2: { fontWeight: 900, fontSize: 42, color: "#2A2A2A", letterSpacing: "-.015em", margin: "0 0 12px", lineHeight: 1.1 },
  sub: { fontWeight: 400, fontSize: 18, color: "#5A5A5A", margin: 0, lineHeight: 1.55 },
  container: { maxWidth: "72rem", margin: "0 auto", padding: "0 24px" },
  grid: { display: "grid", gap: 24 },
  soonBlock: { marginTop: 56, border: "3px solid #2A2A2A", background: "#fff", padding: "32px 28px" },
  soonHead: { textAlign: "center", maxWidth: "32rem", margin: "0 auto 28px" },
  soonTitle: { fontWeight: 900, fontSize: 28, color: "#2A2A2A", letterSpacing: "-.015em", margin: "0 0 8px", lineHeight: 1.15 },
  soonSub: { fontWeight: 400, fontSize: 15, color: "#5A5A5A", margin: 0, lineHeight: 1.55 },
  soonGrid: { display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 },
};

function About() {
  const stats = [
    { n: "2", l: "אפליקציות פעילות", bg: "#E8F0D8" },
    { n: "12", l: "אפליקציות בפיתוח", bg: "#FFF3D0" },
    { n: "100%", l: "בעברית, נבנה בישראל", bg: "#F0E4D7" },
  ];
  return (
    <section id="about" style={ssAbout.section}>
      <div className="ss-about-grid" style={ssAbout.container}>
        <div style={ssAbout.copy}>
          <span style={ssAbout.kicker}>מי אנחנו</span>
          <h2 className="ss-about-h2" style={ssAbout.h2}>לימוד <span style={{ color: "#3D6B35" }}>שמרגיש בעברית</span> — נקי, פשוט, בלי תרגומים מאנגלית</h2>
          <p className="ss-about-p" style={ssAbout.p}>אנחנו צוות מישראל שמאמין שלימוד טוב לא צריך לבוא מתורגם מאנגלית. בונים אפליקציות שמחזיקות את היד תוך כדי לימוד — בקצב שלכם, בשפה שלכם, על הנושאים שחשובים בישראל. התחלנו בכלים מקצועיים, וזה רק הצעד הראשון.</p>
        </div>
        <div className="ss-stats" style={ssAbout.stats}>
          {stats.map((s, i) => (
            <div key={i} style={{ ...ssAbout.stat, background: s.bg }}>
              <div style={ssAbout.statN}>{s.n}</div>
              <div style={ssAbout.statL}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
const ssAbout = {
  section: { padding: "72px 0", background: "#EDE8DD", borderTop: "3px solid #2A2A2A", borderBottom: "3px solid #2A2A2A" },
  container: { maxWidth: "72rem", margin: "0 auto", padding: "0 24px", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "center" },
  copy: {},
  kicker: { display: "inline-block", background: "#fff", border: "2px solid #2A2A2A", borderRadius: 6, padding: "4px 14px", fontWeight: 800, fontSize: 12, color: "#2A2A2A", letterSpacing: ".04em", marginBottom: 16 },
  h2: { fontWeight: 900, fontSize: 38, color: "#2A2A2A", letterSpacing: "-.015em", margin: "0 0 16px", lineHeight: 1.1 },
  p: { fontWeight: 400, fontSize: 17, color: "#5A5A5A", lineHeight: 1.6, margin: 0, maxWidth: 480 },
  stats: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 },
  stat: { border: "3px solid #2A2A2A", padding: "24px 20px", display: "flex", flexDirection: "column", gap: 4, minHeight: 120 },
  statN: { fontWeight: 900, fontSize: 44, color: "#2A2A2A", letterSpacing: "-.02em", lineHeight: 1 },
  statL: { fontWeight: 700, fontSize: 14, color: "#2A2A2A", marginTop: 6 },
};

function Contact() {
  return (
    <section id="contact" style={ssContact.section}>
      <div style={ssContact.inner}>
        <h2 className="ss-contact-h2" style={ssContact.h2}>מכירים מישהו שיכול להנות?</h2>
        <p className="ss-contact-sub" style={ssContact.sub}>ספרו לחבר על המשפחה. ואם יש לכם רעיון לכלי הבא שאתם הייתם רוצים לראות — דברו איתנו.</p>
        <a href="mailto:hello@studyplus.co.il" style={ssContact.btn}>
          hello@studyplus.co.il
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
          </svg>
        </a>
      </div>
    </section>
  );
}
const ssContact = {
  section: { padding: "80px 24px", background: "#2A4D24", borderTop: "3px solid #2A2A2A", borderBottom: "3px solid #2A2A2A", color: "#fff", textAlign: "center" },
  inner: { maxWidth: "44rem", margin: "0 auto", display: "flex", flexDirection: "column", alignItems: "center", gap: 18 },
  h2: { fontWeight: 900, fontSize: 44, letterSpacing: "-.02em", margin: 0, lineHeight: 1.1, color: "#fff" },
  sub: { fontWeight: 400, fontSize: 18, color: "rgba(255,255,255,.75)", margin: 0, lineHeight: 1.55, maxWidth: 480 },
  btn: { display: "inline-flex", alignItems: "center", gap: 10, background: "#FFF3D0", color: "#2A2A2A", border: "3px solid #2A2A2A", padding: "14px 24px", fontWeight: 900, fontSize: 18, textDecoration: "none", marginTop: 6, direction: "ltr" },
};

function Footer() {
  return (
    <footer style={ssFoot.bar}>
      <div style={ssFoot.inner}>
        <div style={ssFoot.left}>
          <div style={ssFoot.brandRow}>
            <div style={ssFoot.logo}><img src="assets/logos/study-plus-brand.png" alt="למידה פלוס" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /></div>
            <div>
              <div style={ssFoot.brand}>למידה פלוס</div>
            </div>
          </div>
          <p style={ssFoot.tag}>חברת אפליקציות לימוד בעברית. פשוטות, יעילות, מותאמות.</p>
        </div>
        <nav style={ssFoot.links}>
          <a href="#apps" style={ssFoot.link}>האפליקציות</a>
          <a href="#about" style={ssFoot.link}>אודות</a>
          <a href="#contact" style={ssFoot.link}>צור קשר</a>
        </nav>
      </div>
      <div style={ssFoot.legalRow}>
        <span>© 2026 למידה פלוס · כל הזכויות שמורות</span>
        <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
          פותח ועוצב על־ידי
          <a href="https://adialia.dev" target="_blank" rel="noreferrer" style={{ color: "#F5F0E8", textDecoration: "underline", textUnderlineOffset: 3, fontWeight: 700 }}>Adi Alia</a>
          · adialia.dev
        </span>
      </div>
    </footer>
  );
}
const ssFoot = {
  bar: { background: "#2A2A2A", color: "rgba(245,240,232,.7)", padding: "48px 24px 28px" },
  inner: { maxWidth: "72rem", margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 40, flexWrap: "wrap", paddingBottom: 32, borderBottom: "1.5px solid rgba(245,240,232,.15)" },
  left: { maxWidth: 360 },
  brandRow: { display: "flex", alignItems: "center", gap: 12, marginBottom: 12 },
  logo: { width: 44, height: 44, border: "3px solid #F5F0E8", borderRadius: 10, background: "#E5A06B", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", padding: 0 },
  brand: { fontWeight: 900, fontSize: 18, color: "#F5F0E8", letterSpacing: "-.01em" },
  tag: { fontWeight: 400, fontSize: 14, lineHeight: 1.55, margin: 0, color: "rgba(245,240,232,.55)" },
  links: { display: "flex", flexDirection: "column", gap: 8 },
  link: { color: "rgba(245,240,232,.7)", textDecoration: "none", fontWeight: 700, fontSize: 14 },
  legalRow: { maxWidth: "72rem", margin: "0 auto", paddingTop: 20, display: "flex", justifyContent: "space-between", flexWrap: "wrap", fontSize: 12, color: "rgba(245,240,232,.4)", gap: 12 },
};

function App() {
  return (
    <>
      <Navbar />
      <Hero accent={CONFIG.heroAccent} />
      <AppsSection layout={CONFIG.layout} showComingSoon={CONFIG.showComingSoon} />
      <About />
      <Contact />
      <Footer />
    </>
  );
}

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