// src/App.jsx

import { useState } from 'react';
import profilePic from "./assets/Henrikmattsson.jpg";
import favIcon from "./assets/favicon.svg";

export default function App() {

  const [reviews, setReviews] = useState({ score: "4.9", count: "600" });

  return (
    <div className="min-h-screen relative bg-[#5F6D78] font-semibold flex flex-col">

      <header className="sticky top-0 w-full h-17.5 bg-[#7F8386] flex justify-center z-50">
        <div className="w-full h-full flex items-center justify-center">
          <a href="#" className="h-full flex items-center justify-center py-2.5">
            <img src={favIcon} alt="lirkab.se" className="h-full" />
          </a>
        </div>
      </header>

      <main className="grow flex flex-col lg:flex-row items-center justify-center gap-2.5 lg:gap-12.5 px-[5%] py-[5%] pb-12.5 lg:pb-17.5">
        <div className="flex justify-center items-center">
          <img
            src={profilePic}
            alt="Henrik Mattsson"
            className="w-full min-w-full max-w-100 lg:min-w-125 lg:max-w-162.5 p-3.75 object-cover object-center rounded-[50px]"
          />
        </div>
        <div className="text-white tracking-[1px] font-thin text-center lg:text-left">
          <h1 className="font-bahn font-extrabold text-[40px] leading-12.5 tracking-[2px] mb-4">
            Lerbergets idrotts & rehabklinik AB
          </h1>

          <div className="font-bahn py-2.5 leading-tight">
            <p>
              Jag erbjuder professionell massagebehandling för bl.a. idrottsskador och arbetsrelaterade skador i axlar, nacke och rygg.
            </p>
            <p>
              Många kommer också till mig och vill ha råd när de har problem med löparknä, benhinneinflammation, tennisarmbåge m.m.
            </p>
            <a
              href="https://www.timecenter.se/lirkab/#reviews"
              target="_blank"
              rel="noopener noreferrer"
              className="flex flex-wrap items-end justify-center lg:justify-start gap-3 pt-2 font-bahn transition-opacity hover:opacity-80 cursor-pointer"
            >
              <div className="text-[24px] font-black text-white leading-[0.9]">{reviews.score}</div>

              <div className="flex items-center">
                <svg width="120" height="24" viewBox="0 0 250 50">
                  <defs>
                    <linearGradient id="half">
                      <stop offset="50%" stopColor="#f46c5f"></stop>
                      <stop offset="50%" stopColor="#ccc"></stop>
                    </linearGradient>
                    <g id="nostar">
                      <g width="50px" height="50px">
                        <polygon points="49.189,19.418 31.39,18.48 25,2.273 18.61,18.48 0.811,19.418 14.648,30.413 10.07,47.223 25,37.772 39.929,47.223 35.352,30.413 "></polygon>
                      </g>
                    </g>
                    <g id="halfstar">
                      <use xlinkHref="#nostar" fill="url(#half)"></use>
                    </g>
                    <g id="star">
                      <use xlinkHref="#nostar" fill="#f46c5f"></use>
                    </g>
                  </defs>
                  <g fill="#ddd">
                    <use x="0" y="0" xlinkHref="#star"></use>
                    <use x="50" y="0" xlinkHref="#star"></use>
                    <use x="100" y="0" xlinkHref="#star"></use>
                    <use x="150" y="0" xlinkHref="#star"></use>
                    <use x="200" y="0" xlinkHref="#star"></use>
                  </g>
                </svg>
              </div>

              <div className="text-[16px] text-gray-200 tracking-[1px] font-light">
                ({reviews.count} omdömen)
              </div>
            </a>
          </div>

          <div className="my-6.25">
            <a
              href="https://www.timecenter.se/lirkab/"
              target="_blank"
              rel="noopener noreferrer"
              className="font-bahn bg-black text-white py-4 px-16 text-center inline-block text-[20px] tracking-[2px] transition-opacity hover:opacity-80"
            >
              Boka tid
            </a>
          </div>
        </div>
      </main>

      <footer className="mt-auto w-full h-10 bg-[#7F8386] flex justify-center items-center">
        <div className="w-full h-full flex items-center justify-center">
          <p className="font-bahn text-white text-[13px] leading-5 tracking-[1px] px-2.5">
            &copy; {new Date().getFullYear()} - Lerbergets idrotts & rehabklinik AB
          </p>
        </div>
      </footer>

    </div>
  );
}