/* Sections of the letter-site. All Dutch. Warm, handwritten feel. */

const { useEffect, useState } = React;

const Ornament = () => (
  <div className="ornament" aria-hidden>
    <span className="line" />
    <span className="dot" />
    <span className="line" />
  </div>
);

const Hero = () => (
  <section className="hero">
    <div className="hero-art">
      <img
        src="photos/k5r8pnjz5xrmt0cxp5rrdpd3aw.jpeg"
        alt="Schets van de bungalow aan de Fazantenlaan 2"
      />
    </div>

    <div className="measure">
      <div className="stamp">
        <span>Een brief aan</span>
        <span className="date">de familie van Fazantenlaan 2</span>
      </div>
      <h1>
        Beste verkopers, <br />
        <em>wij zijn Toon &amp; Rita.</em>
      </h1>
      <p className="lede" style={{ marginTop: 32 }}>
        Samen met onze twee windhonden Sidney en Fénix zijn wij al vijf jaar op
        zoek naar een thuis. Uw huis aan de Fazantenlaan 2 voelt voor ons als de
        plek waar die zoektocht eindigt.
      </p>
      <div className="postaddr">
        <strong>Toon Verbeek &amp; Rita Wittek</strong>
        <br />
        Den Haag, Nederland
        <br />
        April 2026
      </div>
    </div>

    <div className="measure-wide" style={{ marginTop: 56 }}>
      <figure
        className="photo-frame"
        style={{ maxWidth: 560, margin: "0 auto" }}
      >
        <img src="photos/couple.png" alt="Toon en Rita" />
        <figcaption className="caption">
          Toon &amp; Rita, najaar 2022
        </figcaption>
      </figure>
    </div>
  </section>
);

const WhoWeAre = () => (
  <section id="wie-wij-zijn">
    <div className="measure">
      <div className="eyebrow">Wie wij zijn</div>
      <h2>
        Een kleine, <em>rustige</em> familie.
      </h2>

      <p style={{ marginTop: 28 }}>
        Ik ben Toon (34), geboren en getogen in Nederland en heb mijn eigen ICT
        bedrijf. Rita (39) is in Duitsland geboren en in Zwitserland opgegroeid
        en is werkzaam in de HR in de voedselverduurzaming. Wij zijn 10 jaar
        samen, en we zijn de laatste jaren op zoek naar een plek waar we echt
        zouden kunnen landen.
      </p>

      <p>
        Wij zijn geen haastige mensen. We houden van lange wandelingen, van
        stille ochtenden, van rustig samen koken, en van avonden waarop het
        belangrijkste geluid in huis het geritsel is van twee honden die zich op
        hun kleed omdraaien.
      </p>

      <p>
        Wat wij zoeken is eigenlijk heel simpel: rust, groen om ons heen, en
        ruimte voor onszelf en de honden. Een plek om te blijven, niet een plek
        om door te reizen.
      </p>
    </div>

    <div className="measure-wide" style={{ marginTop: 40, marginBottom: 40 }}>
      <figure
        className="photo-frame"
        style={{ maxWidth: 560, margin: "0 auto" }}
      >
        <img
          src="photos/4a1c1fb2-a78b-4af7-8fef-72faafe6fa3f.jpg"
          alt="Met Sidney en Fénix in de bergen"
        />
        <figcaption className="caption">
          Onderweg, met z&#39;n vieren
        </figcaption>
      </figure>
    </div>
  </section>
);

const Journey = () => (
  <section id="onze-reis">
    <div className="measure">
      <div className="eyebrow">Onze zoektocht</div>
      <h2>
        Vijf jaar <em>onderweg</em>, op zoek naar stilte.
      </h2>

      <p style={{ marginTop: 28 }}>
        We zijn al vijf jaar op zoek naar een huis. Niet omdat we kieskeurig
        zijn, maar omdat we bij elk huis dat we bezichtigden voelden dat het nét
        niet was. Te druk, te groot, te klein, of te ver van alles wat ons lief
        is.
      </p>

      <p>
        Drie van die jaren hebben we in Spanje gewoond, en daarvoor reisden we
        samen door Portugal. We hielden van het licht en het ritme daar.
        Uiteindelijk hebben we besloten om toch terug te komen naar Nederland,
        om weer dichter bij familie en vrienden te kunnen zijn en om de
        Nederlandse bossen weer dagelijks om ons heen te hebben.
      </p>
    </div>

    <div className="measure">
      <p>
        Sinds een jaar wonen we tijdelijk in Den Haag. Het is een mooie stad,
        maar voor ons is het te druk en te ver verwijderd van het soort leven
        dat ons gelukkig maakt. We missen de bomen, de stilte tussen de
        geluiden, een tuin met eigen aarde.
      </p>

      <div className="postcard" style={{ marginTop: 32 }}>
        <span className="label-tag">Waarom Maarn</span>
        <p style={{ margin: 0 }}>
          Maarn voelt precies goed. Een dorp, omringd door het bos van de
          Utrechtse Heuvelrug, met wandelpaden die bij de voordeur beginnen.
          Dichtbij genoeg bij familie en werk, ver genoeg van het lawaai van de
          Randstad. Dit is de plek waar we willen blijven.
        </p>
      </div>
    </div>
  </section>
);

const Dogs = () => (
  <section id="onze-honden">
    <div className="measure">
      <div className="eyebrow">Onze honden</div>
      <h2>
        Sidney &amp; Fénix, <em>onze stille reisgenoten.</em>
      </h2>
      <p className="lede" style={{ marginTop: 28 }}>
        Twee windhonden die bijna elke belangrijke beslissing in ons leven
        meebepalen, al weten ze dat zelf niet.
      </p>
    </div>

    <div className="measure-wide" style={{ marginTop: 48 }}>
      <div className="photo-grid">
        <figure className="photo-frame">
          <img src="photos/toon-dogs.png" alt="Toon met Sidney en Fénix" />
          <figcaption className="caption">Ochtendwandeling, mei</figcaption>
        </figure>
        <figure className="photo-frame">
          <img src="photos/rita-dogs.png" alt="Rita met Sidney en Fénix" />
          <figcaption className="caption">Het bos, iets verder op</figcaption>
        </figure>
      </div>
    </div>

    <div className="measure-wide" style={{ marginTop: 24 }}>
      <div className="photo-grid">
        <figure className="photo-frame">
          <img
            src="photos/87414b80-1620-4c0f-9f59-ac90863a4709.JPG"
            alt="Rita met een van de honden in het park"
          />
          <figcaption className="caption">Winterzon</figcaption>
        </figure>
        <figure className="photo-frame">
          <img
            src="photos/DF629D22-4A55-4EAF-9E4B-9352D15649A5.JPG"
            alt="Picknick met de honden en uitzicht op de bergen"
          />
          <figcaption className="caption">Even pauze</figcaption>
        </figure>
      </div>
    </div>

    <div className="measure" style={{ marginTop: 56 }}>
      <div className="dog-card">
        <div className="dog-block">
          <h3>Sidney</h3>
          <div className="sub">de nieuwsgierige</div>
          <p>
            Rustig en lief, slaapt graag in een zonnevlek. Hij loopt altijd met
            ons mee, nooit ver vooruit. Hij wil gewoon weten waar we zijn.
          </p>
        </div>
        <div className="dog-block">
          <h3>Fénix</h3>
          <div className="sub">de voorzichtige</div>
          <p>
            Gered uit een asiel in Spanje. Iets verlegen bij vreemden, maar
            thuis een schaduw die achter ons aanschuifelt. Dol op het bos, dol
            op stilte.
          </p>
        </div>
      </div>
      <p style={{ marginTop: 32 }}>
        Ze zijn getraind, zindelijk, blaffen bijna nooit, en houden van een
        afgesloten tuin waar ze even een rondje kunnen rennen zonder dat wij ons
        zorgen hoeven te maken. Dat is ook waarom dit huis, met de mooie tuin,
        zo goed bij ons past.
      </p>
    </div>
  </section>
);

const WhyThisHouse = () => (
  <section id="waarom-dit-huis">
    <div className="measure">
      <div className="eyebrow">Waarom Fazantenlaan 2</div>
      <h2>
        Wat wij in uw huis <em>zagen.</em>
      </h2>

      <p className="lede" style={{ marginTop: 28 }}>
        We hebben er lang over nagedacht hoe we dit moesten verwoorden, want een
        huis is tot slot niet alleen maar stenen en vierkante meters.
      </p>

      <p style={{ marginTop: 28 }}>
        Toen we de foto's zagen, herkenden we iets. De rust van het perceel. Het
        bos om de hoek. De eenvoud van een bungalow uit de jaren '60, een
        bouwstijl die we stiekem allebei bewonderen, met zijn lage lijnen, grote
        ramen, en de manier waarop zo'n huis bij de grond hoort in plaats van
        erbovenop te staan.
      </p>

      <p>
        We zagen een huis dat niet gerenoveerd <em>hoeft</em> te worden om
        geliefd te zijn, maar dat wel een nieuwe bewoner verdient die het met
        aandacht wil onderhouden. Iemand die de mid-century ziel van de jaren
        '60 wil respecteren, en niet wil uitwissen.
      </p>

      <div className="postcard" style={{ marginTop: 32 }}>
        <span className="label-tag">Wat ons raakt</span>
        <ul style={{ margin: 0, paddingLeft: 20, lineHeight: 1.8 }}>
          <li>
            Het ruime perceel, genoeg tuin voor de honden, voor een moestuin én
            voor rust.
          </li>
          <li>De bosrand op loopafstand, ons liefste soort wandeling.</li>
          <li>De karakteristieke bungalowvorm uit 1960.</li>
          <li>De buurt, een dorp, niet te klein en niet te groot.</li>
        </ul>
      </div>
    </div>
  </section>
);

const Renovation = () => (
  <section id="plannen">
    <div className="measure">
      <div className="eyebrow">Onze plannen</div>
      <h2>
        Met <em>respect</em> voor wat er is.
      </h2>

      <p style={{ marginTop: 28 }}>
        Het huis heeft onderhoud nodig, en dat weten we. We vinden dat geen
        probleem. Sterker nog, we zijn juist op zoek naar een huis waar we onze
        eigen aandacht en liefde in kunnen stoppen, langzaam en stap voor stap.
      </p>

      <p>
        Onze benadering is niet om te slopen en opnieuw te beginnen. Het is
        kijken naar wat er al is, begrijpen waarom het zo ontworpen is, en dan
        voorzichtig moderniseren waar dat nodig is.
      </p>
    </div>

    <div className="measure-wide" style={{ marginTop: 48 }}>
      <figure
        className="photo-frame"
        style={{ maxWidth: 720, margin: "0 auto" }}
      >
        <img
          src="photos/te04c5cv79rmt0cxm0xv0he24w.png"
          alt="Fazantenlaan 2 vanaf de straat"
        />
        <figcaption className="caption">Onze plannen</figcaption>
      </figure>
    </div>

    <div className="measure">
      <h3 style={{ marginTop: 48, marginBottom: 8 }}>
        Wat we op termijn willen doen
      </h3>
      <ul style={{ paddingLeft: 20, lineHeight: 1.8 }}>
        <li>
          <strong>De schil verbeteren.</strong> Vloer- en dakisolatie bijwerken,
          HR++ glas waar het nog ontbreekt, en de woning stap voor stap naar een
          beter energielabel brengen.
        </li>
        <li>
          <strong>De ziel behouden.</strong> De originele lijnen, de lage
          daklijst en de indeling willen we niet veranderen. Warme houten
          details en kleurpaletten die passen bij de bouwperiode.
        </li>
        <li>
          <strong>Rustig tempo.</strong> We hebben geen haast. Verduurzamen en
          moderniseren zien we als een meerjarig project, niet als iets dat in
          één hectische zomer klaar moet zijn.
        </li>
        <li>
          <strong>De tuin leren kennen.</strong> Eerst een jaar rondlopen en
          kijken wat er groeit, voordat we ergens iets aan veranderen.
        </li>
      </ul>

      <p style={{ marginTop: 28, color: "var(--ink-soft)" }}>
        We hebben geen plannen voor een aanbouw, een tweede verdieping of iets
        dat de karakteristiek van de bungalow zou verstoren. Wat ons aantrekt in
        dit huis is precies zoals het nu is.
      </p>
    </div>
  </section>
);

const Practical = () => (
  <section id="praktisch">
    <div className="measure">
      <div className="eyebrow">Praktisch</div>
      <h2>
        Ons bod: <span style={{ fontWeight: 800 }}>€855.000</span>. Zonder{" "}
        <em>voorbehoud van financiering.</em>
      </h2>

      <p style={{ marginTop: 28 }}>
        We begrijpen dat u waarschijnlijk meerdere biedingen ontvangt. We willen
        u daarom niet alleen laten weten wie wij zijn, maar ook dat we praktisch
        klaar staan om de verkoop soepel en snel af te ronden.
      </p>

      <ul className="facts" style={{ marginTop: 32 }}>
        <li>
          <span className="k">Financiering</span>
          <span className="v">
            Omdat we onze vorige woning al een aantal jaar geleden hebben
            verkocht, betalen we het grootste deel van de koopsom uit eigen
            middelen. We hoeven slechts 20% van het aankoopbedrag te
            financieren. Ons hypotheektraject is al in gang gezet.
          </span>
        </li>
        <li>
          <span className="k">Voorbehouden</span>
          <span className="v">
            Ons bod is zonder voorbehoud van financiering. Wij zijn er zeker van
            dat onze financiering rond komt.
          </span>
        </li>

        <li>
          <span className="k">Tijdlijn</span>
          <span className="v">
            Wij hoeven geen eigen woning te verkopen. Daarom is een levering
            binnen 4 tot 6 weken is voor ons mogelijk. Ook een latere datum,
            mocht u die nodig hebben, is voor ons geen probleem.
          </span>
        </li>
        <li>
          <span className="k">Flexibiliteit</span>
          <span className="v">
            Als u na de levering nog tijd nodig heeft om spullen op te halen of
            zaken af te ronden, nemen we daar graag de ruimte voor.
          </span>
        </li>
      </ul>

      <p style={{ marginTop: 40, color: "var(--ink-soft)" }}>
        We willen u kortom een bieding doen waarbij u niet hoeft te vrezen voor
        weken van onzekerheid.
      </p>
    </div>
  </section>
);

const Closing = () => (
  <section id="tot-slot">
    <div className="measure">
      <div className="eyebrow">Tot slot</div>
      <h2>
        Dank u voor uw <em>tijd</em> en uw overweging.
      </h2>

      <p style={{ marginTop: 28 }}>
        We weten dat dit huis voor u een bijzondere betekenis heeft. We willen u
        laten weten dat we dat met ons beiden beseffen, en dat we u dankbaar
        zijn dat u de tijd neemt om onze brief te lezen.
      </p>

      <p>
        We wilden aan u duidelijk maken dat dit ons droomhuis is. Daarom deze
        brief, zodat u weet wie de mensen zijn die zo graag hier willen wonen.
      </p>

      <p>
        Mocht u voor ons kiezen, dan beloven wij dat we met zorg en aandacht in
        dit huis verder zullen wonen.
      </p>

      <div className="signature">
        Met hartelijke groet,
        <br />
        Toon &amp; Rita
        <span className="ps">Met Sidney &amp; Fénix</span>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  Ornament,
  Hero,
  WhoWeAre,
  Journey,
  Dogs,
  WhyThisHouse,
  Renovation,
  Practical,
  Closing,
});