// Villa Mesochori — home page, content harvested from the owners' Airbnb & Booking.com listings
const NS = window.VillaMesochoriDesignSystem_9e1a21;
const { Button, Badge, Card, LucideIcon } = NS;

// Photos now come from the content store (owners can replace them in the admin area).

// Amenities now come from the content store (editable in the owners' area).

// "More photos" — collapsed gallery that expands on click
function MorePhotos({ items }) {
  const [open, setOpen] = React.useState(false);
  const shown = items.filter((g) => g.label || g.img);
  if (!shown.length) return null;
  return (
    <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "96px var(--container-pad) 0" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, marginBottom: open ? 28 : 0 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <Eyebrow>More photos</Eyebrow>
          <h2 style={{ font: "var(--type-h1)", margin: 0 }}>A closer look inside</h2>
        </div>
        <Button variant="secondary" onClick={() => setOpen(!open)}>
          {open ? "Hide photos" : `Show all ${shown.length} photos`}
        </Button>
      </div>
      {open && (
        <div className="vm-stagger" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {shown.map((g, i) => (
            <figure key={i} style={{ margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
              <div style={{ height: 220, overflow: "hidden", borderRadius: "var(--radius-md)", border: "1px solid var(--border-soft)" }}>
                {g.img ? (
                  <Photo src={g.img} alt={g.label} />
                ) : (
                  <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, background: "var(--surface-sunken)", color: "var(--text-muted)" }}>
                    <LucideIcon name="camera" size={22} />
                    <span style={{ font: "var(--type-small)" }}>Photo coming soon</span>
                  </div>
                )}
              </div>
              <figcaption style={{ font: "var(--type-small)", color: "var(--text-muted)" }}>{g.label}</figcaption>
            </figure>
          ))}
        </div>
      )}
    </section>
  );
}

function Eyebrow({ color = "var(--accent)", children }) {
  return <span style={{ font: "var(--type-eyebrow)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: color }}>{children}</span>;
}

function Photo({ src, alt, style, className }) {
  return <img src={src} alt={alt} loading="lazy" className={className} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", background: "var(--surface-sunken)", ...style }} />;
}

// Split "a | b | c" multiline content strings into arrays
function vmLines(str, parts) {
  return String(str || "").split("\n").map((l) => l.trim()).filter(Boolean).map((l) => {
    const bits = l.split("|").map((b) => b.trim());
    while (bits.length < parts) bits.push("");
    return bits;
  });
}

function Home({ onBook, onGuide, onManual }) {
  const c = window.VMContent.get();
  const highlights = vmLines(c.homeHighlights, 3);
  const amenities = vmLines(c.amenities, 2);
  return (
    <div data-screen-label="Home">
      {/* Hero */}
      <section style={{ position: "relative", height: 560 }}>
        <Photo src={c.imgHero} alt="The view from the balcony across the Lakonikos Gulf" style={{ position: "absolute", inset: 0, height: "100%" }} className="vm-hero-img" />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(34,29,24,0.6) 0%, rgba(34,29,24,0.2) 45%, transparent 70%)", pointerEvents: "none" }}></div>
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0 }}>
          <div className="vm-stagger" style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 var(--container-pad) 52px" }}>
            <h1 style={{ font: "var(--type-hero)", color: "var(--limewash-50)", maxWidth: 680, margin: 0 }}>{c.heroTitle}</h1>
            <p style={{ font: "var(--type-body-lg)", color: "var(--limewash-100)", maxWidth: 560, margin: "14px 0 22px" }}>{c.heroSub}</p>
            <div style={{ display: "flex", gap: 12 }}>
              <Button size="lg" onClick={onBook}>Check availability</Button>
              <Button size="lg" variant="secondary" style={{ borderColor: "rgba(250,246,239,0.6)", color: "var(--limewash-50)" }} onClick={onGuide}>Places to go</Button>
            </div>
          </div>
        </div>
      </section>

      {/* Highlights */}
      <section className="vm-stagger" style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "56px var(--container-pad) 0", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {highlights.map(([icon, title, body]) => (
          <div key={title} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <span style={{ color: "var(--secondary)", display: "inline-flex" }}><LucideIcon name={icon} size={22} /></span>
            <h3 style={{ font: "var(--type-h3)", margin: 0 }}>{title}</h3>
            <p style={{ font: "var(--type-body)", color: "var(--text-muted)", margin: 0 }}>{body}</p>
          </div>
        ))}
      </section>

      {/* The house */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "96px var(--container-pad) 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
          <Eyebrow>The house</Eyebrow>
          <h2 style={{ font: "var(--type-h1)", margin: 0 }}>{c.houseTitle}</h2>
          <p style={{ font: "var(--type-body-lg)", margin: 0 }}>{c.houseBody1}</p>
          <p style={{ font: "var(--type-body)", color: "var(--text-muted)", margin: 0 }}>{c.houseBody2}</p>
          <div style={{ display: "flex", gap: 8 }}>
            <Badge>Sleeps {c.maxGuests}</Badge>
            <Badge>From {c.currency}{c.nightly} / night</Badge>
            <Badge tone="accent">Books direct</Badge>
          </div>
        </div>
        <div style={{ height: 400, minWidth: 0, overflow: "hidden", borderRadius: "var(--radius-lg)" }}>
          <Photo src={c.imgHouse} alt="The open-plan living room" />
        </div>
      </section>

      {/* House detail cards */}
      {(c.houseCards || []).length > 0 && (
        <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "56px var(--container-pad) 0" }}>
          <div className="vm-stagger" style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(3, c.houseCards.length)}, 1fr)`, gap: 24 }}>
            {c.houseCards.map((card, i) => (
              <div key={i} style={{ background: "var(--surface-card)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-card)", padding: "22px 24px", display: "flex", flexDirection: "column", gap: 8 }}>
                <h3 style={{ font: "var(--type-h3)", margin: 0 }}>{card.title}</h3>
                <p style={{ font: "var(--type-body)", color: "var(--text-body)", margin: 0 }}>{card.body}</p>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* Where you'll sleep */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "96px var(--container-pad) 0" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 28 }}>
          <Eyebrow>Where you'll sleep</Eyebrow>
          <h2 style={{ font: "var(--type-h1)", margin: 0 }}>{c.bedsTitle}</h2>
        </div>
        <div className="vm-stagger" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          {[
            [c.imgBedDouble, c.bedDoubleTitle, c.bedDoubleBody],
            [c.imgBedTwin, c.bedTwinTitle, c.bedTwinBody],
          ].map(([src, title, body]) => (
            <div key={title} style={{ background: "var(--surface-card)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-card)" }}>
              <div style={{ height: 280 }}><Photo src={src} alt={title} /></div>
              <div style={{ padding: "20px 24px 24px", display: "flex", flexDirection: "column", gap: 8 }}>
                <h3 style={{ font: "var(--type-h3)", margin: 0 }}>{title}</h3>
                <p style={{ font: "var(--type-body)", color: "var(--text-body)", margin: 0 }}>{body}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* More photos */}
      <MorePhotos items={c.gallery || []} />

      {/* The view */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "96px var(--container-pad) 0", display: "grid", gridTemplateColumns: "380px 1fr", gap: 56, alignItems: "center" }}>
        <div style={{ height: 440, minWidth: 0, overflow: "hidden", clipPath: "inset(0 round 999px 999px 12px 12px)" }}>
          <Photo src={c.imgView} alt="The view toward Elafonisos and Kythira" />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
          <Eyebrow color="var(--secondary)">The view</Eyebrow>
          <h2 style={{ font: "var(--type-h1)", margin: 0 }}>{c.viewTitle}</h2>
          <p style={{ font: "var(--type-body-lg)", margin: 0 }}>{c.viewBody}</p>
          <p style={{ font: "var(--type-hand)", fontSize: 24, color: "var(--limewash-600)", margin: "8px 0 0", transform: "rotate(-1.2deg)" }}>{c.hostNote}</p>
        </div>
      </section>

      {/* Amenities */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "96px var(--container-pad) 0" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 28 }}>
          <Eyebrow>What the house offers</Eyebrow>
          <h2 style={{ font: "var(--type-h1)", margin: 0 }}>{c.amenTitle}</h2>
        </div>
        <div className="vm-stagger" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "18px 24px" }}>
          {amenities.map(([icon, label]) => (
            <div key={label} style={{ display: "flex", alignItems: "center", gap: 12, font: "var(--type-body)", color: "var(--text-body)" }}>
              <span style={{ color: "var(--secondary)", display: "inline-flex" }}><LucideIcon name={icon} size={20} /></span>
              {label}
            </div>
          ))}
        </div>
      </section>

      {/* The village */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "96px var(--container-pad) 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div style={{ height: 380, minWidth: 0, overflow: "hidden", borderRadius: "var(--radius-lg)" }}>
          <Photo src={c.imgVillage} alt="Outside the house in Mesochori" />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
          <Eyebrow color="var(--secondary)">The village</Eyebrow>
          <h2 style={{ font: "var(--type-h1)", margin: 0 }}>{c.villageTitle}</h2>
          <p style={{ font: "var(--type-body-lg)", margin: 0 }}>{c.villageBody1}</p>
          <p style={{ font: "var(--type-body)", color: "var(--text-muted)", margin: 0 }}>{c.villageBody2}</p>
        </div>
      </section>

      {/* Guide + manual teasers */}
      <section className="vm-stagger" style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "96px var(--container-pad) 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        <Card interactive eyebrow="Places to go" title="Our local guide" footer={<Button variant="ghost" size="sm" onClick={onGuide}>Open the guide</Button>} onClick={onGuide}>
          Simos beach, Monemvasia, the tavernas we actually eat at — everything we tell friends when they visit.
        </Card>
            <Card interactive eyebrow="Good to know" title="The house manual" footer={<Button variant="ghost" size="sm" onClick={onManual}>Read the manual</Button>} onClick={onManual}>
          Check-in from {c.checkIn}, checkout by {c.checkOut}, where to park, and the few house rules we ask everyone to keep.
        </Card>
      </section>

      {/* CTA band */}
      <section style={{ maxWidth: "var(--container-max)", margin: "96px auto 0", padding: "0 var(--container-pad)" }}>
        <div style={{ background: "var(--surface-sunken)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", padding: "56px 32px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
          <h2 style={{ font: "var(--type-h2)", margin: 0 }}>{c.ctaTitle}</h2>
          <p style={{ font: "var(--type-body)", color: "var(--text-muted)", margin: 0, maxWidth: 460 }}>{c.ctaBody}</p>
          <Button size="lg" onClick={onBook}>Check availability</Button>
        </div>
      </section>
    </div>
  );
}

window.VMHome = Home;
