import type { Metadata } from "next";
import { Reveal } from "@/component/common/Reveal";
import { termsConditionsData } from "@/data/terms-conditionsData";

// ISR: keep HTML cache lifetime short (s-maxage=3600) instead of static 1-year default.
export const revalidate = 3600;

export const metadata: Metadata = {
  title: "Terms and Conditions",
  robots: { index: false, follow: false },
  description: "Terms and Conditions of DesignShare by Elegant IT Limited.",
};

export default function TermsConditionsPage() {
  const renderText = (text: string) => {
    if (text.includes("admin@designshare.net")) {
      const parts = text.split("admin@designshare.net");
      return (
        <>
          {parts[0]}
          <a
            href="mailto:admin@designshare.net"
            style={{
              color: "#1E5EFF",
              textDecoration: "underline",
              fontWeight: 600,
            }}
          >
            admin@designshare.net
          </a>
          {parts[1]}
        </>
      );
    }
    return text;
  };

  return (
    <div className="ds-page">
      <section
        className="ds-sec"
        style={{
          background: "#F4EFE1",
          paddingTop: "160px",
          paddingBottom: "120px",
        }}
      >
        <div className="ds-container" style={{ maxWidth: "800px" }}>
          <Reveal>
            <h1 className="ds-h-2" style={{ marginBottom: "20px" }}>
              {termsConditionsData.title}
            </h1>
            <p
              className="ds-lede"
              style={{ marginBottom: "60px", opacity: 0.7 }}
            >
              Last updated: {termsConditionsData.lastUpdated}
            </p>
          </Reveal>

          <Reveal>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: "40px",
                color: "#222222",
                fontFamily:
                  "var(--font-jakarta, 'Plus Jakarta Sans'), system-ui, sans-serif",
                fontSize: "16px",
                lineHeight: "1.75",
              }}
            >
              {termsConditionsData.sections.map((section, idx) => (
                <div key={idx}>
                  <h3
                    style={{
                      fontSize: "20px",
                      fontWeight: 800,
                      color: "#0F0F10",
                      marginBottom: "16px",
                    }}
                  >
                    {section.title}
                  </h3>

                  {section.paragraphs &&
                    section.paragraphs.map((p, pIdx) => {
                      if (section.isImportant) {
                        return (
                          <p
                            key={pIdx}
                            style={{
                              marginBottom: "16px",
                              fontWeight: 700,
                              fontStyle: "italic",
                              color: "#0F0F10",
                              lineHeight: "1.6",
                            }}
                          >
                            {renderText(p)}
                          </p>
                        );
                      }
                      return (
                        <p key={pIdx} style={{ marginBottom: "16px" }}>
                          {renderText(p)}
                        </p>
                      );
                    })}

                  {section.listItems && (
                    <ul
                      style={{
                        paddingLeft: "20px",
                        display: "flex",
                        flexDirection: "column",
                        gap: "8px",
                        listStyleType: "disc",
                      }}
                    >
                      {section.listItems.map((item, lIdx) => (
                        <li key={lIdx}>{item}</li>
                      ))}
                    </ul>
                  )}
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}