/* The rendered "Sweet Crumb" bakery site shown inside the Horizons preview pane.
   This is the customer's site — its own warm brand, NOT hPanel chrome. */

const BAKE = {
  ink: "#3A2A1E",
  inkSoft: "#6B5544",
  cream: "#FBF5EC",
  card: "#FFFFFF",
  terra: "#C2622E",
  terraDeep: "#A24D1F",
  gold: "#E0A84E",
  line: "#EBDFCD",
  serif: "'Playfair Display', Georgia, serif",
};

function Bake({ children, c = BAKE.ink, w, fs, lh, ls, mt, weight, serif, align, style }) {
  return (
    <div style={{
      color: c, fontWeight: weight, fontSize: fs, lineHeight: lh, letterSpacing: ls,
      marginTop: mt, maxWidth: w, textAlign: align,
      fontFamily: serif ? BAKE.serif : "var(--font-sans)", ...style,
    }}>{children}</div>
  );
}

/* a warm "photo" tile — stand-in for real bakery photography in the preview */
function Photo({ from, to, label, h = 180, dark }) {
  return (
    <div style={{
      height: h, borderRadius: 14, position: "relative", overflow: "hidden",
      background: `linear-gradient(150deg, ${from}, ${to})`,
    }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,.35), transparent 55%)" }} />
      <div style={{ position: "absolute", left: 14, bottom: 12, fontFamily: BAKE.serif, fontSize: 13, fontStyle: "italic", color: dark ? "rgba(255,255,255,.92)" : "rgba(58,42,30,.62)" }}>{label}</div>
    </div>
  );
}

function BakerySite() {
  return (
    <div style={{ background: BAKE.cream, color: BAKE.ink, fontFamily: "var(--font-sans)", minHeight: "100%" }}>
      {/* nav */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 44px", borderBottom: `1px solid ${BAKE.line}` }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 30, height: 30, borderRadius: "50%", background: BAKE.terra, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: BAKE.serif, fontWeight: 700, fontSize: 16 }}>S</span>
          <span style={{ fontFamily: BAKE.serif, fontSize: 20, fontWeight: 700, letterSpacing: "0.01em" }}>Sweet&nbsp;Crumb</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 28, fontSize: 14, color: BAKE.inkSoft }}>
          <span>Menu</span><span>Our story</span><span>Visit</span>
          <span style={{ background: BAKE.ink, color: BAKE.cream, padding: "9px 18px", borderRadius: 999, fontWeight: 600 }}>Order online</span>
        </div>
      </div>

      {/* hero */}
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 40, padding: "56px 44px 48px", alignItems: "center" }}>
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", borderRadius: 999, background: "#fff", border: `1px solid ${BAKE.line}`, fontSize: 12.5, color: BAKE.terraDeep, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase" }}>Baked fresh every morning</div>
          <Bake serif fs={58} lh="1.04" weight={700} ls="-0.02em" mt={20} style={{ maxWidth: 460 }}>Warm bread, honest ingredients.</Bake>
          <Bake c={BAKE.inkSoft} fs={17} lh="1.6" mt={18} w={400}>A small neighbourhood bakery in Lisbon. We mill our own flour, ferment slow, and pull everything from the oven by 7am.</Bake>
          <div style={{ display: "flex", gap: 14, marginTop: 30 }}>
            <span style={{ background: BAKE.terra, color: "#fff", padding: "14px 26px", borderRadius: 999, fontWeight: 600, fontSize: 15 }}>See today's bakes</span>
            <span style={{ border: `1.5px solid ${BAKE.ink}`, padding: "13px 26px", borderRadius: 999, fontWeight: 600, fontSize: 15 }}>Reserve a loaf</span>
          </div>
        </div>
        <Photo from="#E8A65A" to="#B9531F" label="" h={340} dark />
      </div>

      {/* signature bakes */}
      <div style={{ padding: "20px 44px 52px" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 24 }}>
          <Bake serif fs={32} weight={700} ls="-0.01em">Signature bakes</Bake>
          <Bake c={BAKE.terraDeep} fs={14} weight={600}>View full menu →</Bake>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
          {[
            { n: "Sourdough miche", p: "€6.50", f: "#F0C879", t: "#D08A2E", d: "48-hour rye levain" },
            { n: "Almond croissant", p: "€3.80", f: "#E9B97E", t: "#B96A2C", d: "Double-baked, toasted" },
            { n: "Cardamom bun", p: "€3.20", f: "#E8A463", t: "#9C4A1C", d: "Hand-knotted, spiced" },
          ].map((b) => (
            <div key={b.n} style={{ background: BAKE.card, borderRadius: 16, padding: 14, border: `1px solid ${BAKE.line}` }}>
              <Photo from={b.f} to={b.t} label="" h={150} dark />
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 14 }}>
                <Bake serif fs={19} weight={700}>{b.n}</Bake>
                <Bake c={BAKE.terraDeep} fs={16} weight={700}>{b.p}</Bake>
              </div>
              <Bake c={BAKE.inkSoft} fs={13.5} mt={4}>{b.d}</Bake>
            </div>
          ))}
        </div>
      </div>

      {/* story strip */}
      <div style={{ background: "#fff", borderTop: `1px solid ${BAKE.line}`, borderBottom: `1px solid ${BAKE.line}`, padding: "48px 44px", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 44, alignItems: "center" }}>
        <Photo from="#C98A53" to="#6E3A18" label="In the bakehouse" h={240} dark />
        <div>
          <Bake serif fs={30} weight={700} ls="-0.01em">From a home oven to the corner of Rua Verde.</Bake>
          <Bake c={BAKE.inkSoft} fs={16} lh="1.65" mt={16} w={460}>Sweet Crumb started as a weekend stall. Today we bake a few hundred loaves a day — still by hand, still the same starter we named Beatriz in 2019.</Bake>
          <div style={{ display: "flex", gap: 36, marginTop: 28 }}>
            {[["7am", "Out of the oven"], ["6", "Days a week"], ["100%", "Stone-milled flour"]].map(([a, b]) => (
              <div key={b}>
                <Bake serif fs={28} weight={700} c={BAKE.terraDeep}>{a}</Bake>
                <Bake c={BAKE.inkSoft} fs={13} mt={2}>{b}</Bake>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* order CTA */}
      <div style={{ padding: "52px 44px", textAlign: "center" }}>
        <Bake serif fs={36} weight={700} ls="-0.01em" align="center" style={{ margin: "0 auto" }}>Order ahead, skip the queue.</Bake>
        <Bake c={BAKE.inkSoft} fs={16} mt={12} align="center" style={{ maxWidth: 440, margin: "12px auto 0" }}>Reserve your loaf the night before and collect it warm between 7 and 11am.</Bake>
        <div style={{ marginTop: 26 }}>
          <span style={{ background: BAKE.ink, color: BAKE.cream, padding: "15px 34px", borderRadius: 999, fontWeight: 600, fontSize: 16 }}>Start an order</span>
        </div>
      </div>

      {/* footer */}
      <div style={{ background: BAKE.ink, color: "#E9DDCB", padding: "30px 44px", display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 13.5 }}>
        <span style={{ fontFamily: BAKE.serif, fontSize: 17, fontWeight: 700, color: "#fff" }}>Sweet Crumb</span>
        <span style={{ opacity: 0.8 }}>Rua Verde 14, Lisboa · 7–14h, Tue–Sun</span>
      </div>
    </div>
  );
}

window.BakerySite = BakerySite;