export default function TerraFamilyRetreatPage() {
  return (
    <>
      <style>{`
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
          margin: 0;
          font-family: Inter, sans-serif;
          background: #f3eee7;
          color: #231c18;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; }
        .site {
          background: #f3eee7;
        }
        .topbar {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 50;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 22px 5vw;
          color: white;
          mix-blend-mode: difference;
        }
        .brand {
          display: flex;
          align-items: center;
          gap: 14px;
        }
        .logo {
          width: 56px;
          height: 56px;
          object-fit: contain;
          border-radius: 50%;
        }
        .brand-copy {
          line-height: 1.1;
        }
        .brand-copy strong {
          display: block;
          font-size: 12px;
          font-weight: 500;
          letter-spacing: .34em;
          text-transform: uppercase;
        }
        .brand-copy span {
          display: block;
          margin-top: 4px;
          font-size: 11px;
          opacity: .8;
          letter-spacing: .14em;
          text-transform: uppercase;
        }
        .nav {
          display: flex;
          align-items: center;
          gap: 26px;
          font-size: 11px;
          letter-spacing: .22em;
          text-transform: uppercase;
        }
        .nav a { opacity: .94; }
        .nav .owner-link {
          border: 1px solid rgba(255,255,255,.45);
          padding: 11px 14px;
        }
        .hero {
          position: relative;
          min-height: 100vh;
          color: white;
          background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.38)), url('main.jpeg') center/cover no-repeat;
        }
        .hero-inner {
          min-height: 100vh;
          display: flex;
          align-items: flex-end;
          padding: 0 6vw 7vh;
        }
        .hero-panel {
          max-width: 920px;
        }
        .eyebrow-light {
          font-size: 11px;
          letter-spacing: .42em;
          text-transform: uppercase;
          color: rgba(255,255,255,.78);
          margin-bottom: 18px;
        }
        .hero h1 {
          margin: 0;
          max-width: 960px;
          font-size: clamp(46px, 7vw, 96px);
          line-height: .94;
          font-weight: 300;
          letter-spacing: -.03em;
        }
        .hero p {
          margin: 28px 0 0;
          max-width: 620px;
          font-size: 18px;
          line-height: 1.8;
          color: rgba(255,255,255,.88);
        }
        .hero-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 14px;
          margin-top: 34px;
        }
        .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 14px 24px;
          border: 1px solid rgba(255,255,255,.45);
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: .22em;
          color: white;
        }
        .btn.primary {
          background: #8f5137;
          border-color: #8f5137;
        }
        .section {
          padding: 120px 6vw;
        }
        .editorial {
          max-width: 1500px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: .72fr 1.28fr;
          gap: 56px;
        }
        .eyebrow {
          font-size: 11px;
          letter-spacing: .42em;
          text-transform: uppercase;
          color: #8f5137;
        }
        .display {
          margin: 0;
          font-size: clamp(34px, 4.8vw, 72px);
          line-height: 1.02;
          font-weight: 300;
          letter-spacing: -.03em;
        }
        .lead {
          font-size: 20px;
          line-height: 1.95;
          color: #5f4d43;
        }
        .story-grid {
          display: grid;
          grid-template-columns: 1.05fr .95fr;
          gap: 28px;
          align-items: end;
          margin-top: 44px;
        }
        .story-grid img {
          width: 100%;
          height: 620px;
          object-fit: cover;
        }
        .quote-box {
          border-left: 1px solid #d6c7ba;
          padding-left: 28px;
          color: #8f5137;
          font-style: italic;
          font-size: 30px;
          line-height: 1.35;
        }
        .image-band {
          min-height: 92vh;
          background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.34)), url('6.jpg') center/cover no-repeat;
          color: white;
          display: flex;
          align-items: flex-end;
        }
        .image-band-inner {
          max-width: 1500px;
          width: 100%;
          margin: 0 auto;
          display: grid;
          grid-template-columns: .95fr 1.05fr;
          gap: 44px;
          align-items: end;
          padding: 0 6vw 7vh;
        }
        .image-band-copy .display {
          color: white;
          max-width: 650px;
        }
        .image-band-panel {
          background: rgba(255,255,255,.9);
          backdrop-filter: blur(10px);
          padding: 34px;
        }
        .image-band-panel p {
          margin: 0;
          font-size: 19px;
          line-height: 1.9;
          color: #5f4d43;
        }
        .feature-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0,1fr));
          gap: 12px;
          margin-top: 24px;
        }
        .feature-grid div {
          border: 1px solid #e6d8cd;
          background: white;
          padding: 15px 16px;
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: .18em;
          color: #3d3028;
        }
        .split-showcase {
          max-width: 1500px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        .split-showcase img {
          width: 100%;
          height: 620px;
          object-fit: cover;
        }
        .dayuse {
          background: white;
        }
        .dayuse-grid {
          max-width: 1500px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: .78fr 1.22fr;
          gap: 56px;
          align-items: center;
        }
        .dayuse-media img {
          width: 100%;
          height: 700px;
          object-fit: cover;
        }
        .dayuse-copy .display,
        .owner-copy .display,
        .contact-copy .display {
          margin-bottom: 24px;
        }
        .dayuse-copy .lead,
        .owner-copy .lead,
        .contact-copy .lead {
          margin: 0;
        }
        .btn-dark {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-top: 34px;
          padding: 14px 24px;
          border: 1px solid #241c18;
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: .22em;
          color: #241c18;
        }
        .gallery {
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
        .gallery img {
          width: 100%;
          height: 88vh;
          object-fit: cover;
        }
        .gallery-copy {
          background: #e9ddd1;
          display: flex;
          align-items: flex-end;
          padding: 56px;
        }
        .owner {
          max-width: 1500px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: .82fr 1.18fr;
          gap: 48px;
          align-items: center;
        }
        .owner img {
          width: 100%;
          height: 620px;
          object-fit: cover;
        }
        .contact {
          position: relative;
          min-height: 78vh;
          background: linear-gradient(to bottom, rgba(0,0,0,.14), rgba(0,0,0,.48)), url('4.jpg') center/cover no-repeat;
          color: white;
          display: flex;
          align-items: flex-end;
        }
        .contact-inner {
          max-width: 1500px;
          width: 100%;
          margin: 0 auto;
          padding: 0 6vw 7vh;
        }
        .contact-copy {
          max-width: 860px;
        }
        .contact-meta {
          margin-top: 30px;
          font-size: 16px;
          line-height: 1.9;
          color: rgba(255,255,255,.82);
        }
        footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 32px 6vw 40px;
          font-size: 12px;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: #6d584d;
        }
        @media (max-width: 980px) {
          .topbar {
            mix-blend-mode: normal;
            background: rgba(25,19,16,.62);
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
          }
          .nav {
            flex-wrap: wrap;
            gap: 12px 16px;
          }
          .section,
          .hero-inner,
          .image-band-inner,
          .contact-inner {
            padding-left: 5vw;
            padding-right: 5vw;
          }
          .editorial,
          .story-grid,
          .image-band-inner,
          .split-showcase,
          .dayuse-grid,
          .gallery,
          .owner,
          .feature-grid {
            grid-template-columns: 1fr;
          }
          .story-grid img,
          .split-showcase img,
          .dayuse-media img,
          .gallery img,
          .owner img {
            height: 420px;
          }
          .gallery-copy {
            min-height: 320px;
          }
          footer {
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
          }
        }
      `}</style>

      <div className="site">
        <div className="topbar">
          <div className="brand">
            <img src="terra-logo.png" className="logo" alt="TERRA logo" />
            <div className="brand-copy">
              <strong>TERRA</strong>
              <span>Family Retreat</span>
            </div>
          </div>

          <nav className="nav">
            <a href="#historia">História</a>
            <a href="#familias">Famílias</a>
            <a href="#dayuse">Day Use</a>
            <a href="#galeria">Galeria</a>
            <a href="proprietario.html" className="owner-link">Seja Proprietário</a>
          </nav>
        </div>

        <section className="hero">
          <div className="hero-inner">
            <div className="hero-panel">
              <div className="eyebrow-light">Private Family Retreat · Azoia · Aldeia do Meco · Sesimbra</div>
              <h1>
                Não é uma casa.
                <br />
                É um lugar onde a vida acontece.
              </h1>
              <p>
                Um refúgio privado na natureza, pensado para famílias. Apenas uma família de cada vez,
                com piscina, jardim, day use e uma forma mais lenta de viver perto de Lisboa.
              </p>
              <div className="hero-actions">
                <a className="btn primary" href="#contacto">Reservar</a>
                <a className="btn" href="#dayuse">Day Use</a>
                <a className="btn" href="proprietario.html">Seja Proprietário</a>
              </div>
            </div>
          </div>
        </section>

        <section id="historia" className="section">
          <div className="editorial">
            <div>
              <div className="eyebrow">A história</div>
            </div>
            <div>
              <h2 className="display">Um sonho de família que regressa à terra.</h2>
              <p className="lead">
                A TERRA nasce de uma história muito pessoal. Aos 45 anos, tornando-se mãe a solo,
                nasceu também um novo propósito: criar um lugar onde o Mateus pudesse crescer perto da natureza.
              </p>
              <p className="lead">
                Inspirada por um legado de família alentejana e pela vontade de regressar à terra,
                este refúgio foi criado entre campo e mar, perto de Lisboa. Cada árvore plantada na TERRA
                leva o nome de pessoas importantes da família, como símbolo de gratidão, memória e pertença.
              </p>

              <div className="story-grid">
                <img src="nos.jpg" alt="Fundadora e Mateus" />
                <div className="quote-box">“Cada árvore na TERRA conta uma história.”</div>
              </div>
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 0 }}>
          <div className="split-showcase">
            <img src="1.jpg" alt="Exterior TERRA" />
            <img src="2.jpg" alt="Fachada TERRA" />
          </div>
        </section>

        <section id="familias" className="image-band">
          <div className="image-band-inner">
            <div className="image-band-copy">
              <div>
                <div className="eyebrow-light">Especial Famílias</div>
                <h2 className="display">Um lugar pensado para crianças felizes e pais tranquilos.</h2>
              </div>
            </div>
            <div className="image-band-panel">
              <p>
                Babysitter 24h, cozinha de lama, baloiço, horta, animais e muito espaço para brincar:
                tudo foi pensado para uma experiência familiar serena, livre e memorável.
              </p>
              <div className="feature-grid">
                <div>Babysitter 24h</div>
                <div>Cozinha de lama</div>
                <div>Baloiço</div>
                <div>Horta</div>
                <div>Animais</div>
                <div>Piscina & jardim</div>
              </div>
            </div>
          </div>
        </section>

        <section id="dayuse" className="section dayuse">
          <div className="dayuse-grid">
            <div className="dayuse-copy">
              <div className="eyebrow">Day Use</div>
              <h2 className="display">Passar o dia na TERRA.</h2>
              <p className="lead">
                Até 8 pessoas com piscina, jardim, deck e opção de picnic. Ideal para encontros em família,
                celebrações pequenas ou simplesmente um dia diferente na natureza.
              </p>
              <a className="btn-dark" href="#contacto">Pedir informações</a>
            </div>
            <div className="dayuse-media">
              <img src="6.jpg" alt="Day Use TERRA" />
            </div>
          </div>
        </section>

        <section id="galeria" className="gallery">
          <img src="3.jpg" alt="Galeria TERRA 1" />
          <img src="4.jpg" alt="Galeria TERRA 2" />
          <img src="7.jpg" alt="Galeria TERRA 3" />
          <div className="gallery-copy">
            <div>
              <div className="eyebrow">Galeria</div>
              <h2 className="display">Luz, arquitetura e vida ao ar livre.</h2>
            </div>
          </div>
        </section>

        <section id="proprietario" className="section" style={{ background: 'white' }}>
          <div className="owner">
            <div className="owner-copy">
              <div className="eyebrow">Seja Proprietário</div>
              <h2 className="display">Um loft independente, com a mesma alma da TERRA.</h2>
              <p className="lead">
                Existe apenas um loft disponível numa parcela independente, pertencente à mesma proprietária
                do TERRA Family Retreat. Uma oportunidade rara para viver perto da natureza, entre o campo e o Atlântico.
              </p>
              <a className="btn-dark" href="proprietario.html">Saber mais</a>
            </div>
            <img src="1.jpg" alt="Loft TERRA" />
          </div>
        </section>

        <section id="contacto" className="contact">
          <div className="contact-inner">
            <div className="contact-copy">
              <div className="eyebrow-light">TERRA Family Retreat</div>
              <h2 className="display" style={{ color: 'white' }}>Reservar tempo de verdade em família.</h2>
              <p className="lead" style={{ color: 'rgba(255,255,255,.84)' }}>
                Estadias privadas e day use num refúgio desenhado para desacelerar, brincar e estar juntos.
              </p>
              <div className="hero-actions">
                <a className="btn primary" href="mailto:hello@terrafamilyretreat.com">Pedir informações</a>
                <a className="btn" href="https://wa.me/351917442820">WhatsApp</a>
              </div>
              <div className="contact-meta">
                hello@terrafamilyretreat.com
                <br />
                WhatsApp: 917 442 820
                <br />
                Preço sob consulta
              </div>
            </div>
          </div>
        </section>

        <footer>
          <div>TERRA Family Retreat</div>
          <div>terrafamilyretreat.com</div>
        </footer>
      </div>
    </>
  );
}